/* ============================================================
   JARVIS Accessibility Foundation — Phase 4A P0
   WCAG 2.1 AA Grundlage für alle Seiten.
   ============================================================ */

/* ============================================================
   SKIP-LINK
   Erstes fokussierbares Element auf jeder Seite.
   Standardmäßig visuell verborgen, bei Fokus sichtbar.
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4, 16px);
  z-index: var(--z-critical, 600);
  display: inline-block;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--color-action-primary, #6366f1);
  color: var(--color-action-primary-text, #ffffff);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  font-family: var(--font-family-sans, Arial, sans-serif);
  text-decoration: none;
  border-radius: var(--radius-md, 8px);
  white-space: nowrap;
}

.skip-link:focus {
  top: var(--space-4, 16px);
}

/* ============================================================
   FOCUS-RING — Systemweit einheitlich
   :focus-visible wird bevorzugt (zeigt Ring nur bei Tastatur).
   Fallback via :focus für ältere Browser.
   Kein outline:none ohne Ersatz.
   ============================================================ */
:where(
  a,
  button,
  input,
  textarea,
  select,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring, #6366f1);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm, 4px);
}

/* Focus-Ring auf Navigation und interaktiven Nicht-Standard-Elementen */
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[role="link"]:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring, #6366f1);
  outline-offset: var(--focus-ring-offset, 2px);
}

/* Bestehende nav a Elemente — sichert Focus-Ring für aktuelle Navigation */
nav a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ============================================================
   SCREENREADER-ONLY — Visuell verborgen, für Screenreader lesbar
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Sichtbar wenn fokussiert (für Focus-sichtbare SR-Links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================================
   REDUCED MOTION — Globale Regel für alle Animationen
   Animationen werden auf 0.01ms reduziert (nicht 0 — das würde
   animationsabhängige Logik beschädigen).
   ============================================================ */
@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;
  }
}

/* ============================================================
   FOCUS-MANAGEMENT HILFSKLASSEN
   Für modales Focus-Management in Phase 4B.
   ============================================================ */

/* Verhindert Tab-Navigation in inaktiven Bereichen */
.focus-trapped {
  /* Wird via JS gesteuert — Klasse ist Vorbereitung */
}

/* Sichtbarer Fokus-Indikator-Override für helle Flächen */
.focus-visible-dark :focus-visible {
  outline-color: var(--color-bg-nav, #1a1d21);
}

/* ============================================================
   ARIA-LIVE REGION — Vorbereitung für dynamische Meldungen
   ============================================================ */
[aria-live] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[aria-live]:not(:empty) {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Toast-Region darf normal fließen */
#toast-region[aria-live] {
  position: fixed;
  bottom: var(--space-4, 16px);
  right: var(--space-4, 16px);
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: var(--z-toast, 500);
}

/* ============================================================
   A11Y-ERWEITERUNGEN — UX-Iteration 7
   Tastaturnavigation, aria-current, Kontrast-Verstärkung.
   ============================================================ */

/* Verstärkter Fokus-Ring nur bei Tastaturnavigation */
.jv-keyboard-nav :focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}

/* aria-current Seiten-Link — visuell hervorheben */
.nav-link[aria-current="page"] {
  background: var(--color-nav-active-bg, rgba(99,102,241,.14)) !important;
  color: var(--color-nav-active-text, #6366f1) !important;
  font-weight: 600;
}

/* Announcer-Region für Screenreader — nie sichtbar */
#jv-a11y-announcer {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* Tabellen: Fokus-Markierung für Tabellenzeilen */
tbody tr:focus-within {
  outline: 2px solid var(--color-focus-ring, #6366f1);
  outline-offset: -2px;
}

/* Mindest-Klickfläche für interaktive Elemente (Touch-Targets) */
button, [role="button"], a.btn {
  min-height: 44px;
  min-width: 44px;
}

/* Ausnahme: Icon-Buttons in Topbar können kleiner sein */
.topbar-theme-btn,
.topbar-menu-btn,
.topbar-logout {
  min-height: 36px;
  min-width: 36px;
}