/*
 * Sichtbarer Fokus in Verwaltung und Plattform, wie in der App: 3 px Oliv mit 2 px Abstand.
 * Filaments eigene Ringe sind halbtransparent (Knopf „Anmelden“ 2,12:1 auf Weiß, gemessen am
 * 20.10.2026), Menüeinträge und Reiter ändern beim Fokus nur die Fläche. Die Regeln stehen
 * bewusst in keiner Kaskadenebene: Filaments Stile liegen in @layer, also gewinnen diese hier
 * ohne !important.
 */
:root {
  --fm-fokus: var(--primary-600);
}

/* Im Dunkelmodus das helle Oliv, das dunkle hätte dort keine 3:1. */
:root.dark {
  --fm-fokus: var(--primary-300);
}

:where(a, button, summary, [tabindex]:not([tabindex='-1']), input[type='checkbox'], input[type='radio']):focus-visible {
  outline: 3px solid var(--fm-fokus);
  outline-offset: 2px;
}

/* Der Logo-Link ist bei Filament inline und enthält einen Block. Chrome malt den Umriss dann um
   die leeren Inline-Teile, man sieht ihn nicht. Als Block bekommt er einen Rahmen, das Logo
   bleibt, wo es ist. */
.fi-sidebar-header-logo-ctn > a {
  display: block;
}

/* Textfelder zeigen den Fokus an ihrer Umrandung. Hell ist die schon dunkel genug, im
   Dunkelmodus nimmt Filament primary-500, das sind auf Dunkelgrau nur rund 3:1. */
:root.dark .fi-input-wrp:not(.fi-disabled):not(.fi-invalid):not(:has(.fi-ac-action:focus)):focus-within {
  --tw-ring-color: var(--fm-fokus);
}

/* Unter 64rem, also auch bei 200 % Zoom am Laptop, schiebt Filament die zugeklappte Seitenleiste
   nur aus dem Bild. Ihre Links blieben Tab-Halte, die niemand sieht (bei 390 px fünf Halte links
   außerhalb, gemessen am 20.10.2026). Unsichtbar fallen sie aus der Tab-Folge, und zwar erst
   nach dem Zuschieben, damit die Bewegung bleibt. */
@media (width < 64rem) {
  .fi-sidebar:not(.fi-sidebar-open) {
    visibility: hidden;
    transition:
      translate var(--default-transition-duration) var(--default-transition-timing-function),
      visibility 0s linear var(--default-transition-duration);
  }
}