/*
 * 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;
}

.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;
}

/* 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);
}

.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;
    box-shadow: 0 1px 0 var(--gray-200);
}

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);
}