/*
 * Gemeinsames Design der Filament-Plattformen von wurster medien. Liegt ohne Layer und geht damit vor Filament
 * (@layer components). Wird als Filament-Asset ausgeliefert (UiServiceProvider, php artisan filament:assets).
 */

/*
 * „Soft“-Buttons: leicht getönter Hintergrund mit Rahmen und Text in der Farbe statt voll gefüllt. Filament setzt die
 * Farben eines gefüllten Buttons über --bg/--text/--hover-bg, hier überschrieben. Graue Buttons bleiben weiß mit Rahmen.
 */
.fi-btn.fi-color:not(.fi-outlined) {
    --bg: color-mix(in oklab, var(--color-500) 12%, #fff);
    --text: var(--color-700);
    --hover-bg: color-mix(in oklab, var(--color-500) 20%, #fff);
    --hover-text: var(--color-800);
    --dark-bg: color-mix(in oklab, var(--color-500) 18%, transparent);
    --dark-text: var(--color-300);
    --dark-hover-bg: color-mix(in oklab, var(--color-500) 28%, transparent);
    --dark-hover-text: var(--color-200);
    --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color);
    --tw-ring-color: color-mix(in oklab, var(--color-500) 45%, transparent);
    box-shadow: var(--tw-ring-shadow);
}

/* Klick auf die Zeile (RowClick), Inhaltslinks und Knöpfe im Gruppenkopf. */
.wm-row-click {
    display: none !important;
}

.wm-row-open {
    display: inline;
    text-align: start;
    cursor: pointer;
}

.wm-row-open:hover {
    text-decoration: underline;
}

/*
 * Die ganze Zeile öffnet dasselbe Ziel wie ihr Titel (Simon, 9.11.2026: „warum nicht ganze Zeile, wie sonst?“): Tabellenzeilen
 * und Elemente mit data-wm-row, die ein .wm-row-open enthalten. Den Klick leitet wm-ui.js weiter, Knöpfe und Links behalten
 * ihr Ziel. Ohne Recht ist der Titel nur Text, dann ist auch die Zeile nicht klickbar.
 */
tr:has(> td .wm-row-open),
[data-wm-row]:has(.wm-row-open) {
    cursor: pointer;
}

tr:has(> td .wm-row-open):hover > td,
[data-wm-row]:has(.wm-row-open):hover {
    background-color: var(--gray-50);
}

:is(.dark) tr:has(> td .wm-row-open):hover > td,
:is(.dark) [data-wm-row]:has(.wm-row-open):hover {
    background-color: rgb(255 255 255 / 0.05);
}

.wm-content-link {
    color: var(--primary-600);
    font-weight: 500;
}

.wm-content-link:hover {
    text-decoration: underline;
}

.wm-content-link:where(.dark, .dark *) {
    color: var(--primary-400);
}

/* Knöpfe für den ganzen Kunden rechts im Gruppenkopf (CustomerGroup). */
.fi-ta-group-header:has(.wm-group-actions) {
    position: relative;
}

.wm-group-actions {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * Werkzeugleiste der Tabellen: Suche und Spaltenauswahl bleiben oben rechts, Sammelaktionen, „Gruppieren nach“ und
 * Filter (ToolbarFilters) stehen links und brechen bei Platzmangel um. Mit Kopfzeile höchstens zwei Zeilen.
 */
@media (min-width: 640px) {
    .fi-ta-ctn .fi-ta-header-toolbar {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .fi-ta-ctn .fi-ta-header-toolbar > .fi-ta-actions {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.75rem;
    }

    .fi-ta-ctn .fi-ta-header-toolbar > .fi-ta-actions ~ * {
        flex-shrink: 0;
    }

    .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
        width: 14rem;
    }
}

/* Beschriftungen („Kunde“, „Gruppieren nach“ …) ohne Trennstrich, damit alles in eine Zeile passt. */
.fi-ta-ctn .fi-ta-header-toolbar .fi-input-wrp-prefix:not(.fi-inline) {
    border-inline-end: 0;
    padding-inline-end: 0;
}

/*
 * Filter (ToolbarFilters): am Rechner direkt in der Leiste, die Hülle zählt für das Layout nicht. Am Handy nur der Knopf
 * „Filter“ mit der Gesamtzahl daneben, die Felder klappen darunter in voller Breite auf.
 */
.wm-filters,
.wm-filters-panel {
    display: contents;
}

.wm-filter-field {
    flex-shrink: 0;
}

.wm-filter-input {
    min-width: 7rem;
    max-width: 14rem;
}

.wm-table-count {
    order: 1;
}

.wm-toolbar-sorting {
    order: 2;
}

@media (min-width: 640px) {
    .wm-filters-toggle {
        display: none;
    }
}

@media (max-width: 639px) {
    .fi-ta-ctn .fi-ta-header-toolbar > :nth-child(2) {
        flex: 1 1 100%;
    }

    .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 1 auto;
    }

    .wm-filters-panel {
        display: none;
        order: 3;
        flex: 1 1 100%;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 0;
    }

    .wm-filters-open .wm-filters-panel {
        display: flex;
    }

    .wm-filters-panel > *,
    .wm-filters-panel .fi-dropdown-trigger,
    .wm-filters-panel .fi-dropdown-trigger > * {
        width: 100%;
    }

    .wm-filters-panel .wm-filter-input {
        width: 100%;
        max-width: none;
    }

    .wm-filters-panel .wm-toolbar-sorting > :first-child {
        flex: 1 1 auto;
    }
}

.fi-ta-header-ctn:has(> .fi-ta-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-ta-header-ctn:has(> .fi-ta-header) {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header,
.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar {
    display: contents;
}

/* Überschrift und Reiter (TabsInTableHeading) nebeneinander, am Handy scrollen die Reiter seitlich. */
.wm-ta-heading-tabs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; row-gap: 0.5rem; min-width: 0; }
.wm-ta-heading-tabs .fi-tabs { padding: 0; margin: 0; max-width: 100%; overflow-x: auto; }

@media (min-width: 640px) {
    .wm-ta-heading-tabs .fi-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Zeile 1: Überschrift (mit Reitern) links, dann Suche und Spaltenauswahl, ganz rechts die Kopfaktionen. */
/* Lange Beschreibungen und viele Reiter brechen in ihrer Spalte um, Suche und Aktionen bleiben rechts daneben. */
.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header > :not(.fi-ta-actions) {
    order: 1;
    flex: 1 1 20rem;
    min-width: 0;
    padding-block: 1rem;
}

.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :nth-child(2) {
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-block: 0.75rem;
}

.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header > .fi-ta-actions {
    order: 3;
    margin-block: 0;
    padding-block: 0.75rem;
}

/* Zeile 2: Filter, Sortierung, Gruppierung, Sammelaktionen; fehlt alles davon, entfällt die Zeile. */
.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :first-child {
    order: 4;
    flex: 0 0 calc(100% + 2rem);
    max-width: none;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    margin-inline: -1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-200);
}

.dark .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :first-child {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :first-child:not(:has(> :not([x-cloak]):not([style*="display: none"]))) {
    display: none;
}

/* Am Handy steht die Suche in voller Breite unter der Überschrift, die Aktionen darunter. */
@media (max-width: 639px) {
    .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :nth-child(2) {
        flex: 1 1 100%;
        margin-inline-start: 0;
        padding-block: 0 0.75rem;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :nth-child(2) .fi-ta-search-field {
        flex: 1 1 auto;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header > .fi-ta-actions {
        padding-block: 0 1rem;
    }
}

@media (min-width: 640px) {
    .fi-ta-header-ctn:has(> .fi-ta-header) {
        padding-inline: 1.5rem;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header) > .fi-ta-header-toolbar > :first-child {
        flex-basis: calc(100% + 3rem);
        margin-inline: -1.5rem;
        padding-inline: 1.5rem;
    }
}

/*
 * Am Handy stehen „Filter“ und Suche in einer Zeile, die Zahl der Einträge daneben, wenn sie passt, sonst darunter. Dafür
 * zählen Knopf, Zahl und Klappe direkt zur Leiste, die Klappe steht zuletzt in voller Breite.
 */
@media (max-width: 639px) {
    .fi-ta-ctn .fi-ta-header-toolbar:has(.wm-filters) {
        gap: 0.5rem 0.75rem;
    }

    .fi-ta-ctn .fi-ta-header-toolbar > :first-child:has(.wm-filters) {
        display: contents;
    }

    .fi-ta-ctn .fi-ta-header-toolbar > :first-child:has(.wm-filters) ~ :nth-child(2) {
        order: 1;
        flex: 1 1 10rem;
        min-width: 0;
        padding-block: 0;
    }

    .wm-filters .wm-table-count {
        order: 2;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header):has(.wm-filters) {
        gap: 0.5rem 0.75rem;
        padding-block-end: 0.75rem;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header):has(.wm-filters) > .fi-ta-header > :not(.fi-ta-actions) {
        order: -1;
        padding-block-end: 0.25rem;
    }

    .fi-ta-header-ctn:has(> .fi-ta-header):has(.wm-filters) > .fi-ta-header > .fi-ta-actions {
        padding-block: 0;
    }
}

/* Tabellen ohne Spaltenköpfe: „Sortieren nach“ steht in der Werkzeugleiste (ToolbarFilters), nicht über dem Inhalt. */
.fi-ta-content-header .fi-ta-sorting-settings {
    display: none;
}

.fi-ta-content-header:not(:has(.fi-ta-page-checkbox)) {
    display: none;
}

/* Kacheln (contentGrid, z. B. „Beiträge“): Aktionen in einer Zeile (MediaGallery::recordActions), das Menü
     „Mehr“ (MoreActions::forRecord) steht rechts, damit die übrigen Buttons in jeder Karte an derselben Stelle sind. */
.fi-ta-content-grid .fi-ta-actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Wo die Karten schmal sind (kurz nach dem Sprung auf 2, 3 bzw. 4 Spalten, MediaGallery), Buttons ohne Icon.
     Keine Container-Query: Mit container-type an einem Vorfahren setzt Filaments Dropdown (Floating UI) das Menü
     an die falsche Stelle. */
@media (min-width: 1024px) and (max-width: 1079px), (min-width: 1280px) and (max-width: 1399px), (min-width: 1536px) and (max-width: 1759px) {
    .fi-ta-content-grid .fi-ta-actions .fi-btn > .fi-icon {
        display: none;
    }
}

.fi-ta-content-grid .fi-ta-actions > .fi-dropdown {
    margin-inline-start: auto;
}

/*
 * Tabellen mit ->stackedOnMobile(): am Handy je Zeile eine Karte, Beschriftung links neben dem Wert statt darüber, leere
 * Werte fallen weg. Zellen mit Ui::PLAIN_CELL stehen ohne Beschriftung (Titel einer Karte).
 */
@media (max-width: 639px) {
    .fi-ta-table-stacked-on-mobile > tbody > tr {
        padding-block: 0.75rem;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-label):not(:where([class*="fi-visible"])) {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        column-gap: 0.75rem;
        align-items: baseline;
        padding-block: 0.125rem;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-content .fi-ta-text):not(:has(> .fi-ta-cell-content .fi-ta-text-item)),
    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-content .fi-ta-placeholder) {
        display: none;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label {
        padding-top: 0;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.wm-cell-plain {
        grid-template-columns: minmax(0, 1fr);
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.wm-cell-plain > .fi-ta-cell-label {
        display: none;
    }

    /* Platz für das Häkchen der Sammelaktionen oben rechts in der Karte. */
    .fi-ta-table-stacked-on-mobile > tbody > tr:has(> .fi-ta-selection-cell) > .fi-ta-cell.wm-cell-plain {
        padding-inline-end: 3rem;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-actions) {
        padding-block: 0.5rem 0;
    }
}

/*
 * RowClick::opensOnPhone: Am Handy liegt die Aktion unsichtbar über der ganzen Karte, Knöpfe, Häkchen und Links darüber.
 * Beschreibungen stehen dann nur im Fenster, am Rechner gibt es den Knopf nicht.
 */
@media (min-width: 640px) {
    .wm-row-phone-open {
        display: none;
    }
}

@media (max-width: 639px) {
    .wm-row-not-on-phone {
        display: none;
    }

    .fi-ta-table-stacked-on-mobile .wm-row-phone-open {
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    /* Ohne z-index: Sonst liegen die Häkchen der nächsten Karte über dem offenen Menü „Mehr“. */
    .fi-ta-table-stacked-on-mobile > tbody > tr:has(.wm-row-phone-open) .fi-ta-actions > :not(.wm-row-phone-open) {
        position: relative;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr:has(.wm-row-phone-open) a.fi-ta-col {
        position: relative;
        z-index: 1;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr:has(.wm-row-phone-open) > .fi-ta-selection-cell {
        z-index: 1;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr:has(.wm-row-phone-open) .fi-ta-text-description {
        display: none;
    }
}

/* Einträge in Menüs brechen um, abgeschnittener Text ließe offen, was der Knopf tut. */
.fi-dropdown-list-item-label {
    white-space: normal;
}

/*
    Kunden-Menü oben in der Seitenleiste (Filaments Mandanten-Menü im Portal, eigene Umschalter mit .fi-tenant-menu):
    Namen in einer Zeile mit „…“ (der ganze Name steht dann im Tooltip), sonst wird die Liste mit zwei, drei Zeilen je
    Firma unübersichtlich lang. Das Panel ist so breit wie der Umschalter statt 14rem (sonst schaut die Navigation rechts
    daneben heraus), ohne eigene Bildlaufleiste (scrollt mit Rad und Touchpad), die Suche bleibt oben stehen und sieht
    aus wie ein Eingabefeld.
*/
.fi-tenant-menu .fi-dropdown-list-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-sidebar .fi-tenant-menu {
    position: relative;
}

.fi-sidebar .fi-tenant-menu > .fi-dropdown-panel {
    /* min-width statt max-width: none, Filaments max-width: 14rem !important liegt in einer Ebene und gewinnt sonst. */
    width: 100%;
    min-width: 100%;
    overflow-x: hidden;
    scrollbar-width: none;
}

.fi-sidebar .fi-tenant-menu > .fi-dropdown-panel::-webkit-scrollbar {
    display: none;
}

.fi-sidebar .fi-tenant-menu .fi-dropdown-list > div:has(> input[type="search"]) {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.25rem;
    margin: -0.25rem -0.25rem 0;
    background: #fff;
}

.dark .fi-sidebar .fi-tenant-menu .fi-dropdown-list > div:has(> input[type="search"]) {
    background: var(--gray-900);
}

.fi-sidebar .fi-tenant-menu .fi-dropdown-list > div > input.fi-input[type="search"] {
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent);
}

.fi-sidebar .fi-tenant-menu .fi-dropdown-list > div > input.fi-input[type="search"]:focus {
    box-shadow: 0 0 0 2px var(--primary-600);
}

.dark .fi-sidebar .fi-tenant-menu .fi-dropdown-list > div > input.fi-input[type="search"] {
    background: rgb(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
}

.dark .fi-sidebar .fi-tenant-menu .fi-dropdown-list > div > input.fi-input[type="search"]:focus {
    box-shadow: 0 0 0 2px var(--primary-500);
}

/* Auswahl in einem Menü (ChoiceMenu) wie in den Auswahlfeldern: der aktuelle Eintrag in Teal, Haken rechts, nicht blass. */
.fi-dropdown-list-item.wm-choice-current {
    opacity: 1;
}

.fi-dropdown-list-item.wm-choice-current > .fi-dropdown-list-item-label {
    font-weight: 500;
    color: var(--primary-600);
}

.fi-dropdown-list-item.wm-choice-current > .fi-icon {
    order: 1;
    color: var(--primary-600);
}

.dark .fi-dropdown-list-item.wm-choice-current > .fi-dropdown-list-item-label,
.dark .fi-dropdown-list-item.wm-choice-current > .fi-icon {
    color: var(--primary-400);
}

/* Icons vor bzw. hinter dem Text eines TextEntry sitzen sonst auf der Grundlinie, hier mittig zur Schrift. */
.fi-in-text-item > .fi-icon,
.fi-in-text-item > span:not(.fi-badge) > .fi-icon {
    /* Mitte des Icons (1rem) auf halbe Höhe der Großbuchstaben und Ziffern (~0,36em über der Grundlinie). */
    vertical-align: calc(0.36em - 0.5rem);
}

/* Datumsauswahl und Zeitraum (WmDatePicker, x-date-range-picker). */
.fi-fo-date-time-picker .fi-fo-date-time-picker-panel-header {
    gap: 0.25rem;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-month-select {
    padding-inline: 0.375rem;
}

.fi-fo-date-time-picker [data-wm-date-picker] .fi-fo-date-time-picker-year-input {
    display: none;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-month-select.wm-dp-year {
    flex-grow: 0;
    width: auto;
    padding-inline-end: 1.75rem;
}

.wm-dp-nav {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: var(--gray-500);
    cursor: pointer;
}

.wm-dp-nav svg {
    width: 1.25rem;
    height: 1.25rem;
}

.wm-dp-nav:hover:not(:disabled) {
    background: var(--gray-100);
    color: var(--gray-950);
}

.wm-dp-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.dark .wm-dp-nav {
    color: var(--gray-400);
}

.dark .wm-dp-nav:hover:not(:disabled) {
    background: color-mix(in oklab, #fff 10%, transparent);
    color: #fff;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today {
    box-shadow: inset 0 0 0 1.5px var(--primary-500);
    color: var(--primary-700);
    font-weight: 600;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-selected {
    background: color-mix(in oklab, var(--primary-500) 20%, transparent);
    color: var(--primary-700);
    font-weight: 600;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-selected.fi-focused {
    background: color-mix(in oklab, var(--primary-500) 30%, transparent);
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today,
.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-selected {
    color: var(--primary-300);
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today {
    box-shadow: inset 0 0 0 1.5px var(--primary-400);
}

.wm-dp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

/* Mit Uhrzeit steht die Leiste unter den Feldern für Stunde und Minute, nicht direkt an ihnen. */
.fi-fo-date-time-picker-time-inputs + .wm-dp-footer {
    margin-top: 0.75rem;
}

.dark .wm-dp-footer {
    border-top-color: color-mix(in oklab, #fff 10%, transparent);
}

.wm-dp-action {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    --color: var(--gray-500);
    --text: var(--gray-700);
    --dark-text: var(--gray-200);
    background: color-mix(in oklab, var(--color) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color) 35%, transparent);
    color: var(--text);
}

.wm-dp-action:hover {
    background: color-mix(in oklab, var(--color) 20%, transparent);
}

.wm-dp-action[data-wm-dp-action="today"] {
    --color: var(--primary-500);
    --text: var(--primary-700);
    --dark-text: var(--primary-300);
}

.dark .wm-dp-action {
    color: var(--dark-text);
}

.wm-dp-nav:focus-visible,
.wm-dp-action:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

.wm-dp-action[hidden] {
    display: none;
}

/* Zeitraum (x-date-range-picker): durchgehender Bereich zwischen Beginn und Ende. */
.wm-drp .fi-fo-date-time-picker-trigger {
    text-align: start;
}

.wm-drp .wm-drp-text {
    display: block;
    white-space: nowrap;
}

.wm-drp .wm-drp-placeholder {
    color: var(--gray-400);
}

.wm-drp-days {
    margin-inline-start: 0.375rem;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.wm-drp-panel {
    width: 18rem;
}

.wm-drp .fi-fo-date-time-picker-calendar,
.wm-drp .fi-fo-date-time-picker-calendar-header {
    column-gap: 0;
}

.wm-drp .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.wm-drp-in-range {
    border-radius: 0;
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
}

.wm-drp .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.wm-drp-range-start {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.wm-drp .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.wm-drp-range-end {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.wm-dp-outside:not(.fi-selected) {
    color: var(--gray-400);
}

.dark .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.wm-dp-outside:not(.fi-selected) {
    color: var(--gray-500);
}

.wm-drp-hint {
    flex: 1;
    color: var(--gray-500);
    font-size: 0.75rem;
    text-align: center;
}

/* Filament ordnet die Tage seit 5.10 in Wochenzeilen an, der Zeitraum zeichnet sie flach: Raster hier selbst setzen. */
.wm-drp .fi-fo-date-time-picker-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Mitlaufende Kopfzeile der Tabellen (Rahmen stellt wm-ui.js ein): deckend über den Zeilen. */
.wm-sticky-clip {
    overflow: clip !important;
}

.wm-sticky-box {
    max-height: calc(100dvh - var(--wm-thead-top, 4rem) - 1rem);
    overflow: auto !important;
}

thead.wm-sticky-page,
thead.wm-sticky-box-head {
    position: sticky;
    top: var(--wm-thead-top, 4rem);
    z-index: 2;
    background-color: var(--wm-thead-bg, #fff);
    background-image: var(--wm-thead-layers, none);
    box-shadow: 0 1px 0 var(--gray-200);
}

.dark thead:is(.wm-sticky-page, .wm-sticky-box-head) {
    background-color: var(--wm-thead-bg, var(--gray-900));
}

thead.wm-sticky-box-head {
    top: 0;
}

.dark thead:is(.wm-sticky-page, .wm-sticky-box-head) {
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.1);
}

.dark .fi-ta-table > thead:is(.wm-sticky-page, .wm-sticky-box-head) > tr {
    background-color: color-mix(in oklab, var(--gray-900), white 5%);
}

.dark .fi-ta-table > thead:is(.wm-sticky-page, .wm-sticky-box-head) > tr.fi-ta-table-head-groups-row {
    background-color: var(--gray-900);
}

/*
 * Aktiver Reiter deutlicher (Simon, 6.11.2026: „aktueller Reiter überall mehr kenntlich machen“): getönt in der
 * Hauptfarbe mit Rahmen wie die Soft-Buttons und fette Schrift statt nur grau hinterlegt, für alle Reiter (fi-tabs).
 */
.fi-tabs-item.fi-active,
.fi-tabs-item.fi-active:hover {
    background-color: color-mix(in oklab, var(--primary-500) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 45%, transparent);
}

.fi-tabs-item.fi-active:where(.dark, .dark *),
.fi-tabs-item.fi-active:hover:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--primary-500) 18%, transparent);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    font-weight: 600;
}

/*
 * Auswahlfelder mit Menü statt der Liste des Browsers (wm-ui.js): Das <select> nimmt keine Klicks mehr an, das Feld drum
 * herum öffnet das Menü. Aussehen wie Filaments Dropdowns, gewählter Eintrag in der Hauptfarbe mit Haken rechts.
 */
.wm-selects .fi-input-wrp-content-ctn > select.fi-select-input:not([multiple]) {
    pointer-events: none;
}

.wm-selects .fi-input-wrp:has(> .fi-input-wrp-content-ctn > select.fi-select-input:not([multiple]):not(:disabled)) {
    cursor: pointer;
}

.wm-select-panel {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(3 7 18 / 0.05);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dark .wm-select-panel {
    background: var(--gray-900);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.1);
}

.wm-select-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
}

.wm-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--gray-700);
    cursor: pointer;
}

.wm-select-option > span {
    flex: 1;
    min-width: 0;
}

.wm-select-option > svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.wm-select-option.wm-active {
    background: var(--gray-50);
}

.wm-select-option.wm-selected {
    font-weight: 500;
    color: var(--primary-600);
}

.wm-select-option.wm-disabled {
    color: var(--gray-400);
    cursor: default;
}

.dark .wm-select-option {
    color: var(--gray-200);
}

.dark .wm-select-option.wm-active {
    background: rgb(255 255 255 / 0.05);
}

.dark .wm-select-option.wm-selected {
    color: var(--primary-400);
}

.dark .wm-select-option.wm-disabled {
    color: var(--gray-500);
}

.wm-select-group {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
}

.wm-select-empty {
    padding: 0.5rem 0.625rem;
    color: var(--gray-500);
}

.wm-select-search {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-950);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wm-select-search::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -0.125em;
    background: currentColor;
    animation: wm-select-caret 1s steps(1) infinite;
}

.wm-select-search-empty::before {
    content: attr(data-placeholder);
    color: var(--gray-400);
}

.dark .wm-select-search {
    border-color: rgb(255 255 255 / 0.1);
    color: #fff;
}

@keyframes wm-select-caret {
    50% {
        opacity: 0;
    }
}