/**
 * Accessibility Enhancements
 * Focus indicators, skip links, and ARIA improvements
 */

/* Skip to Content Link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #007bff;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 10001;
  font-weight: 500;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #ffc107;
  outline-offset: 2px;
}

/* Focus Visible Indicators */
*:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Button Focus */
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Link Focus */
a:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
  text-decoration: underline;
}

/* Input Focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
}

/* Card/Interactive Elements Focus */
.card:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

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

/* Screen Reader Only Text */
.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;
}

/* Visually Hidden but Accessible */
.visually-hidden {
  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-width: 0 !important;
}

/* ARIA Live Regions */
[aria-live] {
  /* Ensure live regions are accessible but not visually obtrusive */
}

.aria-live-polite:not(.toastify):not(.toastify-center):not(.toastify-right):not(.toastify-left) {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Loading States with ARIA */
[role="status"],
[aria-busy="true"] {
  /* Add visual indicator for loading states */
}

.loading-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loading-status::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #007bff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Icon Buttons - Ensure Adequate Size */
.icon-button,
button.icon-only {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Touch Target Sizing for Mobile - Removed aggressive global rules that conflict with Bootstrap */
/* Apply touch-friendly sizing only to specific icon buttons when needed using .touch-target class */
@media (max-width: 768px) {
  /* Only apply to explicitly marked touch targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure form inputs remain usable */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea {
    min-height: 44px;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }

  button,
  .btn {
    border: 2px solid currentColor;
  }
}

/* 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;
  }

  .loading-status::before {
    animation: none;
    border-top-color: #007bff;
  }
}

/* Keyboard Navigation Hints */
.keyboard-hint {
  display: inline-block;
  padding: 2px 6px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  font-size: 0.85rem;
  font-family: monospace;
  margin-left: 8px;
  color: #666;
}

@media (prefers-color-scheme: dark) {
  .keyboard-hint {
    background: #333;
    border-color: #444;
    color: #aaa;
  }
}

/* Error States - Accessible */
.form-error,
[aria-invalid="true"] {
  border-color: #dc3545 !important;
}

.error-message {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.error-message::before {
  content: "⚠";
  font-weight: bold;
}

/* Success States - Accessible */
.form-success,
[aria-invalid="false"] {
  border-color: #28a745 !important;
}

.success-message {
  color: #28a745;
  font-size: 0.9rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.success-message::before {
  content: "✓";
  font-weight: bold;
}

/* Tooltip Accessibility */
[role="tooltip"] {
  position: absolute;
  z-index: 9998;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.875rem;
  max-width: 200px;
  text-align: center;
}

/* Focus within containers */
.focus-within-highlight:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}