/**
 * TaskTumbler - Accessibility Styles
 *
 * Comprehensive accessibility enhancements following WCAG 2.1 Level AA guidelines
 * Includes focus management, screen reader support, keyboard navigation, and more
 */

/* ===== GLOBAL FOCUS INDICATORS ===== */

/* Primary focus style for all interactive elements */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Ensure all interactive elements have visible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast focus for primary actions */
.f-btn:focus-visible,
.settings-btn-primary:focus-visible,
[data-primary="true"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb, 255, 107, 53), 0.2);
}

/* ===== SCREEN READER ONLY CONTENT ===== */

.sr-only,
.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;
}

/* Focusable screen reader only content (e.g., skip links) */
.sr-only-focusable:not(:focus):not(:active) {
  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 NAVIGATION LINK ===== */

.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 0;
  z-index: 99999;
  transition: top 0.2s ease;
}

.skip-to-main:focus {
  top: 0;
  outline: 3px solid var(--primary-hover);
  outline-offset: 2px;
}

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

@media (prefers-contrast: high) {
  :root {
    --border: #ffffff;
    --border-light: #cccccc;
  }

  button,
  a,
  input,
  select,
  textarea,
  [role="button"] {
    border: 2px solid currentColor !important;
  }

  *:focus-visible {
    outline-width: 3px !important;
    outline-offset: 3px !important;
  }

  .settings-btn-outline,
  .f-btn-outline {
    border-width: 3px !important;
  }
}

/* Manual high contrast mode toggle */
body[data-high-contrast="true"] {
  --text: #ffffff !important;
  --text-light: #e0e0e0 !important;
  --bg: #000000 !important;
  --card: #1a1a1a !important;
  --input-bg: #2a2a2a !important;
  --border: #ffffff !important;
  --border-light: #cccccc !important;
}

body[data-high-contrast="true"] a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body[data-high-contrast="true"] button,
body[data-high-contrast="true"] input,
body[data-high-contrast="true"] select,
body[data-high-contrast="true"] textarea {
  border: 2px solid currentColor !important;
}

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

  /* Disable all transforms */
  * {
    transform: none !important;
  }
}

/* User preference: Reduced motion setting */
body[data-reduced-motion="true"] *,
body[data-reduced-motion="true"] *::before,
body[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
  transform: none !important;
}

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

/* Improve keyboard navigation for task lists */
.task-item:focus-within,
[data-task-item]:focus-within {
  background: rgba(var(--primary-rgb, 255, 107, 53), 0.05);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 255, 107, 53), 0.3);
}

/* Navigation links should have clear focus */
nav a:focus-visible,
.nav-item:focus-visible,
[role="navigation"] a:focus-visible {
  background: rgba(var(--primary-rgb, 255, 107, 53), 0.15);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Modal focus trap enhancement */
[role="dialog"]:focus,
[role="alertdialog"]:focus {
  outline: none;
}

[role="dialog"] *:focus-visible,
[role="alertdialog"] *:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== TOUCH TARGET SIZES (WCAG 2.5.5) ===== */

/* Ensure minimum 44x44px touch targets on touch devices */
@media (pointer: coarse) {
  button:not(.icon-only),
  a:not(.icon-only),
  input[type="button"],
  input[type="submit"],
  input[type="checkbox"],
  input[type="radio"],
  [role="button"],
  [role="tab"],
  [role="switch"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  /* Icon buttons need touch padding */
  .icon-only {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
}

/* ===== COMPONENT-SPECIFIC FOCUS STYLES ===== */

/* Task checkboxes */
.task-check:focus-visible,
input[type="checkbox"]:focus-visible,
[role="checkbox"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 255, 107, 53), 0.2);
}

/* Form inputs */
.f-input:focus-visible,
.f-textarea:focus-visible,
.f-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 107, 53), 0.15);
}

