/* Shared Accessibility Standards - WCAG 2.1 AA Compliant */
/* This file ensures consistent accessibility features across both Laravel and Vue/Inertia applications */

/* ============================================================================
   WCAG 2.1 AA CONTRAST RATIOS
   ============================================================================ */

/* Enhanced contrast ratios for better accessibility */
:root {
  /* WCAG AA Compliant Text Colors (4.5:1 minimum for normal text, 3:1 for large text) */
  --a11y-text-primary: #111827;        /* 18.7:1 contrast on white */
  --a11y-text-secondary: #374151;      /* 12.6:1 contrast on white */
  --a11y-text-muted: #4b5563;          /* 9.2:1 contrast on white */
  --a11y-text-light: #6b7280;          /* 6.4:1 contrast on white */
  --a11y-text-inverse: #ffffff;        /* 21:1 contrast on dark backgrounds */
  
  /* WCAG AA Compliant Background Colors */
  --a11y-bg-primary: #ffffff;
  --a11y-bg-secondary: #f9fafb;        /* Subtle background with maintained contrast */
  --a11y-bg-light: #f3f4f6;            /* Light background maintaining text contrast */
  --a11y-bg-dark: #e5e7eb;             /* Darker background for contrast */
  
  /* WCAG AA Compliant Interactive Colors */
  --a11y-primary: #1d4ed8;             /* Enhanced primary for better contrast */
  --a11y-primary-hover: #1e40af;       /* Darker hover state */
  --a11y-primary-focus: #2563eb;       /* Focus state with proper contrast */
  --a11y-primary-active: #1e3a8a;      /* Active state */
  
  /* WCAG AA Compliant Status Colors */
  --a11y-success: #047857;             /* Dark green for better contrast */
  --a11y-success-bg: #ecfdf5;          /* Light green background */
  --a11y-warning: #92400e;             /* Dark amber for better contrast */
  --a11y-warning-bg: #fffbeb;          /* Light amber background */
  --a11y-error: #991b1b;               /* Dark red for better contrast */
  --a11y-error-bg: #fef2f2;            /* Light red background */
  --a11y-info: #1e40af;                /* Dark blue for better contrast */
  --a11y-info-bg: #eff6ff;             /* Light blue background */
  
  /* WCAG AA Compliant Border Colors */
  --a11y-border-light: #d1d5db;        /* Light border maintaining contrast */
  --a11y-border-medium: #9ca3af;       /* Medium border */
  --a11y-border-dark: #6b7280;         /* Dark border for high contrast */
  --a11y-border-focus: #2563eb;        /* Focus border with high contrast */
}

/* Dark Mode WCAG AA Compliant Colors */
[data-theme="dark"] {
  /* Dark mode text colors with enhanced contrast */
  --a11y-text-primary: #f9fafb;        /* 18.7:1 contrast on dark */
  --a11y-text-secondary: #e5e7eb;      /* 14.9:1 contrast on dark */
  --a11y-text-muted: #d1d5db;          /* 11.6:1 contrast on dark */
  --a11y-text-light: #9ca3af;          /* 6.4:1 contrast on dark */
  --a11y-text-inverse: #111827;        /* For light backgrounds */
  
  /* Dark mode backgrounds */
  --a11y-bg-primary: #0f172a;          /* Very dark slate */
  --a11y-bg-secondary: #1e293b;        /* Dark slate */
  --a11y-bg-light: #334155;            /* Medium slate */
  --a11y-bg-dark: #475569;             /* Light slate */
  
  /* Dark mode interactive colors */
  --a11y-primary: #60a5fa;             /* Lighter blue for dark backgrounds */
  --a11y-primary-hover: #3b82f6;       /* Standard blue */
  --a11y-primary-focus: #93c5fd;       /* Light blue for focus */
  --a11y-primary-active: #2563eb;      /* Active state */
  
  /* Dark mode status colors */
  --a11y-success: #34d399;             /* Light green for dark backgrounds */
  --a11y-success-bg: #064e3b;          /* Dark green background */
  --a11y-warning: #fbbf24;             /* Light yellow for dark backgrounds */
  --a11y-warning-bg: #451a03;          /* Dark yellow background */
  --a11y-error: #f87171;               /* Light red for dark backgrounds */
  --a11y-error-bg: #7f1d1d;            /* Dark red background */
  --a11y-info: #60a5fa;                /* Light blue for dark backgrounds */
  --a11y-info-bg: #1e3a8a;             /* Dark blue background */
  
  /* Dark mode borders */
  --a11y-border-light: #334155;
  --a11y-border-medium: #475569;
  --a11y-border-dark: #64748b;
  --a11y-border-focus: #60a5fa;
}

