/* ============================================================================
   BaciScout Accessibility - Feature #245
   ============================================================================

   WCAG 2.2 Level AA Compliance Implementation

   This file implements comprehensive accessibility improvements ensuring full
   compliance with WCAG 2.2 Level AA requirements for users with disabilities.

   Key Features:
   - Keyboard navigation and focus indicators (SC 2.1.1, SC 2.4.7, SC 2.4.11-2.4.13)
   - Skip navigation links (SC 2.4.1)
   - ARIA live regions for dynamic content (HTMX)
   - Form error announcements with ARIA
   - Screen reader utilities
   - Keyboard trap management for modals

   Compliance References:
   - WCAG 2.2: https://www.w3.org/WAI/WCAG22/Understanding/
   - Focus Appearance (SC 2.4.13): https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
   - Focus Visible (SC 2.4.7): https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
   - Skip Navigation (SC 2.4.1): https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
   - ARIA Live Regions: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions
   - EU Accessibility Act: https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/european-accessibility-act-eaa_en

   ============================================================================ */

/* ============================================================================
   SECTION 1: SKIP NAVIGATION LINKS (SC 2.4.1)
   ============================================================================ */

/* Skip navigation links - hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bs-primary);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
  font-weight: 500;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--bs-warning);
  outline-offset: 2px;
}

/* Multiple skip links for different sections */
.skip-link:focus-visible {
  top: 0;
}

/* ============================================================================
   SECTION 2: FOCUS INDICATORS (SC 2.4.7, SC 2.4.11-2.4.13)
   ============================================================================ */

/* Remove default outline and use keyboard-only focus */
*:focus {
  outline: none;
}

/* Keyboard-only focus indicator - meets 3:1 contrast requirement */
*:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Enhanced focus for buttons */
.btn:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Enhanced focus for form controls */
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Enhanced focus for links */
a:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 3px;
  border-radius: 2px;
  text-decoration: underline;
}

/* Enhanced focus for checkboxes and radios */
.form-check-input:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Focus indicators for custom interactive elements */
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Focus in sticky headers/footers - ensure not obscured */
.sticky-header:focus-within,
.sticky-footer:focus-within {
  z-index: 1050 !important;
}

/* Focus indicators for pagination */
.page-link:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
}

/* ============================================================================
   SECTION 3: ARIA LIVE REGIONS FOR HTMX DYNAMIC CONTENT
   ============================================================================ */

/* ARIA live regions for announcing dynamic content updates.
   OFF-CANVAS HIDING IS OPT-IN, NEVER A SIDE EFFECT OF aria-live.
   A blanket [aria-live] selector hid VISIBLE content (tender results,
   flash messages, toasts, empty states) off-canvas at left:-10000px
   (t_e5b84b0e): visible elements carrying aria-live for screen-reader
   announcements kept rendering 1px wide and invisible.
   Rule: elements that should be invisible announcements opt in via
   .htmx-live-region / #status-live-region / #alert-live-region /
   #form-error-live-region (all defined below) or Bootstrap .visually-hidden.
   Any [aria-live] element WITHOUT those classes renders normally. */

/* Live region for HTMX content updates */
.htmx-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Live region for status messages (non-urgent) */
#status-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Live region for alerts (urgent) */
#alert-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Live region for form errors */
#form-error-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dedicated invisible live-announcement node (t_e5b84b0e).
   Apply ONLY to nodes whose sole purpose is an off-screen screen-reader
   announcement (e.g. #tender-list-announcer). Visible elements that merely
   carry aria-live must NOT use this class — see Section 3. */
.sr-announcement,
#tender-list-announcer {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================================
   SECTION 4: FORM ERROR ANNOUNCEMENTS
   ============================================================================ */

/* Form field with error */
[aria-invalid="true"] {
  border-color: var(--bs-danger) !important;
  border-width: 2px;
}

[aria-invalid="true"]:focus-visible {
  outline: 3px solid var(--bs-danger);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.25);
}

/* Error message styling */
[role="alert"],
.error-message,
.invalid-feedback {
  color: var(--bs-danger);
  font-weight: 500;
}

