/* Review remediation overrides. Keep this file small and remove rules only after
   they have been absorbed into the main design system with equivalent tests. */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brand-deep);
}

.chat-tabs a,
.recipient-picks label {
  min-height: var(--touch, 3rem);
  display: inline-flex;
  align-items: center;
}

.recipient-picks label {
  gap: .55rem;
  padding: .35rem .2rem;
  cursor: pointer;
}

.recipient-picks input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
}

/* Touch-Ziele (Audit 2026-10-22: Handy, Tablet, 14″-Pi, 22″-Monitor).
   Felder und Knöpfe mindestens 44 px; kleine Text-Links bekommen eine
   größere Trefferfläche, ohne das Layout zu verschieben. */
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main select {
  min-height: 2.75rem;
}

main select {
  max-width: 100%;
}

main input[type="checkbox"],
main input[type="radio"] {
  width: 1.35rem;
  height: 1.35rem;
}

/* Die ganze Zeile mit Kästchen ist die Trefferfläche. */
main label:has(> input[type="checkbox"]),
main label:has(> input[type="radio"]) {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}

.account-link,
main td a:not(.button),
main th a:not(.button),
main .module-row a:not(.button),
main .list-row a:not(.button) {
  display: inline-block;
  min-width: 2.75rem;
  padding-block: .65rem;
  margin-block: -.65rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

@media (max-width: 48rem) {
  .week-board {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .week-day {
    min-width: 0;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
    box-shadow: none;
  }
}

/* Emergency contrast: same black/white contract as the Flutter HighContrast themes. */
@media (prefers-contrast: more) {
  :root {
    --bg: #ffffff;
    --bg-accent: #ffffff;
    --surface: #ffffff;
    --surface-soft: #ffffff;
    --surface-raised: #ffffff;
    --text: #000000;
    --muted: #000000;
    --line: #000000;
    --line-strong: #000000;
    --brand: #000000;
    --brand-deep: #000000;
    --brand-ink: #000000;
    --accent: #000000;
    --accent-dark: #000000;
    --accent-soft: #ffffff;
    --primary-container: #ffffff;
    --on-primary: #ffffff;
    --danger: #b91c1c;
    --warning: #000000;
    --success: #000000;
    --info: #000000;
    --priority-urgent: #b91c1c;
    --priority-important: #000000;
    --priority-normal: #000000;
    --priority-done: #000000;
    --focus: #000000;
  }

  .button.primary {
    background: var(--text);
    color: var(--surface);
  }

  .button.secondary {
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--text);
  }
}