/* System theme detection for accessibility colors */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --a11y-text-primary: #f9fafb;
    --a11y-text-secondary: #e5e7eb;
    --a11y-text-muted: #d1d5db;
    --a11y-text-light: #9ca3af;
    --a11y-text-inverse: #111827;
    
    --a11y-bg-primary: #0f172a;
    --a11y-bg-secondary: #1e293b;
    --a11y-bg-light: #334155;
    --a11y-bg-dark: #475569;
    
    --a11y-primary: #60a5fa;
    --a11y-primary-hover: #3b82f6;
    --a11y-primary-focus: #93c5fd;
    --a11y-border-focus: #60a5fa;
  }
}

/* ============================================================================
   CONSISTENT FOCUS INDICATORS
   ============================================================================ */

/* Enhanced focus ring system */
:root {
  /* Focus ring properties */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--a11y-border-focus);
  --focus-ring-style: solid;
  --focus-ring-opacity: 1;
  
  /* Focus ring for different contexts */
  --focus-ring-primary: var(--a11y-primary-focus);
  --focus-ring-error: var(--a11y-error);
  --focus-ring-success: var(--a11y-success);
  --focus-ring-warning: var(--a11y-warning);
  
  /* Focus background for better visibility */
  --focus-bg-alpha: 0.1;
}

/* Base focus styles - applied to all interactive elements */
.a11y-focus,
button,
input,
textarea,
select,
a,
[tabindex]:not([tabindex="-1"]),
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"] {
  /* Remove default browser focus outline */
  outline: none;
  
  /* Add consistent focus ring */
  position: relative;
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

/* Focus-visible for keyboard navigation */
.a11y-focus:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(var(--primary-rgb), var(--focus-bg-alpha));
}

/* Focus styles for different button types */
.button-primary:focus-visible {
  outline-color: var(--focus-ring-primary);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(var(--primary-rgb), 0.2);
}

.button-success:focus-visible {
  outline-color: var(--focus-ring-success);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(4, 120, 87, 0.2);
}

.button-warning:focus-visible {
  outline-color: var(--focus-ring-warning);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(146, 64, 14, 0.2);
}

.button-error:focus-visible,
.button-danger:focus-visible {
  outline-color: var(--focus-ring-error);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(153, 27, 27, 0.2);
}

/* Form input focus styles */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--a11y-border-focus);
  outline-color: var(--focus-ring-primary);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(var(--primary-rgb), 0.15);
}

/* Error state focus */
input.error:focus-visible,
textarea.error:focus-visible,
select.error:focus-visible,
.form-error input:focus-visible,
.form-error textarea:focus-visible,
.form-error select:focus-visible {
  border-color: var(--a11y-error);
  outline-color: var(--focus-ring-error);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(153, 27, 27, 0.15);
}

/* Link focus styles */
a:focus-visible {
  outline-color: var(--focus-ring-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--a11y-bg-primary);
  color: var(--a11y-text-primary);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid var(--a11y-border-dark);
  z-index: var(--z-tooltip);
  font-weight: var(--font-weight-medium);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Focus trap for modals and dialogs */
.focus-trap {
  position: relative;
}

.focus-trap::before,
.focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   REDUCED MOTION PREFERENCES
   ============================================================================ */

/* Enhanced reduced motion support */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable specific animations */
  .animate-spin,
  .animate-pulse,
  .animate-bounce,
  .animate-fadeIn,
  .animate-slideInUp,
  .vue-fade-in,
  .vue-slide-up,
  .vue-scale-in {
    animation: none !important;
  }
  
  /* Disable transform animations */
  .transition-transform,
  .theme-transition-enter-active,
  .theme-transition-leave-active,
  .router-transition-enter-active,
  .router-transition-leave-active {
    transition: none !important;
    transform: none !important;
  }
  
  /* Keep essential focus transitions but make them instant */
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    transition: box-shadow 0.01ms, outline 0.01ms !important;
  }
  
  /* Disable parallax and scroll-based animations */
  .parallax,
  .scroll-animate {
    transform: none !important;
  }
}

