/*
 * Authentication Accessibility Enhancements
 * WCAG 2.1 AA Compliance for Dark Theme Authentication Interface
 * Psycounts - Accessible Dark Authentication
 */

/* ===== WCAG 2.1 AA Color Contrast Standards ===== */

/* Enhanced color palette for better contrast ratios */
:root {
  /* WCAG AA compliant text colors (minimum 4.5:1 contrast ratio) */
  --auth-text-primary-aa: #ffffff;           /* 21:1 contrast on dark backgrounds */
  --auth-text-secondary-aa: #e5e7eb;         /* 12.6:1 contrast on dark backgrounds */
  --auth-text-muted-aa: #d1d5db;             /* 9.7:1 contrast on dark backgrounds */
  --auth-text-placeholder-aa: #9ca3af;       /* 5.2:1 contrast on dark backgrounds */

  /* Enhanced accent colors for better visibility */
  --auth-accent-primary-aa: #34d399;         /* Higher luminance green for better contrast */
  --auth-accent-hover-aa: #10b981;           /* Darker hover state with maintained contrast */

  /* Error and success colors with enhanced contrast */
  --auth-error-aa: #fca5a5;                  /* 7.1:1 contrast ratio */
  --auth-error-bg-aa: rgba(239, 68, 68, 0.15); /* Semi-transparent error background */
  --auth-success-aa: #6ee7b7;                /* 8.2:1 contrast ratio */
  --auth-success-bg-aa: rgba(16, 185, 129, 0.15); /* Semi-transparent success background */
  --auth-warning-aa: #fde047;                /* 11.8:1 contrast ratio */
  --auth-warning-bg-aa: rgba(245, 158, 11, 0.15); /* Semi-transparent warning background */

  /* Enhanced border colors for better definition */
  --auth-border-aa: rgba(255, 255, 255, 0.3); /* More visible borders */
  --auth-border-focus-aa: #34d399;           /* High contrast focus borders */

  /* Focus indicator properties */
  --auth-focus-outline-width: 3px;
  --auth-focus-outline-offset: 2px;
  --auth-focus-outline-color: #34d399;
  --auth-focus-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
}

/* ===== Enhanced Typography for Better Readability ===== */

.auth-dark-theme {
  /* Ensure high contrast text throughout */
  color: var(--auth-text-primary-aa);
}

.auth-dark-theme h1,
.auth-dark-theme h2,
.auth-dark-theme h3,
.auth-dark-theme h4,
.auth-dark-theme h5,
.auth-dark-theme h6 {
  color: var(--auth-text-primary-aa);
  font-weight: 600;
  line-height: 1.3; /* Improved line height for readability */
}

