/**
 * Accessibility Styles - FFXP-52
 * WCAG 2.1 AA Compliance
 *
 * Includes:
 * - Focus indicators
 * - Skip links
 * - Screen reader utilities
 * - High contrast mode support
 * - Reduced motion support
 */

/* ============================================
   Skip Links
   ============================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
  z-index: 100000;
  transition: top 0.3s ease;
}

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

/* ============================================
   Focus Indicators - Enhanced Visibility
   ============================================ */

/* Global focus style */
:focus {
  outline: 2px solid #538d83;
  outline-offset: 2px;
}

/* Remove default outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for keyboard navigation */
:focus-visible {
  outline: 3px solid #538d83;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(83, 141, 131, 0.2);
}

/* Button focus states */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #538d83;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(83, 141, 131, 0.3);
}

/* Input focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #538d83;
  outline-offset: 0;
  border-color: #538d83;
  box-shadow: 0 0 0 4px rgba(83, 141, 131, 0.15);
}

/* Link focus states */
a:focus-visible {
  outline: 2px solid #538d83;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Menu item focus */
.menu-item:focus-visible,
.start-menu-item:focus-visible,
.user-menu-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.15);
}

/* Window control focus */
.window-control:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Taskbar item focus */
.taskbar-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Table row focus */
tr:focus-visible {
  outline: 2px solid #538d83;
  outline-offset: -2px;
  background: rgba(83, 141, 131, 0.1);
}

/* ============================================
   Screen Reader Utilities
   ============================================ */

/* Visually hidden but accessible to 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;
}

/* Show on focus (for skip links etc.) */
.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;
}

/* Live region for announcements */
.aria-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Keyboard Navigation Indicators
   ============================================ */

/* Show keyboard navigation mode */
body.keyboard-nav *:focus {
  outline: 3px solid #538d83 !important;
  outline-offset: 2px !important;
}

/* Focus trap indicator */
[data-focus-trap="true"] {
  position: relative;
}

[data-focus-trap="true"]::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px dashed rgba(83, 141, 131, 0.5);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

[data-focus-trap="true"]:focus-within::before {
  opacity: 1;
}

/* ============================================
   Color Contrast Improvements
   ============================================ */

/* Ensure minimum contrast ratio of 4.5:1 for normal text */
.low-contrast-fix {
  color: #374151 !important; /* Darker gray for better contrast */
}

/* Placeholder text - ensure 4.5:1 contrast */
::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* Disabled state - still readable */
:disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error text - ensure visibility */
.error-text,
.form-error {
  color: #dc2626;
  font-weight: 500;
}

/* Success text */
.success-text {
  color: #16a34a;
  font-weight: 500;
}

/* ============================================
   Interactive Element Sizing
   ============================================ */

/* Minimum touch target size (44x44px for WCAG) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Clickable area expansion */
.expand-click-area {
  position: relative;
}

.expand-click-area::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@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;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --border-width: 2px;
  }

  button,
  input,
  select,
  textarea {
    border-width: 2px !important;
  }

  .window {
    border-width: 2px !important;
  }

  :focus-visible {
    outline-width: 4px !important;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .btn,
  button {
    border: 2px solid ButtonText;
  }

  :focus-visible {
    outline: 3px solid Highlight !important;
  }

  .window-header {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* ============================================
   Form Accessibility
   ============================================ */

/* Required field indicator */
.required-field::after {
  content: ' *';
  color: #dc2626;
  font-weight: bold;
}

/* Error state for inputs */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Associated error message */
.field-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-error::before {
  content: '⚠';
}

/* ============================================
   Table Accessibility
   ============================================ */

/* Sortable column indicator */
th[aria-sort] {
  cursor: pointer;
}

th[aria-sort]::after {
  content: ' ⇅';
  opacity: 0.5;
}

th[aria-sort="ascending"]::after {
  content: ' ↑';
  opacity: 1;
}

th[aria-sort="descending"]::after {
  content: ' ↓';
  opacity: 1;
}

/* Row selection indicator */
tr[aria-selected="true"] {
  background: rgba(83, 141, 131, 0.15);
}

/* ============================================
   Loading States
   ============================================ */

/* Loading indicator for screen readers */
[aria-busy="true"] {
  position: relative;
}

[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #e5e7eb;
  border-top-color: #538d83;
  border-radius: 50%;
  animation: a11y-spinner 0.8s linear infinite;
}

@keyframes a11y-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Dialog/Modal Accessibility
   ============================================ */

/* Modal backdrop */
[role="dialog"][aria-modal="true"] {
  /* Focus trap styling handled by JS */
}

/* Dialog close button */
[role="dialog"] [aria-label="Close"] {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================
   Status Messages
   ============================================ */

/* Alert styling */
[role="alert"] {
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 500;
}

[role="alert"][data-type="error"] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

[role="alert"][data-type="success"] {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

[role="alert"][data-type="warning"] {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

[role="alert"][data-type="info"] {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}