/* ============================================================================
   HIGH CONTRAST MODE SUPPORT
   ============================================================================ */

/* Enhanced high contrast mode support */
@media (prefers-contrast: high), (prefers-contrast: more) {
  :root {
    /* High contrast colors */
    --a11y-text-primary: #000000;
    --a11y-text-secondary: #000000;
    --a11y-text-muted: #000000;
    --a11y-bg-primary: #ffffff;
    --a11y-bg-secondary: #ffffff;
    --a11y-border-light: #000000;
    --a11y-border-medium: #000000;
    --a11y-border-dark: #000000;
    --focus-ring-color: #000000;
    --focus-ring-width: 3px;
  }
  
  [data-theme="dark"] {
    --a11y-text-primary: #ffffff;
    --a11y-text-secondary: #ffffff;
    --a11y-text-muted: #ffffff;
    --a11y-bg-primary: #000000;
    --a11y-bg-secondary: #000000;
    --a11y-border-light: #ffffff;
    --a11y-border-medium: #ffffff;
    --a11y-border-dark: #ffffff;
    --focus-ring-color: #ffffff;
  }
  
  /* Enhanced borders for high contrast */
  button,
  input,
  textarea,
  select,
  .card,
  .modal,
  .dropdown {
    border: 2px solid var(--a11y-border-dark) !important;
  }
  
  /* Enhanced focus indicators for high contrast */
  *:focus-visible {
    outline-width: 3px !important;
    outline-style: solid !important;
    outline-color: var(--focus-ring-color) !important;
  }
}

/* ============================================================================
   SCREEN READER AND ASSISTIVE TECHNOLOGY SUPPORT
   ============================================================================ */

/* Screen reader only content */
.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;
}

/* Screen reader only content that becomes visible on focus */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* Live regions for dynamic content */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Accessible loading states */
.loading[aria-busy="true"] {
  position: relative;
}

.loading[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--primary-rgb), 0.1);
  pointer-events: none;
}

/* ============================================================================
   KEYBOARD NAVIGATION ENHANCEMENTS
   ============================================================================ */

/* Enhanced keyboard navigation */
.keyboard-nav {
  /* Ensure all interactive elements are keyboard accessible */
}

.keyboard-nav button:disabled,
.keyboard-nav input:disabled,
.keyboard-nav textarea:disabled,
.keyboard-nav select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tab order indicators for development */
.debug-tab-order [tabindex] {
  position: relative;
}

.debug-tab-order [tabindex]::before {
  content: attr(tabindex);
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff0000;
  color: #ffffff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 9999;
}

/* ============================================================================
   UTILITY CLASSES FOR ACCESSIBILITY
   ============================================================================ */

/* Text contrast utilities */
.text-high-contrast {
  color: var(--a11y-text-primary);
}

.text-medium-contrast {
  color: var(--a11y-text-secondary);
}

.text-low-contrast {
  color: var(--a11y-text-muted);
}

/* Background contrast utilities */
.bg-high-contrast {
  background-color: var(--a11y-bg-primary);
  color: var(--a11y-text-primary);
}

.bg-medium-contrast {
  background-color: var(--a11y-bg-secondary);
  color: var(--a11y-text-primary);
}

/* Focus utilities */
.focus-ring-primary:focus-visible {
  outline-color: var(--focus-ring-primary);
}

.focus-ring-error:focus-visible {
  outline-color: var(--focus-ring-error);
}

.focus-ring-success:focus-visible {
  outline-color: var(--focus-ring-success);
}

.focus-ring-warning:focus-visible {
  outline-color: var(--focus-ring-warning);
}

/* Motion utilities */
.respect-motion-preference {
  transition: var(--transition-normal);
}

