/* ClipVault — Common UI augmentation layer
 *
 * Wird NACH den Inline-<style>-Blöcken jeder Seite und vor vendor/responsive.css
 * geladen. Setzt nur dort an, wo bestehende Styles unzureichend sind:
 *
 *  1. Radius-Skalierung (--r-sm/-md/-lg)
 *  2. Verbesserter Muted-Kontrast (WCAG AA)
 *  3. Globaler :focus-visible Ring (Keyboard-Navigation)
 *  4. Form-Komponenten States (error/disabled)
 *  5. Touch-Targets ≥ 44×44px für interaktive Elemente
 *  6. prefers-reduced-motion Fallback
 *  7. ARIA-versteckte Elemente sicher ausblenden
 */

/* ── 1. Radius-Tokens (zusätzlich zu bestehendem --radius) ──────────────── */
:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* 2. Kontrast: --muted von #6b6b75 auf #8a8a95 (~4.6:1 auf #0d0d0f) */
  --muted: #8a8a95;
}

/* ── 3. Focus-Ring (Keyboard-Navigation) ────────────────────────────────── */
*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent, #e8f44a);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Inputs behalten zusätzlich den existierenden border-glow, aber mit
   sichtbarerem Outline für Tastatur-User */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
}

/* ── 4. Form-Komponenten States ─────────────────────────────────────────── */
.form-input,
input.form-input,
textarea.form-input,
select.form-input {
  width: 100%;
  background: var(--bg, #0d0d0f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--text, #f0efe8);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input[aria-invalid="true"],
.form-input.is-error,
input.is-error,
textarea.is-error,
select.is-error {
  border-color: var(--error, #ff5e57) !important;
  box-shadow: 0 0 0 3px rgba(255,94,87,0.18) !important;
}

.form-input:disabled,
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Placeholder-Kontrast vereinheitlichen */
::placeholder { color: var(--muted); opacity: 1; }

/* ── 5. Touch-Targets ≥ 44px für bekannte zu kleine Controls ────────────── */
@media (hover: none), (pointer: coarse) {
  .play-btn,
  .dl-btn,
  .period-picker button,
  .es-filter-tab,
  .pager-btn,
  .step-num,
  .toggle-switch {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 6. Reduced-Motion Fallback ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Spezifische Klassen, die typische Pulse/Spin-Animationen nutzen */
  .ffmpeg-dot,
  .spinner,
  .loader,
  .pulse,
  .glow,
  body::after { animation: none !important; }
}

/* ── 7. Rolle-versteckte Navigation: für Screenreader unsichtbar ────────── */
[data-nav-role][hidden],
[data-nav-role][aria-hidden="true"],
[data-role-hidden="true"] {
  display: none !important;
}

/* ── 8. Konsistente Badge-Kontraste ─────────────────────────────────────── */
.badge,
[class*="badge-"] {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── 9. Error/Success-Live-Regions visuell konsistent ───────────────────── */
[aria-live] {
  /* keine visuelle Änderung, nur als semantischer Marker */
}

/* ── 10. Skip-Link für Keyboard-User (kann pro Seite genutzt werden) ────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── 11. Icon-only Buttons (für Tabellen-Aktionen) ──────────────────────── */
.btn-icon-only {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border, #2a2a30);
  color: var(--text, #f0efe8);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-icon-only:hover {
  background: var(--surface2, #1e1e24);
  border-color: var(--muted, #8a8a95);
}
.btn-icon-only.is-danger {
  border-color: rgba(255,94,87,0.35);
  color: var(--error, #ff5e57);
}
.btn-icon-only.is-danger:hover {
  background: rgba(255,94,87,0.08);
  border-color: var(--error, #ff5e57);
}