/* 
 * WCAG 2.1 AA Compliance CSS
 * This file contains styles to ensure accessibility compliance
 */

/* --- Focus Visibility --- */
/* Ensure focus indicators are visible for keyboard navigation */
*:focus {
  outline: 3px solid #0d6efd !important;
  outline-offset: 2px !important;
}

/* Special focus for interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: 3px solid #0d6efd !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- Text Readability --- */
/* Set minimum text contrast ratios */
body {
  color: #212529 !important; /* Ensures 7:1 contrast ratio against white backgrounds */
  line-height: 1.5 !important; /* Ensures text is readable */
  font-size: 16px !important; /* Minimum font size for readability */
}

/* High contrast mode support */
@media (forced-colors: active) {
  * {
    forced-color-adjust: none;
  }
  
  .btn-primary {
    background-color: Highlight !important;
    color: HighlightText !important;
  }
  
  .text-muted {
    color: GrayText !important;
  }
}

/* --- Form Controls --- */
/* Ensure all form elements have appropriate labels */
.form-label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

/* Style for form validation errors to not rely solely on color */
.is-invalid {
  border-left: 5px solid #dc3545 !important;
}

.invalid-feedback {
  display: block !important;
  margin-top: 0.25rem !important;
  font-weight: 500 !important;
}

.invalid-feedback::before {
  content: "⚠ ";
}

/* --- Skip Links --- */
/* Skip to main content links for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0d6efd;
  color: white;
  padding: 8px;
  z-index: 1000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

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

/* --- Motion and Animation --- */
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .carousel-item {
    transition: none !important;
  }
}

/* --- Color and Contrast --- */
/* Ensure color is not used as the only visual means of conveying information */
.success-status, .alert-success {
  background-color: rgba(25, 135, 84, 0.1) !important;
  border-left: 4px solid #198754 !important;
}

.success-status::before, .alert-success::before {
  content: "✓ ";
  font-weight: bold;
}

.warning-status, .alert-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  border-left: 4px solid #ffc107 !important;
}

.warning-status::before, .alert-warning::before {
  content: "⚠ ";
  font-weight: bold;
}

.error-status, .alert-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border-left: 4px solid #dc3545 !important;
}

.error-status::before, .alert-danger::before {
  content: "✗ ";
  font-weight: bold;
}

/* --- Table Accessibility --- */
/* Make tables more accessible */
table {
  border-collapse: collapse !important;
}

th {
  text-align: left !important;
  font-weight: bold !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

table.table-bordered th,
table.table-bordered td {
  border: 1px solid #dee2e6 !important;
}

/* --- Language Direction Support --- */
/* RTL language support */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: 0;
}

[dir="rtl"] .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

/* --- Dark Mode Support --- */
[data-bs-theme=dark] {
  color-scheme: dark !important;
}

[data-bs-theme=dark] body {
  color: #dee2e6 !important;
  background-color: #212529 !important;
}

[data-bs-theme=dark] .form-control {
  background-color: #343a40 !important;
  border-color: #495057 !important;
  color: #dee2e6 !important;
}

[data-bs-theme=dark] .success-status, 
[data-bs-theme=dark] .alert-success {
  background-color: rgba(25, 135, 84, 0.2) !important;
  color: #d1e7dd !important;
}

[data-bs-theme=dark] .warning-status, 
[data-bs-theme=dark] .alert-warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
  color: #fff3cd !important;
}

[data-bs-theme=dark] .error-status, 
[data-bs-theme=dark] .alert-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  color: #f8d7da !important;
}

/* --- Print Specific Styles --- */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt !important;
    line-height: 1.3 !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #212529;
  }
  
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  
  pre, blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr, img {
    page-break-inside: avoid;
  }
  
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2, h3 {
    page-break-after: avoid;
  }
}