/* Toggle switches */
.settings-toggle:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb, 255, 107, 53), 0.2);
}

/* Cards and interactive containers */
.task-card:focus-within,
.settings-card:focus-within {
  box-shadow: 0 0 0 2px var(--primary), 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ===== MODAL FOCUS MANAGEMENT ===== */

body.modal-open {
  overflow: hidden;
}

/* Prevent interaction with background when modal is open */
body.modal-open > *:not([role="dialog"]):not([role="alertdialog"]):not(.modal-overlay):not(script):not(style) {
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
}

/* ===== ARIA LIVE REGIONS ===== */

[role="status"],
[role="alert"],
[aria-live] {
  position: relative;
}

/* Polite announcements (hidden) */
[aria-live="polite"][aria-atomic="true"]:not([role="alert"]) {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Assertive announcements (may be visible) */
[role="alert"],
[aria-live="assertive"] {
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  background: rgba(var(--primary-rgb, 255, 107, 53), 0.1);
  font-weight: 600;
  margin: 8px 0;
}

/* ===== COLOR CONTRAST UTILITIES ===== */

.high-contrast-text {
  color: var(--text);
  background: var(--card);
  padding: 2px 4px;
  border-radius: 4px;
}

.warning-text {
  color: var(--warning, #f59e0b);
  font-weight: 600;
}

.error-text {
  color: var(--danger, #ef4444);
  font-weight: 600;
}

.success-text {
  color: var(--success, #10b981);
  font-weight: 600;
}

/* ===== KEYBOARD SHORTCUTS INDICATOR ===== */

.keyboard-shortcut {
  display: inline-block;
  padding: 2px 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: monospace;
  margin-left: 8px;
  color: var(--text-light);
}

/* ===== ACCESSIBLE TOOLTIPS ===== */

[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

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

@media print {
  /* Hide non-essential elements */
  .skip-to-main,
  [aria-hidden="true"],
  .sr-only,
  nav,
  .nav-bar,
  button:not(.print-visible) {
    display: none !important;
  }

  /* Ensure good contrast for printing */
  body {
    color: #000 !important;
    background: #fff !important;
  }

  a {
    text-decoration: underline !important;
    color: #000 !important;
  }

  /* Show URL for external links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
}

/* ===== LARGE TEXT MODE ===== */

body[data-large-text="true"] {
  font-size: 18px;
}

body[data-large-text="true"] .text-xs,
body[data-large-text="true"] .settings-label-hint {
  font-size: 14px;
}

body[data-large-text="true"] .text-sm {
  font-size: 16px;
}

body[data-large-text="true"] .text-base {
  font-size: 18px;
}

body[data-large-text="true"] .text-lg {
  font-size: 20px;
}

body[data-large-text="true"] h1 {
  font-size: 32px;
}

body[data-large-text="true"] h2 {
  font-size: 28px;
}

body[data-large-text="true"] h3 {
  font-size: 24px;
}

body[data-large-text="true"] h4 {
  font-size: 20px;
}

/* ===== FOCUS ORDER DEBUGGING (DEV MODE) ===== */

body[data-show-focus-order="true"] *:focus::before {
  content: attr(tabindex);
  position: absolute;
  top: -20px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  z-index: 10000;
}

/* ===== RESPONSIVE ACCESSIBILITY ===== */

@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  button,
  a,
  input[type="button"],
  input[type="submit"] {
    min-height: 48px;
    padding: 12px 16px;
  }

  /* Larger focus indicators on mobile */
  *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* ===== DARK MODE CONTRAST FIXES ===== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Ensure sufficient contrast in dark mode */
    --text-light: #b0b0b0;
  }
}

/* ===== FORCED COLORS MODE (Windows High Contrast) ===== */

@media (forced-colors: active) {
  * {
    border-color: CanvasText !important;
  }

  button,
  a,
  [role="button"] {
    border: 2px solid ButtonText !important;
  }

  *:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}