/*
 * Anpassungen am Filament-Panel, die sich nicht in PHP ausdrücken lassen,
 * weil sie vom clientseitigen Zustand der Sidebar abhängen oder gegen
 * Filaments eigene Utility-Klassen gewinnen müssen.
 *
 * Bewusst KEIN Tailwind: die Datei wird als fertiges CSS über
 * FilamentAsset::register() eingebunden (siehe FilamentAssetsServiceProvider)
 * und landet per `filament:assets` in public/css/app. Sie durchläuft keinen
 * Vite-Build.
 */

/* ------------------------------------------------------------------ *
 * 1. Inhaltsbreite folgt dem Sidebar-Zustand
 * ------------------------------------------------------------------ */

/*
 * Filament deckelt den Inhalt auf max-w-7xl (1280 px) und zentriert ihn. Für
 * Formulare ist das richtig, für breite Tabellen zu eng. Statt die Deckelung
 * generell aufzugeben, hängt sie am Sidebar-Zustand: eingeklappte Sidebar
 * heißt „Breitmodus" und hebt die Deckelung auf.
 *
 * Filament bindet `fi-main-ctn-sidebar-open` reaktiv an den Container
 * (layout/index.blade.php), sobald die Sidebar einklappbar ist. Die
 * Spezifität (0,3,0) gewinnt gegen Tailwinds `.max-w-7xl` (0,1,0),
 * unabhängig von der Ladereihenfolge.
 *
 * Auf Mobilgeräten ist der Store standardmäßig geschlossen, dort greift die
 * Regel also immer — ohne Wirkung, weil 1280 px dort ohnehin breiter als der
 * Viewport sind. Ein Aufblitzen beim Laden gibt es nicht: Filament hält den
 * Container bis zum Start von Alpine auf opacity 0.
 */
.fi-main-ctn:not(.fi-main-ctn-sidebar-open) .fi-main {
    max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 2. Aktions-Dropdowns an ihren Inhalt anpassen
 * ------------------------------------------------------------------ */

/*
 * Filament gibt dem Panel `w-screen` und deckelt es per `!max-w-[14rem]`
 * (224 px); der Eintragstext trägt zusätzlich `truncate`. Deutsche Labels sind
 * länger als die englischen Vorgaben, dadurch war z. B. aus „Ausgewählte offene
 * Gruppen bestätigen" nur „Ausgewählte offene Gru…" zu lesen.
 *
 * Die Klassennamen stehen DOPPELT, und das ist kein Versehen: Filament bindet
 * sein Kern-Stylesheet (mit `.w-screen{width:100vw}`) NACH den registrierten
 * App-Assets ein. Bei gleicher Spezifität würde die spätere Regel gewinnen und
 * diese Datei wirkungslos bleiben. Der doppelte Selektor hebt die Spezifität
 * auf (0,2,0) und entkoppelt die Regeln von der Ladereihenfolge.
 *
 * `!important` bei max-width spiegelt Filaments eigene Begründung: sonst
 * überschreibt die "size"-Middleware von Floating UI den Wert per Inline-Style.
 *
 * Achtung bei Filament-Updates: beide Klassennamen sind Filament-intern. Werden
 * sie umbenannt, fällt die Darstellung still auf Filaments schmale Vorgabe
 * zurück — abgefedert durch die in AppServiceProvider gesetzte Mindestbreite.
 */
.fi-dropdown-panel.fi-dropdown-panel {
    width: max-content;
    /* Auf schmalen Viewports nie über den Bildschirmrand hinaus. */
    max-width: min(calc(100vw - 2rem), 40rem) !important;
}

.fi-dropdown-list-item-label.fi-dropdown-list-item-label {
    overflow: visible;
    text-overflow: clip;
}

/* ------------------------------------------------------------------ *
 * 3. Eigene Onboarding-Ansichten (Preisvergleich, Checkliste, Unterlagen)
 * ------------------------------------------------------------------ */

/*
 * Das Panel hat keinen Tailwind-Build für App-Views: Utility-Klassen, die nur in
 * unseren Blade-Dateien vorkommen, existieren im vorkompilierten Filament-CSS
 * nicht. Die Ansichten verwenden deshalb semantische egs-*-Klassen auf Basis der
 * Filament-Farbvariablen. Ein Test (OnboardingViewClassesTest) hält das ein.
 */

.egs-muted { color: rgb(var(--gray-500)); }
.egs-danger { color: rgb(var(--danger-600)); }
.egs-stack { display: flex; flex-direction: column; gap: 1rem; }
.egs-stack-sm { display: flex; flex-direction: column; gap: .75rem; }
.egs-box {
    border: 1px solid rgb(var(--gray-200));
    border-radius: .75rem;
    color: rgb(var(--gray-950));
}
.egs-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
    color: rgb(var(--primary-600));
}
.egs-link-danger { color: rgb(var(--danger-600)); }