.auth-dark-theme .auth-title {
  color: var(--auth-text-primary-aa);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.auth-dark-theme .auth-subtitle {
  color: var(--auth-text-secondary-aa);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.auth-dark-theme p {
  color: var(--auth-text-secondary-aa);
  line-height: 1.6;
}

.auth-dark-theme label {
  color: var(--auth-text-primary-aa);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Enhanced link contrast */
.auth-dark-theme a {
  color: var(--auth-accent-primary-aa);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.auth-dark-theme a:hover,
.auth-dark-theme a:focus {
  color: var(--auth-accent-hover-aa);
  text-decoration-thickness: 2px;
}

/* ===== Enhanced Focus Indicators for Keyboard Navigation ===== */

/* Global focus styles with high contrast */
.auth-dark-theme *:focus {
  outline: var(--auth-focus-outline-width) solid var(--auth-focus-outline-color);
  outline-offset: var(--auth-focus-outline-offset);
  box-shadow: var(--auth-focus-shadow);
  transition: outline 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Enhanced form control focus indicators */
.auth-dark-theme .form-control:focus {
  outline: var(--auth-focus-outline-width) solid var(--auth-focus-outline-color);
  outline-offset: var(--auth-focus-outline-offset);
  border-color: var(--auth-border-focus-aa);
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    var(--auth-focus-shadow),
    0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--auth-text-primary-aa);
}

/* Button focus indicators */
.auth-dark-theme .btn:focus {
  outline: var(--auth-focus-outline-width) solid var(--auth-focus-outline-color);
  outline-offset: var(--auth-focus-outline-offset);
  box-shadow:
    var(--auth-focus-shadow),
    0 4px 15px rgba(52, 211, 153, 0.2);
}

.auth-dark-theme .btn-primary:focus {
  background: linear-gradient(135deg, var(--auth-accent-hover-aa) 0%, #059669 100%);
}

/* Checkbox and radio focus indicators */
.auth-dark-theme .form-check-input:focus {
  outline: var(--auth-focus-outline-width) solid var(--auth-focus-outline-color);
  outline-offset: var(--auth-focus-outline-offset);
  box-shadow: var(--auth-focus-shadow);
}

/* Link focus indicators */
.auth-dark-theme a:focus {
  outline: var(--auth-focus-outline-width) solid var(--auth-focus-outline-color);
  outline-offset: var(--auth-focus-outline-offset);
  border-radius: 2px;
  background: rgba(52, 211, 153, 0.1);
  padding: 2px 4px;
  margin: -2px -4px;
}

/* Skip link for keyboard navigation - hidden by default, visible on focus */
.auth-skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 6px !important;
  background: var(--auth-accent-primary-aa) !important;
  color: #000000 !important; /* High contrast text on green background */
  padding: 12px 16px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  z-index: 10000 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: top 0.15s ease-out !important;
  border: 2px solid #000000 !important;
  width: auto !important;
  height: auto !important;
  clip: unset !important;
  overflow: visible !important;
}

.auth-skip-link:focus {
  top: 6px !important;
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* ===== Accessible Error Message Styling ===== */

/* Enhanced error states with high contrast */
.auth-dark-theme .is-invalid {
  border-color: var(--auth-error-aa);
  background: var(--auth-error-bg-aa);
  color: var(--auth-text-primary-aa);
}

.auth-dark-theme .is-invalid:focus {
  border-color: var(--auth-error-aa);
  box-shadow:
    0 0 0 3px rgba(252, 165, 165, 0.3),
    0 4px 12px rgba(239, 68, 68, 0.15);
  outline: 3px solid var(--auth-error-aa);
  outline-offset: 2px;
}

/* Enhanced invalid feedback with better contrast */
.auth-dark-theme .invalid-feedback {
  color: var(--auth-error-aa);
  background: var(--auth-error-bg-aa);
  border: 1px solid rgba(252, 165, 165, 0.3);
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  position: relative;
}

.auth-dark-theme .invalid-feedback::before {
  content: "⚠️";
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* Enhanced valid feedback */
.auth-dark-theme .valid-feedback {
  color: var(--auth-success-aa);
  background: var(--auth-success-bg-aa);
  border: 1px solid rgba(110, 231, 183, 0.3);
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  position: relative;
}

.auth-dark-theme .valid-feedback::before {
  content: "✅";
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* Enhanced alert styling with better contrast */
.auth-dark-theme .alert {
  border-radius: 8px;
  border: 2px solid;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

.auth-dark-theme .alert-success {
  background: var(--auth-success-bg-aa);
  color: var(--auth-success-aa);
  border-color: rgba(110, 231, 183, 0.4);
}

.auth-dark-theme .alert-danger {
  background: var(--auth-error-bg-aa);
  color: var(--auth-error-aa);
  border-color: rgba(252, 165, 165, 0.4);
}

.auth-dark-theme .alert-warning {
  background: var(--auth-warning-bg-aa);
  color: var(--auth-warning-aa);
  border-color: rgba(253, 224, 71, 0.4);
}

.auth-dark-theme .alert-info {
  background: rgba(52, 211, 153, 0.15);
  color: var(--auth-accent-primary-aa);
  border-color: rgba(52, 211, 153, 0.4);
}

/* Alert styling - clean design without extra icons */

/* ===== Semantic HTML Structure Enhancements ===== */

/* Ensure proper heading hierarchy */
.auth-dark-theme h1 {
  font-size: 1.875rem; /* 30px */
  margin-bottom: 1rem;
}

.auth-dark-theme h2 {
  font-size: 1.5rem; /* 24px */
  margin-bottom: 0.875rem;
}

.auth-dark-theme h3 {
  font-size: 1.25rem; /* 20px */
  margin-bottom: 0.75rem;
}

.auth-dark-theme h4 {
  font-size: 1.125rem; /* 18px */
  margin-bottom: 0.625rem;
}

.auth-dark-theme h5 {
  font-size: 1rem; /* 16px */
  margin-bottom: 0.5rem;
}

.auth-dark-theme h6 {
  font-size: 0.875rem; /* 14px */
  margin-bottom: 0.5rem;
}

/* Enhanced form labels with proper association - accessibility only */
.auth-dark-theme .form-group label {
  color: var(--auth-text-primary-aa) !important;
  /* Let original CSS handle all layout properties */
}

/* Required field indicators */
.auth-dark-theme .form-group label.required::after {
  content: " *";
  color: var(--auth-error-aa);
  font-weight: bold;
  margin-left: 2px;
}

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

/* ===== Enhanced Form Controls for Accessibility ===== */

/* Accessibility-only form control enhancements - preserve all existing layout */
.auth-dark-theme .form-control {
  /* Only override accessibility-specific properties */
  border-color: var(--auth-border-aa) !important;
  color: var(--auth-text-primary-aa) !important;
  /* Let the original auth-dark-theme.css handle all layout properties */
}

/* Preserve existing hover styling from auth-dark-theme.css */
.auth-dark-theme .form-control:hover {
  border-color: var(--auth-border-aa) !important;
}

/* Preserve existing form control layout - only enhance accessibility */

/* Let buttons inherit their width from the original theme */

.auth-dark-theme .form-control::placeholder {
  color: var(--auth-text-placeholder-aa);
  opacity: 1;
}

/* Enhanced checkbox and radio styling */
.auth-dark-theme .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--auth-border-aa);
  margin-top: 0.125rem;
}

.auth-dark-theme .form-check-input:checked {
  background-color: var(--auth-accent-primary-aa);
  border-color: var(--auth-accent-primary-aa);
}

.auth-dark-theme .form-check-label {
  color: var(--auth-text-secondary-aa);
  font-weight: 400;
  margin-left: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
}

/* ===== Enhanced Button Accessibility ===== */

/* Enhanced button accessibility - preserve existing styling */
.auth-dark-theme .btn {
  min-height: 44px !important; /* Minimum touch target size for accessibility */
  /* All other styling inherited from auth-dark-theme.css */
}

.auth-dark-theme .btn-primary {
  background: linear-gradient(135deg, var(--auth-accent-primary-aa) 0%, var(--auth-accent-hover-aa) 100%);
  color: #000000; /* High contrast text on green background */
  border-color: var(--auth-accent-primary-aa);
}

.auth-dark-theme .btn-primary:hover {
  background: linear-gradient(135deg, var(--auth-accent-hover-aa) 0%, #059669 100%);
  color: #000000;
  transform: translateY(-1px);
}

.auth-dark-theme .btn-primary:active {
  transform: translateY(0);
}

.auth-dark-theme .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--auth-text-primary-aa);
  border-color: var(--auth-border-aa);
}

.auth-dark-theme .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--auth-text-primary-aa);
  border-color: var(--auth-accent-primary-aa);
}

/* Disabled button states */
.auth-dark-theme .btn:disabled,
.auth-dark-theme .btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

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

@media (prefers-contrast: high) {
  :root {
    --auth-text-primary-aa: #ffffff;
    --auth-text-secondary-aa: #ffffff;
    --auth-text-muted-aa: #e5e7eb;
    --auth-border-aa: rgba(255, 255, 255, 0.6);
    --auth-accent-primary-aa: #00ff00; /* Pure green for maximum contrast */
    --auth-error-aa: #ff0000; /* Pure red for maximum contrast */
    --auth-success-aa: #00ff00; /* Pure green for maximum contrast */
    --auth-warning-aa: #ffff00; /* Pure yellow for maximum contrast */
  }

  .auth-dark-theme .form-control {
    border-width: 3px;
    background: rgba(255, 255, 255, 0.15);
  }

  .auth-dark-theme .btn {
    border-width: 3px;
  }

  .auth-dark-theme *:focus {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .auth-dark-theme * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .auth-dark-theme .btn:hover {
    transform: none;
  }

  .auth-dark-theme .form-control:hover {
    transform: none;
  }
}

/* ===== Mobile Accessibility Enhancements ===== */

@media (max-width: 767.98px) {
  /* Larger touch targets for mobile */
  .auth-dark-theme .btn {
    min-height: 48px;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }

  .auth-dark-theme .form-control {
    min-height: 48px;
    padding: 1rem;
    font-size: 1.1rem;
  }

  .auth-dark-theme .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
  }

  .auth-dark-theme .form-check-label {
    font-size: 1.1rem;
    margin-left: 1rem;
  }

  /* Enhanced focus indicators for mobile */
  .auth-dark-theme *:focus {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* ===== Screen Reader Enhancements ===== */

/* Announce form errors to screen readers */
.auth-dark-theme .invalid-feedback[role="alert"] {
  /* Already has role="alert" for screen reader announcement */
}

/* Loading state announcements */
.auth-loading-announcement {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form submission feedback */
.auth-form-status {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Keyboard Navigation Enhancements ===== */

/* Tab order improvements */
.auth-dark-theme .form-control,
.auth-dark-theme .btn,
.auth-dark-theme .form-check-input,
.auth-dark-theme a {
  position: relative;
}

/* Focus trap for modal-like forms */
.auth-form-container {
  position: relative;
}

/* Enhanced focus visibility for all interactive elements */
.auth-dark-theme button:focus,
.auth-dark-theme input:focus,
.auth-dark-theme select:focus,
.auth-dark-theme textarea:focus,
.auth-dark-theme a:focus {
  z-index: 10;
  position: relative;
}

/* ===== Color Blind Accessibility ===== */

/* Use patterns and shapes in addition to color for important information */
.auth-dark-theme .alert-success {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2334d399' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1rem;
  padding-left: 3rem;
}

.auth-dark-theme .alert-danger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fca5a5' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill='%23fca5a5' d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1rem;
  padding-left: 3rem;
}

.auth-dark-theme .alert-warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fde047' d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath fill='%23fde047' d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0L8.55 8.5a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1rem;
  padding-left: 3rem;
}

/* ===== Print Accessibility ===== */

@media print {
  .auth-dark-theme {
    background: white !important;
    color: black !important;
  }

  .auth-dark-theme .form-control,
  .auth-dark-theme .btn,
  .auth-dark-theme .alert {
    background: white !important;
    color: black !important;
    border-color: black !important;
  }

  .auth-dark-theme .invalid-feedback,
  .auth-dark-theme .valid-feedback {
    background: white !important;
    color: black !important;
    border: 2px solid black !important;
  }
}

/* ===== Language and Direction Support ===== */

/* RTL language support */
[dir="rtl"] .auth-dark-theme .form-check-label {
  margin-left: 0;
  margin-right: 0.75rem;
}

[dir="rtl"] .auth-dark-theme .invalid-feedback::before,
[dir="rtl"] .auth-dark-theme .valid-feedback::before {
  margin-right: 0;
  margin-left: 0.5rem;
}



/* ===== Performance Optimizations for Accessibility ===== */

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .auth-dark-theme .form-control,
  .auth-dark-theme .btn,
  .auth-dark-theme a {
    transition: none;
  }
}

/* Optimize for users with limited bandwidth */
@media (prefers-reduced-data: reduce) {
  .auth-dark-theme .alert-success,
  .auth-dark-theme .alert-danger,
  .auth-dark-theme .alert-warning {
    background-image: none;
    padding-left: 1.25rem;
  }
}