/* ============================================================
   Accessibility Styles - WCAG 2.1 Level AA Compliance
   ============================================================ */

/* Focus Indicators - Keyboard Navigation Support */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus,
[tabindex]:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Ensure outline is visible on all button types */
button {
  position: relative;
}

button:focus::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid #0066cc;
  pointer-events: none;
  border-radius: inherit;
}

/* Form input focus states */
.form-control:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* Links with sufficient visual distinction */
a {
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

a:focus {
  text-decoration: underline;
  background-color: rgba(0, 102, 204, 0.1);
}

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

/* Skip Links - Hidden by default, visible on focus (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.skip-link:focus {
  top: 0;
  left: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Ensure label is visible and clearly associated */
label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

/* Required field indicator - Accessible */
[required]::after,
.required::after {
  content: ' *';
  color: #d32f2f;
}

/* Error states with sufficient contrast */
.text-danger,
.is-invalid {
  color: #d32f2f !important;
}

.form-control.is-invalid {
  border-color: #d32f2f;
}

.form-control.is-invalid:focus {
  border-color: #d32f2f;
  box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25);
}

/* Alert and status message styling */
[role="alert"],
[aria-live] {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

[role="alert"] {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* Ensure proper contrast for disabled fields */
input[disabled],
select[disabled],
textarea[disabled],
button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0066cc;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

/* Hide visually but keep available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Modal focus management */
[role="dialog"] {
  position: relative;
}

[role="dialog"]:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Ensure button text is readable */
.btn {
  font-weight: 600;
  text-decoration: none !important;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Improve table header contrast */
table thead th {
  background-color: #f8f9fa;
  color: #212529;
  font-weight: 600;
  border-color: #dee2e6;
}

/* Ensure proper contrast for nav links */
.navbar-light .navbar-nav .nav-link {
  color: #212529 !important;
}

.navbar-light .navbar-nav .nav-link:focus {
  color: #0066cc !important;
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Enhanced focus for navbar toggler */
.navbar-toggler:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Icon buttons accessibility */
[role="button"],
.btn-link {
  cursor: pointer;
}

/* Text contrast for muted text - increased from Bootstrap default */
.text-muted {
  color: #6c757d !important;
}

/* Ensure input group addons have proper contrast */
.input-group-text {
  background-color: #e9ecef;
  color: #212529;
}

/* Checkbox and radio button accessibility */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.5rem;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Ensure placeholder text has lower importance than label */
::placeholder {
  opacity: 0.7;
  font-style: italic;
}

/* Remove default focus outline from elements that use custom focus style */
:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  body {
    color: #000;
    background-color: #fff;
  }

  a {
    text-decoration: underline;
  }

  button,
  input,
  select,
  textarea {
    border: 2px solid #000;
  }
}

/* Alert and Error Messaging */
[role="alert"],
.alert {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* Hide empty alert boxes on page load */
[role="alert"] {
  display: none;
}

/* Show alert when it has visible content */
[role="alert"]:not(:empty) {
  display: block;
}

[role="alert"] h6,
.alert h6 {
  margin: 0;
  color: #721c24;
}

/* Error text styling */
.text-danger {
  color: #dc3545 !important;
  font-weight: 500;
}

/* Alert Icon Styling - Icon + Text for Error Indication */
.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #721c24;
}

.alert-danger .alert-icon {
  color: #721c24;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  button:focus,
  input:focus,
  textarea:focus,
  select:focus,
  a:focus,
  [tabindex]:focus {
    outline: 3px solid #4da3ff;
  }

  .form-control:focus {
    border-color: #4da3ff;
    box-shadow: 0 0 0 0.2rem rgba(77, 163, 255, 0.25);
  }

  [role="alert"],
  .alert {
    background-color: #3d1f23;
    border-color: #5a2730;
    color: #f8d7da;
  }

  [role="alert"] h6,
  .alert h6 {
    color: #f8d7da;
  }
}

/* Color Contrast Improvements for PWD Accessibility */
.text-muted {
  color: #545454 !important;
  font-weight: 500;
}

/* Success text contrast */
.text-success {
  color: #22863a !important;
  font-weight: 600;
}