/**
 * Accessibility Fixes - WCAG AA Compliance
 * Ensures minimum 4.5:1 contrast ratio for normal text
 * Ensures minimum 3:1 contrast ratio for large text
 */

/* Fix low contrast text colors */
.text-white\/20 {
  color: rgba(255, 255, 255, 0.5) !important; /* Improved from 0.2 to 0.5 */
}

.text-white\/30 {
  color: rgba(255, 255, 255, 0.6) !important; /* Improved from 0.3 to 0.6 */
}

.text-white\/40 {
  color: rgba(255, 255, 255, 0.65) !important; /* Improved from 0.4 to 0.65 */
}

/* Ensure borders have sufficient contrast */
.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.3) !important; /* Improved from 0.2 to 0.3 */
}

/* Fix background colors that may cause contrast issues */
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.15) !important; /* Improved from 0.1 to 0.15 */
}

.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.25) !important; /* Improved from 0.2 to 0.25 */
}

/* Ensure focus indicators are visible */
*:focus-visible {
  outline: 2px solid #ccff00 !important; /* Accent color */
  outline-offset: 2px !important;
}

/* Ensure all interactive elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #ccff00 !important;
  outline-offset: 2px !important;
}

/* Improve contrast for placeholder text */
::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}

/* Ensure disabled elements have sufficient contrast */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix contrast for slate colors */
.text-slate-400 {
  color: rgb(148, 163, 184) !important; /* Tailwind slate-400 - meets WCAG AA */
}

.text-slate-500 {
  color: rgb(148, 163, 184) !important; /* Improved from slate-500 to slate-400 */
}

.text-slate-600 {
  color: rgb(148, 163, 184) !important; /* Improved from slate-600 to slate-400 */
}

/* Fix contrast for gray colors */
.text-gray-400 {
  color: rgb(156, 163, 175) !important; /* Tailwind gray-400 - meets WCAG AA */
}

.text-gray-500 {
  color: rgb(156, 163, 175) !important; /* Improved from gray-500 to gray-400 */
}

.text-gray-600 {
  color: rgb(156, 163, 175) !important; /* Improved from gray-600 to gray-400 */
}

/* Ensure minimum touch target sizes on mobile */
@media (max-width: 768px) {
  a,
  button,
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"]) {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem !important;
  }
  
  /* Exception for inline text links */
  p a,
  span a,
  li a {
    min-height: auto !important;
    min-width: auto !important;
    padding: 0.25rem !important;
  }
}

/* Screen reader only class */
.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-width: 0 !important;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: #ccff00;
  color: #000;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
  font-weight: bold;
}

.skip-to-main:focus {
  top: 0;
}

/* Ensure sufficient contrast for form validation messages */
.error-message {
  color: #ff6b6b !important; /* Bright red with good contrast */
}

.success-message {
  color: #51cf66 !important; /* Bright green with good contrast */
}

.warning-message {
  color: #ffd43b !important; /* Bright yellow with good contrast */
}

/* Fix contrast for status badges */
.badge-live {
  background-color: #ef4444 !important; /* Red-600 */
  color: #ffffff !important;
}

.badge-scheduled {
  background-color: #3b82f6 !important; /* Blue-600 */
  color: #ffffff !important;
}

.badge-ended {
  background-color: #6b7280 !important; /* Gray-600 */
  color: #ffffff !important;
}

/* Ensure table headers have sufficient contrast */
th {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix contrast for navigation items */
nav a {
  color: rgba(255, 255, 255, 0.9) !important;
}

nav a:hover,
nav a:focus {
  color: #ccff00 !important;
}

/* Ensure card borders are visible */
.card,
.bg-card-dark {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Fix contrast for footer text */
footer {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure form labels have sufficient contrast */
label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix contrast for loading indicators */
.loading-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure tooltips have sufficient contrast */
.tooltip {
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}