/*
 * Globale Layout-Regeln fuer /admin2 (geladen per Render-Hook im AdminPanelProvider).
 * Grundsatz: Tabellen und Tab-Leisten scrollen nie seitlich, Bedienelemente sind immer sichtbar.
 * - Tabellen brechen Inhalte um. Passt eine Tabelle trotzdem nicht in ihren Container, setzt
 *   js/fw/admin2.js am .fi-ta-content-ctn die Klasse fw-stack: Zeilen werden als Karten dargestellt
 *   (dieselbe Darstellung wie Filaments stackedOnMobile unter 640 px, global eingeschaltet im AppServiceProvider).
 * Unlayered CSS, gewinnt dadurch gegen Filaments @layer components.
 */

/* ---------- Seitenkopf: Titel und Aktionen umbrechen ---------- */
.fi-header {
    flex-wrap: wrap;
    row-gap: .75rem;
}

.fi-header > * {
    min-width: 0;
    max-width: 100%;
}

.fi-header-actions-ctn,
.fi-header-actions-ctn .fi-ac,
.fi-header .fi-ac {
    flex-wrap: wrap;
    max-width: 100%;
}

/* ---------- Tab-Leisten: umbrechen statt scrollen ---------- */
.fi-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: .25rem;
}

/* ---------- Tabellen: nie seitlich scrollen ---------- */
.fi-ta-content-ctn,
.fi-ta-content {
    overflow-x: visible;
}

.fi-ta-header-toolbar {
    flex-wrap: wrap;
    row-gap: .5rem;
}

/* Tabellenansicht: Umbruch statt Verbreiterung */
.fi-ta-table > tbody,
.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
    white-space: normal;
}

.fi-ta-header-cell:not(.fi-wrapped) {
    white-space: normal;
}

.fi-ta-table > tbody > tr > .fi-ta-cell {
    overflow-wrap: break-word;
}

.fi-ta-cell:has(.fi-ta-actions) {
    white-space: normal;
}

.fi-ta-cell > .fi-ta-actions {
    flex-wrap: wrap;
    column-gap: .75rem;
    row-gap: .25rem;
}

.fi-ta-actions .fi-link,
.fi-ta-actions .fi-btn {
    white-space: nowrap;
}

@media (min-width: 40rem) {
    .fi-ta-content-ctn:not(.fw-stack) .fi-ta-cell:has(.fi-ta-actions) {
        width: 1%;
    }

    .fi-ta-content-ctn:not(.fw-stack) .fi-ta-cell > .fi-ta-actions {
        justify-content: flex-end;
        min-width: 5.5rem;
    }

    .fi-ta-content-ctn:not(.fw-stack) .fi-ta-text:not(.fi-inline) {
        padding-inline: .6rem;
    }
}