@media (prefers-reduced-motion: reduce) {
  .respect-motion-preference {
    transition: none !important;
  }
}

/* ============================================================================
   PRINT ACCESSIBILITY
   ============================================================================ */

@media print {
  /* Ensure good contrast for printing */
  * {
    color: #000000 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }
  
  /* Hide non-essential elements */
  .no-print,
  .skip-link,
  .focus-trap::before,
  .focus-trap::after {
    display: none !important;
  }
}


/* ============================================================================
   ACCESSIBILITY WIDGET — Floating Button & Panel Styles
   ============================================================================
   Pure CSS only — ZERO Bootstrap, ZERO Tailwind.
   Styles the floating ♿ widget button, expandable panel overlay,
   and all four accessibility controls (font size slider, high contrast,
   reduced motion, focus indicators toggle switches).

   Requirements: 6.2, 6.3, 6.4, 6.5, 6.11
   ============================================================================ */

/**
 * Accessibility Panel
 * Hidden overlay panel positioned fixed at bottom-right, above the widget
 * button. Slides up from the button position when toggled open.
 */
.a11y-panel {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1060;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1a1a2e);
    border: 1px solid var(--border-color, #e0e0ea);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

/**
 * Panel Open State
 * Applied via JS when the widget button is clicked.
 */
.a11y-panel.a11y-panel-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/**
 * Panel Header
 * Gradient header bar with title and close button.
 */
.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--secondary, #8B7EC8), #7B6EB8);
    border-radius: 16px 16px 0 0;
    color: #ffffff;
}

/**
 * Panel Title
 * Accessibility heading inside the panel header.
 */
.a11y-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
}

/**
 * Panel Close Button
 * Minimal icon button in the panel header to dismiss the panel.
 */
.a11y-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.a11y-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.a11y-panel-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/**
 * Panel Body
 * Container for all four accessibility control groups.
 */
.a11y-panel-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/**
 * Control Group
 * Wrapper for each individual accessibility control (label + input).
 */
.a11y-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/**
 * Control Label (for range slider)
 * Horizontal layout with icon, text, and current value display.
 */
.a11y-control-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color, #1a1a2e);
    cursor: pointer;
}

/**
 * Font Size Value Badge
 * Displays the current font size value next to the slider label.
 */
.a11y-font-size-value {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary, #8B7EC8);
    background: var(--secondary-bg, #f0f0f5);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 42px;
    text-align: center;
}

/**
 * Range Slider — Font Size Control
 * Custom-styled range input for adjusting base font size (12px–24px).
 * Uses CSS custom properties for theme-aware track and thumb colors.
 */
.a11y-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #e0e0ea);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

/** Range slider track — WebKit browsers */
.a11y-range-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #e0e0ea);
}

/** Range slider thumb — WebKit browsers */
.a11y-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary, #8B7EC8), #7B6EB8);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-top: -7px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.a11y-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/** Range slider thumb — Firefox */
.a11y-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary, #8B7EC8), #7B6EB8);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.a11y-range-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/** Range slider track — Firefox */
.a11y-range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #e0e0ea);
    border: none;
}

/** Range slider focus state */
.a11y-range-slider:focus {
    outline: 2px solid var(--secondary, #8B7EC8);
    outline-offset: 4px;
    border-radius: 3px;
}

/**
 * Toggle Label (for checkbox switches)
 * Horizontal layout with icon and text, used for high contrast,
 * reduced motion, and focus indicators toggles.
 */
.a11y-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color, #1a1a2e);
    cursor: pointer;
}

/**
 * Toggle Switch Container
 * Wraps the hidden checkbox input and the visible track/thumb.
 */
.a11y-toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
}

/**
 * Toggle Input (hidden)
 * The actual checkbox is visually hidden but remains accessible
 * to screen readers and keyboard navigation.
 */
.a11y-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * Toggle Track
 * The visible pill-shaped track that the thumb slides along.
 */
.a11y-toggle-track {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--border-color, #d0d0da);
    cursor: pointer;
    transition: background 0.25s ease;
}

/**
 * Toggle Thumb
 * The circular indicator that slides left/right within the track.
 */