/* Error message icon */
.error-message::before,
.invalid-feedback::before {
  content: "⚠ ";
  speak: none;
}

/* ============================================================================
   SECTION 5: SCREEN READER ONLY CONTENT
   ============================================================================ */

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

/* Make screen reader content visible when focused */
.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================================================
   SECTION 6: KEYBOARD TRAP MANAGEMENT FOR MODALS
   ============================================================================ */

/* Modal keyboard trap - enforce focus containment */
.modal[aria-modal="true"] {
  /* Ensure modal is focusable */
}

/* Focus trap indicator for debugging */
.focus-trap-active *:focus-visible {
  outline: 3px solid var(--bs-warning);
  outline-offset: 2px;
}

/* Last focusable element in modal */
.modal-footer .btn:last-child:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ============================================================================
   SECTION 7: ROVING TABINDEX FOR WIDGET GROUPS
   ============================================================================ */

/* Roving tabindex for widget groups (tabs, lists, grids) */
[role="tablist"] [role="tab"][tabindex="0"] {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Selected tab indicator */
[role="tab"][aria-selected="true"] {
  border-bottom: 3px solid var(--bs-primary);
  font-weight: 600;
}

/* ============================================================================
   SECTION 8: HEADING HIERARCHY INDICATORS
   ============================================================================ */

/* Heading hierarchy visual indicators (for development/debugging) */
/* Uncomment during development to verify heading structure */
/*
h1::before { content: "H1 "; font-size: 0.5em; color: var(--bs-danger); }
h2::before { content: "H2 "; font-size: 0.5em; color: var(--bs-warning); }
h3::before { content: "H3 "; font-size: 0.5em; color: var(--bs-info); }
h4::before { content: "H4 "; font-size: 0.5em; color: var(--bs-success); }
h5::before { content: "H5 "; font-size: 0.5em; color: var(--bs-primary); }
h6::before { content: "H6 "; font-size: 0.5em; color: var(--bs-secondary); }
*/

/* ============================================================================
   SECTION 9: HIGH CONTRAST MODE SUPPORT
   ============================================================================ */

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  *,
  *::before,
  *::after {
    border-width: 2px !important;
  }

  .btn {
    border-width: 3px !important;
  }

  /* Ensure focus indicator is very visible in high contrast mode */
  *:focus-visible {
    outline-width: 4px !important;
    outline-offset: 3px !important;
  }
}

/* ============================================================================
   SECTION 10: DARK MODE FOCUS INDICATORS
   ============================================================================ */

/* Dark mode focus adjustments */
[data-bs-theme="dark"] *:focus-visible {
  outline-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
}

[data-bs-theme="dark"] .form-control:focus-visible,
[data-bs-theme="dark"] .form-select:focus-visible {
  background-color: rgba(13, 110, 253, 0.1);
}

/* ============================================================================
   SECTION 11: ACCESSIBILITY TESTING UTILITIES
   ============================================================================ */

/* Show all focusable elements (for testing) */
.show-focusable *:focusable,
.show-focusable *:focus {
  outline: 2px dotted var(--bs-warning) !important;
}

/* Show all ARIA labels (for testing) */
.show-aria-labels [aria-label]::after {
  content: " [" attr(aria-label) "]";
  font-size: 0.7em;
  color: var(--bs-warning);
}

/* Show all heading levels (for testing) */
.show-headings h1::before,
.show-headings h2::before,
.show-headings h3::before,
.show-headings h4::before,
.show-headings h5::before,
.show-headings h6::before {
  content: attr(class) ": ";
  font-size: 0.5em;
  color: var(--bs-info);
}

/* ============================================================================
   SECTION 12: DYNAMIC CONTENT UPDATE ANNOUNCEMENTS
   ============================================================================ */

/* HTMX swap indicator for screen readers */
[aria-live] {
  /* Ensure screen reader announces updates */
}

/* Announce list updates (e.g., tender inbox, notifications) */
[aria-live="polite"].updated-list {
  /* Live region for list content changes */
}

/* Announce critical alerts (e.g., errors, warnings) */
[aria-live="assertive"].critical-alert {
  /* Live region for urgent announcements */
}

