/*
 * 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,
.fw-log-tabs,
.fw-pt-tabs,
.fw-in-tabs,
.fw-ta-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: .25rem;
}

/* Eine Stufe für Kartenüberschriften, unabhängig von der Seite. */
.fw-pt-title,
.fw-ta-h,
.fw-ta-emptystate__title,
.fwk-month {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5rem;
}

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

    /* „Bearbeiten“ + „⋮“ (zwei Aktionen) bleiben immer in einer Zeile - die Spalte ist sonst nur 1 % breit und bricht um */
    .fi-ta-content-ctn:not(.fw-stack) .fi-ta-cell > .fi-ta-actions:not(:has(> :nth-child(3))) {
        flex-wrap: nowrap;
    }

    .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-bar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Zahnrad neben dem Umschalter: Einstellungen der gewaehlten Wohnung (nur Symbol, Text im Tooltip) */
.fw-apt-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    color: rgb(107 114 128);
    text-decoration: none;
}

.fw-apt-settings .material-symbols-rounded {
    font-size: 1.3rem;
}

.fw-apt-settings:hover {
    background: rgb(243 244 246);
    color: var(--primary-700, #047857);
}

.dark .fw-apt-settings {
    color: rgb(156 163 175);
}

.dark .fw-apt-settings:hover {
    background: rgb(255 255 255 / .06);
    color: var(--primary-400, #34d399);
}

/* Kennzeichen „Buchungssperre“ in der Kopfzeile (Seiten ohne vollen Hinweis, AdminPanelProvider) */
.fw-lock-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-end: .5rem;
    padding: .2rem .55rem;
    border: 1px solid rgb(253 230 138);
    border-radius: 999px;
    background: rgb(255 251 235);
    color: rgb(146 64 14);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    text-decoration: none;
}

.fw-lock-chip .material-symbols-rounded {
    font-size: 1rem;
}

.fw-lock-chip:hover {
    text-decoration: underline;
}

.dark .fw-lock-chip {
    border-color: rgb(245 158 11 / .35);
    background: rgb(245 158 11 / .1);
    color: rgb(252 211 77);
}

.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 den Platz (Wohnungsname mit Pfeil), Logo, Zahnrad, Haus-Symbol und Text der Sperre entfallen,
       die Suche wird schmaler (Eingabe klappt beim Tippen nicht weg) */
    .fi-topbar .fi-topbar-start .fi-logo,
    .fw-apt-settings,
    .fw-apt-switcher > .material-symbols-rounded:not(.fw-apt-switcher__chevron),
    .fw-lock-chip__text {
        display: none;
    }

    .fw-lock-chip {
        padding: .2rem .35rem;
        margin-inline-end: .25rem;
    }

    .fw-apt-bar {
        flex: 1 1 auto;
    }

    .fw-apt-switcher {
        max-width: 13rem;
    }

    .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-left: .6rem;
        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;
    }
}

/* Neue Nachrichten von Gast oder Putzkraft (AdminPanelProvider, App\Support\Inbox): gleicher Balken, aber blau - eine Nachricht ist keine Warnung */
.fw-global-alert--message { border-color: rgb(191 219 254); background: rgb(239 246 255); color: rgb(30 58 138); }
.fw-global-alert--message svg { color: rgb(37 99 235); }
.fw-global-alert--message a { color: rgb(29 78 216); }
.dark .fw-global-alert--message { border-color: rgb(59 130 246 / .4); background: rgb(59 130 246 / .12); color: rgb(191 219 254); }
.dark .fw-global-alert--message a { color: rgb(147 197 253); }

/* ---------- Seitenkopf: immer gleich ----------
   Titel und Untertitel in voller Breite, die Knöpfe darunter in EINER rechtsbündigen Reihe - egal wie lang der Untertitel ist.
   (Filament setzt sie rechts neben den Titel; bei langen Untertiteln rutschten sie mal daneben, mal darunter.)
   Der grüne Hauptknopf steht immer ganz rechts; die PHP-Seiten liefern ihn auch zuletzt, das hier ist das Sicherheitsnetz. */