.a11y-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

/** Toggle checked state — track turns accent color */
.a11y-toggle-input:checked + .a11y-toggle-track {
    background: linear-gradient(135deg, var(--secondary, #8B7EC8), #7B6EB8);
}

/** Toggle checked state — thumb slides to the right */
.a11y-toggle-input:checked + .a11y-toggle-track .a11y-toggle-thumb {
    transform: translateX(20px);
}

/** Toggle focus state — visible ring around the track */
.a11y-toggle-input:focus + .a11y-toggle-track {
    outline: 2px solid var(--secondary, #8B7EC8);
    outline-offset: 2px;
}

/** Toggle hover state — subtle track highlight */
.a11y-toggle-track:hover {
    background: var(--text-muted, #8a8a9a);
}

.a11y-toggle-input:checked + .a11y-toggle-track:hover {
    background: linear-gradient(135deg, #7B6EB8, #6B5EA8);
}

/* ============================================================================
   DARK THEME OVERRIDES — Accessibility Panel
   ============================================================================ */

[data-theme="dark"] .a11y-panel {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .a11y-font-size-value {
    background: var(--secondary-bg, #16162a);
}

/* ============================================================================
   HIGH CONTRAST MODE — data-high-contrast attribute on <html>
   ============================================================================
   When active, applies dark background, light text, and yellow accents
   for links and focus indicators across the entire page.

   Requirements: 6.3
   ============================================================================ */

[data-high-contrast] {
    --body-bg: #000000 !important;
    --text-color: #ffffff !important;
    --text-muted: #e0e0e0 !important;
    --border-color: #ffffff !important;
    --card-bg: #1a1a1a !important;
    --sidebar-bg: #0a0a0a !important;
    --sidebar-text: #ffffff !important;
    --secondary-bg: #111111 !important;
    --tertiary-bg: #0a0a0a !important;
    --input-bg: #1a1a1a !important;
    --input-border: #ffffff !important;
    --input-focus-border: #ffdd00 !important;
}

[data-high-contrast] body {
    background: #000000 !important;
    color: #ffffff !important;
}

/** High contrast — yellow accents for links */
[data-high-contrast] a,
[data-high-contrast] a:visited {
    color: #ffdd00 !important;
    text-decoration: underline !important;
}

[data-high-contrast] a:hover,
[data-high-contrast] a:focus {
    color: #ffff44 !important;
}

/** High contrast — yellow focus outlines */
[data-high-contrast] *:focus {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
}

/** High contrast — enhanced borders on interactive elements */
[data-high-contrast] button,
[data-high-contrast] input,
[data-high-contrast] textarea,
[data-high-contrast] select {
    border: 2px solid #ffffff !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/** High contrast — panel overrides */
[data-high-contrast] .a11y-panel {
    border: 2px solid #ffffff !important;
    background: #1a1a1a !important;
}

[data-high-contrast] .a11y-panel-header {
    background: #333333 !important;
    border-bottom: 2px solid #ffffff !important;
}

[data-high-contrast] .a11y-control-label,
[data-high-contrast] .a11y-toggle-label {
    color: #ffffff !important;
}

[data-high-contrast] .a11y-font-size-value {
    color: #ffdd00 !important;
    background: #333333 !important;
}

/* ============================================================================
   REDUCED MOTION MODE — data-reduced-motion attribute on <html>
   ============================================================================
   When active, disables all CSS animations and transitions globally.

   Requirements: 6.4
   ============================================================================ */

[data-reduced-motion] *,
[data-reduced-motion] *::before,
[data-reduced-motion] *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/* ============================================================================
   FOCUS INDICATORS MODE — data-focus-indicators attribute on <html>
   ============================================================================
   When active, adds a visible 3px outline to all focused elements
   using the primary accent color.

   Requirements: 6.5
   ============================================================================ */

[data-focus-indicators] *:focus {
    outline: 3px solid var(--primary, #D4A574) !important;
    outline-offset: 2px !important;
}

/* ============================================================================
   RESPONSIVE — Accessibility Panel on Small Screens
   ============================================================================ */

@media (max-width: 480px) {
    .a11y-panel {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 80px;
    }
}