/* ============================================================================
   SECTION 13: KEYBOARD SHORTCUT INDICATORS
   ============================================================================ */

/* Keyboard shortcut indicator styling */
.keyboard-shortcut {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.875em;
  box-shadow: 0 2px 0 var(--bs-border-color);
}

/* Keyboard shortcut in tooltips */
[data-keyboard-shortcut]::after {
  content: " [" attr(data-keyboard-shortcut) "]";
  font-size: 0.75em;
  opacity: 0.7;
}

/* ============================================================================
   SECTION 14: CUSTOM INTERACTIVE ELEMENTS
   ============================================================================ */

/* Custom dropdown - ensure keyboard accessibility */
.custom-dropdown[role="combobox"] {
  position: relative;
}

.custom-dropdown[aria-expanded="true"] .dropdown-menu {
  display: block;
}

/* Custom tabs - ensure keyboard navigation */
.custom-tab[role="tab"] {
  cursor: pointer;
}

.custom-tab[role="tab"][aria-selected="true"] {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* Custom checkbox - ensure keyboard accessibility */
.custom-checkbox[role="checkbox"] {
  cursor: pointer;
}

.custom-checkbox[aria-checked="true"]::before {
  content: "✓";
  font-weight: bold;
}

/* ============================================================================
   SECTION 15: REDUCED MOTION PREFERENCE
   ============================================================================ */

/* Respect user's motion preference */
@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;
  }
}

/* ============================================================================
   SECTION 16: PRINT ACCESSIBILITY
   ============================================================================ */

/* Print styles for accessibility */
@media print {
  /* Skip links not needed in print */
  .skip-link {
    display: none;
  }

  /* Ensure URLs are printed */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }

  /* Print focus indicators for reference */
  *:focus {
    outline: 2px solid black;
  }
}

/* ============================================================================
   SECTION 17: COLOR CONTRAST HELPERS
   ============================================================================ */

/* Text on primary background */
.text-on-primary {
  color: white;
}

/* Text on secondary background */
.text-on-secondary {
  color: var(--bs-secondary-color);
}

/* High contrast text */
.high-contrast {
  color: black;
  background-color: white;
  border: 2px solid black;
}

/* ============================================================================
   SECTION 18: LANDMARK REGIONS
   ============================================================================ */

/* Landmark region indicators (for development/debugging) */
/* Uncomment during development to verify landmark structure */
/*
[role="banner"] { outline: 2px solid var(--bs-danger); }
[role="navigation"] { outline: 2px solid var(--bs-warning); }
[role="main"] { outline: 2px solid var(--bs-info); }
[role="complementary"] { outline: 2px solid var(--bs-success); }
[role="contentinfo"] { outline: 2px solid var(--bs-primary); }
[role="search"] { outline: 2px solid var(--bs-secondary); }
[role="form"] { outline: 2px dotted var(--bs-info); }
*/

/* ============================================================================
   SECTION 19: TABLE ACCESSIBILITY
   ============================================================================ */

/* Table captions for screen readers */
table caption {
  text-align: left;
  padding: 8px;
  font-weight: 600;
  background-color: var(--bs-table-bg);
  caption-side: top;
}

/* Table headers scope */
table th[scope="col"] {
  text-align: center;
}

table th[scope="row"] {
  text-align: left;
}

/* ============================================================================
   SECTION 20: UTILITY CLASSES
   ============================================================================ */

/* Focus indicator utility */
.focus-ring {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Remove focus indicator (use sparingly) */
.focus-none:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus visible only (keyboard) */
.focus-visible-only:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Ensure element is focusable
   NOTE: tabindex is an HTML attribute, not CSS.
   Use JavaScript or add tabindex="0" directly in HTML.
   This class provides visual styling only.
*/
.focusable {
  cursor: pointer;
}

/* Make element not focusable
   NOTE: tabindex is an HTML attribute, not CSS.
   Use JavaScript or add tabindex="-1" directly in HTML.
   This class provides visual styling only.
*/
.not-focusable {
  pointer-events: none;
}

/* ============================================================================
   END OF ACCESSIBILITY.CSS
   ============================================================================ */