.fi-header {
    flex-direction: column;
    align-items: stretch;
}

.fi-header-actions-ctn,
.fi-header .fi-ac {
    justify-content: flex-end;
}

.fi-header .fi-ac > .fi-btn.fi-color-primary,
.fi-header .fi-ac > :has(> .fi-btn.fi-color-primary) {
    order: 1;
}

/* ---------- Übersicht: „Erste Schritte“ kompakt (widgets/erste-schritte.blade.php) ---------- */
.fw-es-progress { height: .375rem; border-radius: 999px; background: var(--gray-200); overflow: hidden; margin-bottom: 1rem; }
.fw-es-progress > div { height: 100%; background: var(--primary-600); border-radius: 999px; }
.fw-es-next__label { display: block; margin-bottom: .35rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.fw-es-done { margin: 0; font-size: .875rem; color: var(--gray-600); }
.fw-es-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .fw-es-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fw-es-item { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-start; padding: .75rem .875rem; border-radius: .75rem; border: 1px solid var(--gray-200); min-width: 0; }
.fw-es-item.is-next { border-color: var(--primary-300, #6ee7b7); background: var(--primary-50, #ecfdf5); }
.fw-es-item.is-done { opacity: .7; }
.fw-es-check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 2px solid var(--gray-300); color: #fff; background: #fff; cursor: pointer; padding: 0; }
.fw-es-check[disabled] { cursor: default; }
.fw-es-item.is-done .fw-es-check { background: var(--primary-600); border-color: var(--primary-600); }
.fw-es-body { flex: 1 1 12rem; min-width: 0; }
.fw-es-body strong { display: block; font-size: .9375rem; font-weight: 600; }
.fw-es-item.is-done .fw-es-body strong { text-decoration: line-through; text-decoration-color: var(--gray-400); }
.fw-es-body span { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--gray-500); }
.fw-es-open { display: inline-flex; align-items: center; gap: .25rem; align-self: center; margin-inline-start: auto; font-size: .8125rem; font-weight: 600; color: var(--primary-600); white-space: nowrap; }
.fw-es-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: .875rem; }
.fw-es-toggle { padding: 0; border: 0; background: none; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--primary-600); }
.fw-es-toggle:hover { text-decoration: underline; }
.fw-es-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.dark .fw-es-item { border-color: rgb(255 255 255 / .1); }
.dark .fw-es-item.is-next { border-color: rgb(52 211 153 / .35); background: rgb(16 185 129 / .08); }
.dark .fw-es-check { background: transparent; }
.dark .fw-es-progress { background: rgb(255 255 255 / .1); }

/* ---------- Brotkrumen nur auf Unterseiten ----------
   Listen-Hauptseiten (Resource-Index) zeigen keine Brotkrumen – der Menuepunkt ist schon markiert.
   Die PHP-Seiten liefern getBreadcrumbs() = []; das hier ist das Sicherheitsnetz fuer alle Ressourcen. */
.fi-resource-list-records-page .fi-breadcrumbs,
.fi-resource-manage-records-page .fi-breadcrumbs {
    display: none;
}

/* ---------- Portale: Fotos der Website als Vorschaubilder mit Auswahl-Haekchen (pages/portale.blade.php) ---------- */
.fw-ota-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fw-ota-photo {
    position: relative;
    display: block;
    cursor: pointer;
}

.fw-ota-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .5rem;
    background: var(--gray-200);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .15s, opacity .15s;
}

.fw-ota-photo__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fw-ota-photo__check {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: rgb(0 0 0 / .25);
    color: transparent;
    box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}

.fw-ota-photo__check svg {
    width: 1rem;
    height: 1rem;
}

.fw-ota-photo__input:checked ~ img {
    outline-color: var(--primary-600, #059669);
}

.fw-ota-photo__input:checked ~ .fw-ota-photo__check {
    border-color: var(--primary-600, #059669);
    background: var(--primary-600, #059669);
    color: #fff;
}

.fw-ota-photo__input:focus-visible ~ img {
    outline-color: var(--primary-400, #34d399);
}