/* Checkliste */
.egs-checklist-search {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .75rem 1rem;
    font-size: 1rem;
    border: 1px solid rgb(var(--gray-300));
    border-radius: .5rem;
    background: #fff;
    color: rgb(var(--gray-950));
}
.egs-checklist-head,
.egs-checklist-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: .75rem 1rem;
    font-size: 1rem;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    color: rgb(var(--gray-950));
}
.egs-checklist-head { justify-content: space-between; min-height: 44px; font-weight: 600; }
.egs-checklist-row { gap: 1rem; }
.egs-checklist-row:hover { background: rgb(var(--gray-50)); }
.egs-checklist-body { border-top: 1px solid rgb(var(--gray-200)); }
.egs-checklist-body > * + * { border-top: 1px solid rgb(var(--gray-200)); }
.egs-checklist-count { font-weight: 400; color: rgb(var(--gray-500)); }
.egs-checklist-tick {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgb(var(--gray-400));
    border-radius: .375rem;
    font-size: 1.25rem;
    line-height: 1;
}
.egs-checklist-tick-on { border-color: rgb(var(--primary-600)); background: rgb(var(--primary-600)); color: #fff; }
.egs-checklist-location { padding: 0 1rem .75rem 4rem; }
.egs-checklist-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .5rem .75rem;
    font-size: 1rem;
    border: 1px solid rgb(var(--gray-300));
    border-radius: .5rem;
    background: #fff;
    color: rgb(var(--gray-950));
}
.egs-checklist-title { padding: .75rem 1rem; font-size: 1rem; font-weight: 600; }

/* Unterlagen */
.egs-docs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    font-size: .875rem;
}
.egs-docs-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egs-docs-error { width: 100%; color: rgb(var(--danger-600)); }

/* Preisvergleich */
.egs-cmp-title { font-size: 1rem; font-weight: 600; color: rgb(var(--gray-950)); }
.egs-cmp-scroll { overflow-x: auto; border: 1px solid rgb(var(--gray-200)); border-radius: .75rem; }
.egs-cmp-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: rgb(var(--gray-950)); }
.egs-cmp-table th,
.egs-cmp-table td { padding: .5rem .75rem; text-align: left; border-top: 1px solid rgb(var(--gray-200)); vertical-align: top; }
.egs-cmp-table thead th {
    border-top: 0;
    background: rgb(var(--gray-50));
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--gray-600));
}
.egs-cmp-table tfoot th,
.egs-cmp-table tfoot td { background: rgb(var(--gray-50)); }
.egs-cmp-table .egs-cmp-num { text-align: right; font-variant-numeric: tabular-nums; }
.egs-cmp-sub { display: block; font-size: .75rem; font-weight: 400; color: rgb(var(--gray-500)); }
.egs-cmp-best { font-weight: 700; }
.egs-cmp-cheaper { background: rgb(var(--success-50)); color: rgb(var(--success-700)); }
.egs-cmp-dearer { background: rgb(var(--danger-50)); color: rgb(var(--danger-700)); }
.egs-cmp-cheaper .egs-cmp-sub { color: rgb(var(--success-700)); }
.egs-cmp-dearer .egs-cmp-sub { color: rgb(var(--danger-700)); }
.egs-cmp-deleted td { color: rgb(var(--gray-400)); }
.egs-cmp-deleted .egs-cmp-name { text-decoration: line-through; }

.egs-drift-banner { padding: .625rem .875rem; border-radius: .75rem; font-size: .875rem; background: rgb(var(--warning-50)); color: rgb(var(--warning-700)); border: 1px solid rgb(var(--warning-200)); }

/* Dunkel */
.dark .egs-muted,
.dark .egs-checklist-count,
.dark .egs-cmp-sub { color: rgb(var(--gray-400)); }
.dark .egs-danger,
.dark .egs-link-danger,
.dark .egs-docs-error { color: rgb(var(--danger-400)); }
.dark .egs-link { color: rgb(var(--primary-400)); }
.dark .egs-link-danger { color: rgb(var(--danger-400)); }
.dark .egs-box,
.dark .egs-checklist-head,
.dark .egs-checklist-row,
.dark .egs-cmp-title,
.dark .egs-cmp-table { color: #fff; }
.dark .egs-box,
.dark .egs-cmp-scroll,
.dark .egs-checklist-body,
.dark .egs-checklist-body > * + *,
.dark .egs-cmp-table th,
.dark .egs-cmp-table td { border-color: rgb(255 255 255 / .1); }
.dark .egs-checklist-row:hover { background: rgb(255 255 255 / .05); }
.dark .egs-checklist-search,
.dark .egs-checklist-select { background: rgb(var(--gray-900)); border-color: rgb(255 255 255 / .2); color: #fff; }
.dark .egs-checklist-tick { border-color: rgb(var(--gray-500)); }
.dark .egs-checklist-tick-on { border-color: rgb(var(--primary-600)); }
.dark .egs-cmp-table thead th,
.dark .egs-cmp-table tfoot th,
.dark .egs-cmp-table tfoot td { background: rgb(255 255 255 / .05); }
.dark .egs-cmp-table thead th { color: rgb(var(--gray-400)); }
.dark .egs-drift-banner { background: rgb(var(--warning-500) / .1); color: rgb(var(--warning-400)); border-color: rgb(var(--warning-500) / .3); }
.dark .egs-cmp-cheaper { background: rgb(var(--success-500) / .1); color: rgb(var(--success-400)); }
.dark .egs-cmp-dearer { background: rgb(var(--danger-500) / .1); color: rgb(var(--danger-400)); }
.dark .egs-cmp-cheaper .egs-cmp-sub { color: rgb(var(--success-400)); }
.dark .egs-cmp-dearer .egs-cmp-sub { color: rgb(var(--danger-400)); }
.dark .egs-cmp-deleted td { color: rgb(var(--gray-500)); }
.egs-cmp-badge { margin-left: .25rem; }

/* Gewählte Lieferpartner */
.egs-sel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem 1rem;
    padding: 0 1rem 1rem;
}
.egs-sel-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.egs-sel-label { font-size: .875rem; font-weight: 500; color: rgb(var(--gray-950)); }
.egs-sel-value { display: flex; align-items: center; min-height: 2.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.egs-sel-hint { padding: 0 1rem 1rem; }
.egs-cmp-pick { display: block; margin-top: .25rem; }
.dark .egs-sel-label { color: #fff; }