/* Accessibility-focused CSS enhancements for Mind Care application */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Show screen reader content on focus */
.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip link styling */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 6px;
}

/* Enhanced focus indicators */
.focus-enhanced:focus {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .enhanced-card {
    border: 2px solid hsl(var(--border));
  }
  
  .button, button, .btn {
    border: 2px solid currentColor;
  }
  
  .input, input, textarea, select {
    border: 2px solid hsl(var(--input));
  }
  
  /* Ensure sufficient contrast for interactive elements */
  button:hover, .btn:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
}

/* 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;
  }
  
  /* Keep essential animations but make them faster */
  .mood-button, .interactive-card {
    transition-duration: 0.1s;
  }
}

/* Focus trap for modal dialogs */
.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

/* Keyboard navigation indicators */
.keyboard-nav:focus {
  outline: 3px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Enhanced button focus states */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--background));
}

/* Form field error states for accessibility */
.field-error {
  border-color: hsl(var(--destructive)) !important;
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2);
}

.field-error:focus {
  outline-color: hsl(var(--destructive));
}

/* Loading states with accessibility announcements */
.loading-accessible {
  position: relative;
}

.loading-accessible::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid hsl(var(--muted));
  border-top: 2px solid hsl(var(--primary));
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Accessible tooltips */
.tooltip-accessible {
  position: relative;
  display: inline-block;
}

.tooltip-accessible[aria-describedby]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tooltip-accessible:hover::after,
.tooltip-accessible:focus::after {
  opacity: 1;
  visibility: visible;
}

/* ARIA live region styling */
[aria-live="polite"],
[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages that should be visible */
.status-message {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 8px 0;
  font-weight: 500;
}

.status-success {
  background-color: hsl(var(--success) / 0.1);
  border: 1px solid hsl(var(--success) / 0.3);
  color: hsl(var(--success-foreground));
}

.status-error {
  background-color: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive) / 0.3);
  color: hsl(var(--destructive-foreground));
}

.status-warning {
  background-color: hsl(var(--warning) / 0.1);
  border: 1px solid hsl(var(--warning) / 0.3);
  color: hsl(var(--warning-foreground));
}

/* Accessible form validation styling */
.form-field {
  position: relative;
  margin-bottom: 1rem;
}

.form-field .error-message {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-field .error-message::before {
  content: '⚠';
  font-size: 0.875rem;
}

/* Accessible table styling */
.accessible-table {
  width: 100%;
  border-collapse: collapse;
}

.accessible-table th,
.accessible-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid hsl(var(--border));
}

.accessible-table th {
  font-weight: 600;
  background-color: hsl(var(--muted) / 0.5);
}

.accessible-table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.3);
}

/* Accessible navigation indicators */
.nav-current {
  position: relative;
}

.nav-current::after {
  content: '(current page)';
  position: absolute;
  left: -10000px;
}

/* Print styles for accessibility */
@media print {
  .no-print,
  .skip-link,
  button,
  .btn {
    display: none !important;
  }
  
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
  
  .enhanced-card {
    border: 1px solid #000;
    break-inside: avoid;
  }
}

/* Custom focus styles for specific components */
.mood-selector button:focus {
  outline: 3px solid hsl(var(--primary));
  outline-offset: 4px;
  transform: scale(1.1);
}

.chat-input:focus {
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.3);
}

.meditation-control:focus {
  background-color: hsl(var(--primary) / 0.1);
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Responsive accessibility improvements */
@media (max-width: 768px) {
  /* Increase touch targets on mobile */
  button,
  .btn,
  a,
  input,
  textarea,
  select {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improve spacing for easier navigation */
  .interactive-element {
    margin: 8px 0;
  }
  
  /* Ensure sufficient contrast on mobile screens */
  .mobile-enhanced {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
  }
}

/* Color customization for accessibility preferences */
.high-contrast-mode {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 20%;
  --border: 0 0% 0%;
  --primary: 220 100% 40%;
  --primary-foreground: 0 0% 100%;
}

.dark-high-contrast-mode {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 80%;
  --border: 0 0% 100%;
  --primary: 220 100% 60%;
  --primary-foreground: 0 0% 0%;
}

/* Animation controls for accessibility */
.no-animations * {
  animation: none !important;
  transition: none !important;
}

.respect-motion-preference {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .respect-motion-preference {
    animation-play-state: paused;
  }
}