/* ---------- Kartenansicht (fw-stack, ab 640 px; darunter macht es Filament selbst) ---------- */
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile {
    display: block;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > thead {
    display: block;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > thead:not(:has(.fi-ta-table-stacked-header-row)),
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr:not(.fi-ta-table-stacked-header-row),
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr > .fi-ta-header-cell,
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr > .fi-ta-selection-cell {
    display: none;
}

.fw-stack .fi-ta-table-stacked-header-row {
    display: block;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
    display: block;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
    display: block;
    position: relative;
    padding-block: .5rem;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-collapsed {
    display: none;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-group-header-row,
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-summary-row {
    padding-block: 0;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-group-header-row > td {
    display: block;
    width: 100%;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
    position: absolute;
    inset-inline-end: 1.25rem;
    top: 0;
    width: auto;
    padding: 0;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
    display: block;
    padding-inline: 1.5rem;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell).sm\:fi-visible,
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell).md\:fi-visible {
    display: block;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-label {
    display: block;
    padding-top: .5rem;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--gray-500);
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) > .fi-ta-cell-content {
    overflow-wrap: break-word;
}

.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-text,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-icon,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-image,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-color,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-select,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-checkbox,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-toggle,
.fw-stack .fi-ta-table-stacked-on-mobile .fi-ta-text-input {
    padding: 0;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):has(.fi-ta-actions) {
    padding-block: .5rem;
    padding-inline: 1.5rem;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):has(.fi-ta-actions) > .fi-ta-actions {
    justify-content: flex-start;
    width: 100%;
    row-gap: .5rem;
}

/* Karten als Raster: Wert-Paare nebeneinander, soweit Platz ist; Aktionen ueber volle Breite */
.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    column-gap: 1.5rem;
    padding-inline: 1.5rem;
    padding-block: .75rem;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row) > .fi-ta-cell:not(.fi-ta-selection-cell) {
    padding-inline: 0;
    min-width: 0;
}

.fw-stack .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row) > .fi-ta-cell:not(.fi-ta-selection-cell):has(.fi-ta-actions) {
    grid-column: 1 / -1;
    padding-inline: 0;
    padding-top: .75rem;
}

/* in Karten alles linksbuendig (Tabellen-Ausrichtung center/end ergibt dort keinen Sinn) */
.fw-stack .fi-ta-cell.fi-align-center,
.fw-stack .fi-ta-cell.fi-align-end,
.fw-stack .fi-ta-cell .fi-align-center,
.fw-stack .fi-ta-cell .fi-align-end,
.fw-stack .fi-ta-cell .fi-align-right {
    text-align: start;
    justify-content: flex-start;
}

@media (max-width: 39.98rem) {
    .fi-ta-table-stacked-on-mobile .fi-ta-cell.fi-align-center,
    .fi-ta-table-stacked-on-mobile .fi-ta-cell.fi-align-end,
    .fi-ta-table-stacked-on-mobile .fi-ta-cell .fi-align-center,
    .fi-ta-table-stacked-on-mobile .fi-ta-cell .fi-align-end,
    .fi-ta-table-stacked-on-mobile .fi-ta-cell .fi-align-right {
        text-align: start;
        justify-content: flex-start;
    }
}

/* Karten (Handy und fw-stack): lange Woerter/URLs duerfen umbrechen */
.fw-stack .fi-ta-text-item,
.fw-stack .fi-ta-text a {
    overflow-wrap: anywhere;
}

@media (max-width: 39.98rem) {
    .fi-ta-text-item,
    .fi-ta-text a {
        overflow-wrap: anywhere;
    }
}

/* ---------- Formulare/Raster: Inhalte duerfen Spalten nicht verbreitern ---------- */
.fi-main .fi-grid-col,
.fi-main .fi-grid > form,
.fi-main .fi-sc-component,
.fi-main .fi-section {
    min-width: 0;
}

/* ---------- Eigene HTML-Tabellen in Custom Pages ---------- */
.fi-main table:not(.fi-ta-table) {
    max-width: 100%;
}

.fi-main table:not(.fi-ta-table) td,
.fi-main table:not(.fi-ta-table) th {
    overflow-wrap: anywhere;
}

/* ---------- Dropdown-Menues (z. B. Aktionen einer Buchung): nie ueber den Bildschirmrand hinaus ---------- */
.fi-dropdown-panel {
    max-height: min(calc(100vh - 6rem), 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 39.98rem) {
    /* Handy: Menue ueber die volle Breite statt teilweise links/rechts ausserhalb */
    .fi-dropdown-panel[style*="fixed"] {
        left: .5rem !important;
        right: .5rem !important;
        width: auto !important;
        max-width: none;
    }
}

/* ---------- Wohnungs-Umschalter in der Kopfzeile ---------- */
.fw-apt-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 16rem;
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background: #fff;
    color: rgb(17 24 39);
    transition: border-color .15s, box-shadow .15s;
}

.fw-apt-switcher:focus-within {
    border-color: var(--primary-500, #10b981);
    box-shadow: 0 0 0 1px var(--primary-500, #10b981);
}

.fw-apt-switcher > .material-symbols-rounded {
    position: absolute;
    left: .5rem;
    font-size: 1.15rem;
    color: var(--primary-600, #059669);
    pointer-events: none;
}

.fw-apt-switcher > .fw-apt-switcher__chevron {
    left: auto;
    right: .4rem;
    color: rgb(107 114 128);
}

.fw-apt-switcher__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .4rem 1.9rem .4rem 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

.dark .fw-apt-switcher {
    border-color: rgb(255 255 255 / .1);
    background: rgb(255 255 255 / .05);
    color: rgb(243 244 246);
}

.dark .fw-apt-switcher__select option {
    background: rgb(24 24 27);
    color: rgb(243 244 246);
}

.dark .fw-apt-switcher > .material-symbols-rounded {
    color: var(--primary-400, #34d399);
}

@media (max-width: 39.98rem) {
    /* Handy: Umschalter bekommt mehr Platz, die Suche wird schmaler (Eingabe klappt beim Tippen nicht weg) */
    .fw-apt-switcher {
        max-width: 11.5rem;
    }

    .fi-topbar .fi-global-search-field {
        max-width: 6.5rem;
    }

    .fi-topbar .fi-global-search-field input:not(:focus)::placeholder {
        color: transparent;
    }

    .fw-apt-switcher__select {
        font-size: .8125rem;
        padding-right: 1.6rem;
    }
}

/* ---------- Material-Symbol-Icons in Tabellen und Formularen ---------- */
.fw-table-icon.material-symbols-rounded {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--primary-600, #059669);
    vertical-align: middle;
}

.fw-input-icon.material-symbols-rounded {
    font-size: 1.35rem;
    line-height: 1;
    vertical-align: middle;
}

/* ---------- Icons & Badges (Lesbarkeit auf einen Blick) ---------- */
/* Material-Symbol vor einem Text (Geraetetyp, Info-Karte, Wohnungsliste) */
.fw-icon-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    max-width: 100%;
}

.fw-icon-label > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fw-inline-icon.material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--primary-600, #059669);
}

.dark .fw-inline-icon.material-symbols-rounded,
.dark .fw-table-icon.material-symbols-rounded {
    color: var(--primary-400, #34d399);
}

/* Kennzahl-/Statuszeilen in eigenen Seiten (System, WhatsApp) */
.fw-status-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .55rem 1.25rem;
    font-size: .875rem;
    margin: 0;
}

.fw-status-list dt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgb(107 114 128);
}

.fw-status-list dd {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

@media (max-width: 39.98rem) {
    .fw-status-list {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }

    .fw-status-list dd {
        margin-bottom: .6rem;
    }
}

/* Leerer Zustand in eigenen Seiten/Karten */
.fw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgb(107 114 128);
    font-size: .875rem;
}

.fw-empty .fw-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
    color: rgb(156 163 175);
}

.dark .fw-empty .fw-empty-icon {
    background: rgb(255 255 255 / .06);
}

/* ---------- Symbol-Auswahl (App\Filament\Support\IconPicker) ---------- */
.fw-icon-option {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.fw-icon-option .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--primary-600, #059669);
}

.fw-icon-option small {
    color: rgb(156 163 175);
    font-size: .75rem;
    margin-inline-start: .25rem;
}

.dark .fw-icon-option .material-symbols-rounded {
    color: var(--primary-400, #34d399);
}

/* unbekannter Symbolname (admin2.js misst die Glyphenbreite) */
.fw-icon-option.fw-icon-invalid > .material-symbols-rounded {
    display: none;
}

.fw-icon-option.fw-icon-invalid::before {
    content: "Unbekanntes Symbol –";
    color: rgb(185 28 28);
    font-size: .8125rem;
    font-weight: 500;
}

/* ---------- Hinweisleiste oben im Inhalt (z. B. Buchungssperre aktiv) ---------- */
.fw-global-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: 1rem 0 0;
    padding: .6rem .9rem;
    border-radius: .75rem;
    border: 1px solid rgb(253 230 138);
    background: rgb(255 251 235);
    color: rgb(120 53 15);
    font-size: .875rem;
    line-height: 1.35;
}

.fw-global-alert svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: rgb(217 119 6);
}

.fw-global-alert strong {
    font-weight: 600;
}

.fw-global-alert a {
    margin-inline-start: auto;
    font-weight: 600;
    color: rgb(146 64 14);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.dark .fw-global-alert {
    border-color: rgb(245 158 11 / .35);
    background: rgb(245 158 11 / .1);
    color: rgb(253 230 138);
}

.dark .fw-global-alert a {
    color: rgb(252 211 77);
}

/* ---------- Kompakte Tabelle: erster Schritt, bevor eine zu breite Tabelle als Karten erscheint ---------- */
@media (min-width: 40rem) {
    .fw-compact .fi-ta-table > thead > tr > .fi-ta-header-cell {
        padding-inline: .5rem;
    }

    .fw-compact .fi-ta-table > thead > tr > .fi-ta-header-cell:first-child,
    .fw-compact .fi-ta-table > tbody > tr > .fi-ta-cell:first-child .fi-ta-text {
        padding-inline-start: 1rem;
    }

    .fw-compact .fi-ta-content-ctn:not(.fw-stack) .fi-ta-text:not(.fi-inline),
    .fw-compact.fi-ta-content-ctn:not(.fw-stack) .fi-ta-text:not(.fi-inline) {
        padding-inline: .4rem;
    }

    .fw-compact .fi-ta-cell > .fi-ta-actions {
        column-gap: .5rem;
    }

    .fw-compact .fi-ta-text-item,
    .fw-compact .fi-ta-text a {
        overflow-wrap: anywhere;
    }

    .fw-compact .fi-ta-content-ctn:not(.fw-stack) .fi-ta-cell > .fi-ta-actions,
    .fw-compact.fi-ta-content-ctn:not(.fw-stack) .fi-ta-cell > .fi-ta-actions {
        min-width: 0;
    }
}