/* ============================================================
   PHASE 5: ACCESSIBILITY & PERFORMANCE
   WCAG AA compliance, focus management, contrast fixes,
   CSS containment, content-visibility, reduced reflows
   ============================================================ */

/* ---- 1. SKIP TO CONTENT LINK ---- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 12px 24px;
  background: var(--color-primary, #2c4a7c);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* ---- 2. COLOR CONTRAST FIXES (WCAG AA) ---- */

/* Light mode: faint text too low contrast — darken from #94a0b4 to #72809a */
:root,
[data-theme="light"] {
  --color-text-faint: #72809a;
  --color-success: #317a4e;
}

/* Dark mode: faint text too low contrast — brighten from #5c6478 to #7a849e */
[data-theme="dark"] {
  --color-text-faint: #7a849e;
}

/* Ensure status badges meet contrast */
.status-complete,
.status-verified,
[class*="status-"] {
  font-weight: 600;
}

/* Ensure placeholder text is distinguishable but not relied upon */
::placeholder {
  color: var(--color-text-muted, #5e6e82);
  opacity: 0.8;
}
[data-theme="dark"] ::placeholder {
  color: var(--color-text-muted, #8d96ab);
  opacity: 0.8;
}


/* ---- 3. FOCUS MANAGEMENT ---- */

/* Consistent, visible focus indicators */
:focus-visible {
  outline: 2px solid var(--color-primary, #2c4a7c);
  outline-offset: 2px;
}
[data-theme="dark"] :focus-visible {
  outline-color: var(--color-primary, #6b9fd4);
}

/* Remove default outline when not using keyboard (mouse/touch) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for sidebar navigation items */
.sidebar-link:focus-visible {
  outline-offset: -2px;
  border-radius: 8px;
  background: rgba(44, 74, 124, 0.08);
}
[data-theme="dark"] .sidebar-link:focus-visible {
  background: rgba(107, 159, 212, 0.1);
}

/* Focus ring for cards when tabbed to */
.card:focus-visible,
.kpi-card:focus-visible,
.score-card:focus-visible {
  outline-offset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.2);
}

/* Modal focus trap visual indicator */
.modal:focus-visible,
.modal-content:focus-visible {
  outline: none;
}

/* Focus visible on toggle switches */
.toggle-switch:focus-visible {
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.2);
  border-radius: 20px;
}

/* Bottom nav focus */
.mobile-bottom-nav button:focus-visible {
  outline-offset: -2px;
  border-radius: 8px;
}


/* ---- 4. SCREEN READER UTILITIES ---- */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Make screen reader text visible when focused (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ---- 5. ARIA LIVE REGION STYLING ---- */

/* Toast container is a live region — ensure proper styling */
[role="status"],
[role="alert"],
[aria-live] {
  /* No visual changes — these are semantic markers */
}

/* Progress bar accessibility */
[role="progressbar"] {
  position: relative;
}


/* ---- 6. PERFORMANCE — CSS CONTAINMENT ---- */

/* Contain layout recalculations to individual sections */
.section {
  contain: layout style;
}

/* Off-screen sections get content-visibility */
.section:not(.section-active) {
  content-visibility: hidden;
  contain-intrinsic-size: auto 800px;
}

/* Cards contain their layout */
.card,
.kpi-card,
.score-card {
  contain: layout style;
}

/* Sidebar containment */
.sidebar {
  contain: layout style;
}
.sidebar-nav {
  contain: layout;
}

/* Modal overlays — only paint when visible */
.modal-overlay {
  contain: layout style paint;
}
.modal-overlay:not([style*="flex"]):not(.active) {
  content-visibility: hidden;
}


/* ---- 7. PERFORMANCE — WILL-CHANGE HINTS ---- */

/* Only apply will-change during active transitions */
.sidebar.open {
  will-change: transform;
}
.modal-overlay.active .modal {
  will-change: transform, opacity;
}
.toast {
  will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.sidebar:not(.open) {
  will-change: auto;
}


/* ---- 8. PERFORMANCE — RENDERING OPTIMIZATION ---- */

/* Reduce paint complexity for large lists */
.doc-list,
.activity-list,
.action-list {
  contain: layout;
}

/* GPU-accelerate the progress circle SVG */
.progress-ring {
  transform: translateZ(0);
}

/* Optimize scrollable areas */
.main-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Prevent layout shift from icon loading */
[data-lucide] {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}


/* ---- 9. HIGH CONTRAST MODE SUPPORT ---- */
@media (forced-colors: active) {
  .btn-primary,
  .btn-secondary {
    border: 2px solid ButtonText;
  }
  .sidebar-link.active {
    border-left: 3px solid Highlight;
  }
  .toggle-switch {
    border: 1px solid ButtonText;
  }
  .toggle-switch.on {
    background: Highlight;
  }
  .card,
  .kpi-card {
    border: 1px solid CanvasText;
  }
  .progress-fill,
  [class*="-fill"] {
    background: Highlight;
  }
  :focus-visible {
    outline: 2px solid Highlight;
  }
}


/* ---- 10. PRINT STYLES ---- */
@media print {
  .sidebar,
  .mobile-bottom-nav,
  .chat-fab,
  .scroll-top-btn,
  .toast-container,
  .shortcuts-overlay,
  .top-bar,
  .progress-bar-top {
    display: none !important;
  }
  .main-content {
    margin: 0;
    padding: 20px;
    overflow: visible;
    height: auto;
  }
  .section-content:not(.section-active) {
    display: none !important;
  }
  .card,
  .kpi-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}


/* ---- 11. REDUCED MOTION (COMPREHENSIVE) ---- */
@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;
  }
}