/* ====================================================================== beprint Verwaltung – CSS-Overrides für das Filament-Admin-Panel ---------------------------------------------------------------------- Wird ueber einen RenderHook im AdminPanelProvider in den jeder Admin-Page gehaengt. Iteration ohne Build-Schritt: Datei aendern + Browser hart-refreshen (Strg+F5). Scope: alle Resource-Detail-(View-)Pages (`.fi-resource-view-record-page`). Listen, Edit-Formulare, Login etc. werden NICHT angefasst. ====================================================================== */ /* ---------------------------------------------------------------------- 1. Vertikale Abstaende reduzieren (~25–35%) ---------------------------------------------------------------------- */ /* Section-Padding: Filament default ist relativ luftig */ .fi-resource-view-record-page .fi-section-content, .fi-resource-view-record-page .fi-section-content-ctn { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; } .fi-resource-view-record-page .fi-section-header { padding-top: 0.875rem !important; padding-bottom: 0.625rem !important; } /* Gap zwischen Sections im Tab */ .fi-resource-view-record-page .fi-tabs-tab-pnl, .fi-resource-view-record-page .fi-tabs-tab-pnl > div { row-gap: 0.75rem !important; } /* Spacing zwischen Eintraegen innerhalb einer Section */ .fi-resource-view-record-page .fi-in-component-ctn { row-gap: 0.5rem !important; column-gap: 1.25rem !important; } /* ---------------------------------------------------------------------- 2. Label & Wert nebeneinander (wo es passt) ---------------------------------------------------------------------- Filament rendert pro Eintrag einen .fi-in-entry-wrp mit einem inneren `
`, das zwei Childs hat: Label-Container + Content-Container. Wir machen daraus ein 2-Spalten-Grid. Excludes (bleiben wie Default): - col-span-full Eintraege (Hero / lange Texte) - Eintraege mit RepeatableEntry, Actions oder text-lg (Hero) ---------------------------------------------------------------------- */ .fi-resource-view-record-page .fi-in-entry-wrp:not(.col-span-full):not(:has(.fi-in-repeatable-entry)):not(:has(.fi-ac)):not(:has(.text-lg)) > div:first-child { display: grid !important; grid-template-columns: minmax(140px, 11rem) 1fr !important; column-gap: 1rem !important; row-gap: 0 !important; align-items: baseline !important; } /* Label-Container im Inline-Modus: kein Bottom-Margin, an Baseline ausrichten */ .fi-resource-view-record-page .fi-in-entry-wrp:not(.col-span-full):not(:has(.fi-in-repeatable-entry)):not(:has(.fi-ac)):not(:has(.text-lg)) > div:first-child > div:first-child { margin: 0 !important; padding-top: 0.125rem; } /* ---------------------------------------------------------------------- 3. Visuelle Hierarchie ---------------------------------------------------------------------- */ /* Labels: dezent grau, kleinerer Schnitt, weniger Gewicht */ .fi-resource-view-record-page .fi-in-entry-wrp-label, .fi-resource-view-record-page .fi-in-entry-wrp-label > span { color: rgb(100 116 139) !important; /* slate-500 */ font-weight: 500 !important; font-size: 0.8125rem !important; /* ~13px */ line-height: 1.4 !important; } .dark .fi-resource-view-record-page .fi-in-entry-wrp-label, .dark .fi-resource-view-record-page .fi-in-entry-wrp-label > span { color: rgb(148 163 184) !important; /* slate-400 */ } /* Section-Heading: klar abgesetzt mit Border unten */ .fi-resource-view-record-page .fi-section > .fi-section-header { border-bottom: 1px solid rgb(226 232 240); /* slate-200 */ } .dark .fi-resource-view-record-page .fi-section > .fi-section-header { border-bottom-color: rgb(51 65 85); /* slate-700 */ } .fi-resource-view-record-page .fi-section-header-heading { font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: -0.005em; } /* Section-Description (Helfer-Text): kompakter */ .fi-resource-view-record-page .fi-section-header-description { font-size: 0.8rem !important; margin-top: 0.125rem; } /* ---------------------------------------------------------------------- 4. Hinweis-Boxen (Warn-/Fehler-Banner) in Custom-Blade-Templates ---------------------------------------------------------------------- Hintergrund: Filament generiert sein CSS nur fuer die Farb-Klassen, die in der Filament-Core verwendet werden. Standard-Tailwind-Farben wie `bg-amber-50` und auch viele Shades von `bg-warning-50`/`bg-danger-50` fehlen im Production-Build. Deshalb hier explizite Klassen. Genutzt in: - resources/views/filament/infolists/billing-preview.blade.php ---------------------------------------------------------------------- */ .beprint-notice-warning { border-radius: 0.5rem; border: 1px solid rgb(253 230 138); /* amber-200 */ background-color: rgb(255 251 235); /* amber-50 */ color: rgb(120 53 15); /* amber-900 */ padding: 0.75rem 1rem; } .beprint-notice-warning strong { font-weight: 600; } .beprint-notice-danger { border-radius: 0.5rem; border: 1px solid rgb(254 202 202); /* red-200 */ background-color: rgb(254 242 242); /* red-50 */ color: rgb(127 29 29); /* red-900 */ padding: 0.75rem 1rem; } .beprint-notice-danger strong { font-weight: 600; } .beprint-notice-info { border-radius: 0.5rem; border: 1px solid rgb(199 210 254); /* indigo-200 */ background-color: rgb(238 242 255); /* indigo-50 */ color: rgb(49 46 129); /* indigo-900 */ padding: 0.75rem 1rem; } .beprint-notice-info strong { font-weight: 600; } .dark .beprint-notice-warning { background-color: rgb(120 53 15 / 0.18); border-color: rgb(146 64 14 / 0.45); color: rgb(254 240 138); } .dark .beprint-notice-info { background-color: rgb(49 46 129 / 0.18); border-color: rgb(67 56 202 / 0.45); color: rgb(199 210 254); } .dark .beprint-notice-danger { background-color: rgb(127 29 29 / 0.18); border-color: rgb(153 27 27 / 0.45); color: rgb(254 202 202); } /* ── Kunden-Statistik: feste Diagramm-Höhe ───────────────────────────────── Die Diagramme in der Registerkarte „Statistik" der Kundenakte sollen genauso hoch sein wie die der Auswertungs-Seiten. Über das Seitenverhältnis geht das nicht: die Kundenakte ist schmaler als eine volle Auswertungs-Seite, dieselbe Chart.js-Einstellung ergäbe dort also eine geringere Höhe. Deshalb feste Höhe hier — sie gehört ZWINGEND mit `maintainAspectRatio: false` in `AbstractCompanyChartWidget::baseOptions()` zusammen. Fehlt eine der beiden Seiten, fällt Chart.js auf die Canvas-Standardhöhe von 150 px zurück und alle Kurven werden flach. Zum Nachjustieren reicht dieser eine Wert (Datei ändern + Strg+F5, kein Build). ───────────────────────────────────────────────────────────────────────── */ .cstat-chart canvas { height: 320px !important; max-height: 320px !important; } /* ── Betreuungs-Index: Spaltenlayout + Zeilenraster ──────────────────────── Filaments kompiliertes CSS enthält NICHT jede Tailwind-Utility. Konkret fehlen `lg:grid-cols-2`, `grid-cols-3` und `last:border-0` — sie verpuffen still, und die beiden Ranglisten landen untereinander statt nebeneinander (gleiches Muster wie bei `bg-success-50`, siehe Memory feedback_filament_ui_polish). Vorhanden ist nur `md:grid-cols-2`. Das reicht fürs Grobe; die Feinheiten stehen deshalb hier — Datei ändern + Strg+F5, kein Build. ───────────────────────────────────────────────────────────────────────── */ /* Die zwei Listen nebeneinander. Umbruch erst, wenn wirklich zu wenig Platz ist — darunter wäre eine zweispaltige Anzeige unlesbar. */ .bidx-spalten { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { .bidx-spalten { grid-template-columns: 1fr 1fr; } } /* Eine Kundenzeile. Trennlinie zwischen den Zeilen, nicht hinter der letzten. */ .bidx-zeile { padding-block: 0.75rem; border-bottom: 1px solid rgb(229 231 235); } .bidx-zeile:last-child { border-bottom: 0; padding-bottom: 0; } .dark .bidx-zeile { border-color: rgb(55 65 81); } /* Kennzahlen der Zeile: umbrechend statt starrer Dreierspalte — in der schmalen Hälfte einer zweispaltigen Ansicht ist dafür kein Platz. */ .bidx-kennzahlen { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; } /* Farbakzent der beiden Listen-Symbole. Tailwind kennt hier weder `text-success-500` noch `text-danger-500` — im Filament-Build existiert von diesen Tönen ausschliesslich `text-danger-600`. Darum die zwei Farben direkt. */ .bidx-icon-auf { color: rgb(22 163 74); } /* grün */ .bidx-icon-ab { color: rgb(220 38 38); } /* rot */ .dark .bidx-icon-auf { color: rgb(74 222 128); } .dark .bidx-icon-ab { color: rgb(248 113 113); } /* ========================================================================== Fakten-Leiste am Kopf der Leseansichten (.rhl-*) -------------------------------------------------------------------------- Andre, 28.08.2026: „die Leseansicht ist zu gross und unuebersichtlich, alles zu weit auseinandergerissen ohne Fuehrung." Die Leiste beantwortet die wichtigsten Fragen zu einem Vertrag/Kunden auf einen Blick, bevor die Sections kommen. Eigene Klassen statt Tailwind-Utilities — siehe Regel im 10.08.-Block: Suffix-Toene (bg-success-50) und die meisten Rasterklassen liegen NICHT im Filament-CSS-Build und verpuffen still. ========================================================================== */ .rhl { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding: 0.875rem 1rem; border: 1px solid rgb(228 228 231); border-radius: 0.75rem; background-color: rgb(250 250 250); } .dark .rhl { border-color: rgb(63 63 70); background-color: rgb(39 39 42); } .rhl-item { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .rhl-label { font-size: 0.6875rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(113 113 122); } .dark .rhl-label { color: rgb(161 161 170); } .rhl-value { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: rgb(24 24 27); /* Ziffern gleich breit — sonst „tanzen" Betraege nebeneinander. `tabular-nums` als Tailwind-Klasse fehlt im Build, die CSS-Eigenschaft selbst funktioniert natuerlich trotzdem. */ font-variant-numeric: tabular-nums; } .dark .rhl-value { color: rgb(244 244 245); } .rhl-tone-ok { color: rgb(21 128 61); } .rhl-tone-warn { color: rgb(180 83 9); } .rhl-tone-bad { color: rgb(185 28 28); } .rhl-tone-info { color: rgb(29 78 216); } .dark .rhl-tone-ok { color: rgb(74 222 128); } .dark .rhl-tone-warn { color: rgb(251 191 36); } .dark .rhl-tone-bad { color: rgb(248 113 113); } .dark .rhl-tone-info { color: rgb(96 165 250); } /* -------------------------------------------------------------------------- Leseansicht dichter (28.08.2026) -------------------------------------------------------------------------- Gemessen an Vertrag #227: die Eintragszeilen selbst waren mit 24–54 px bereits schlank — der Platz ging an die SECTION-CHROME (Kopfzeile, Padding, Rahmen, Abstand). Eine Section mit sieben Zeilen Inhalt (~215 px) war insgesamt 372 px hoch. Darum hier die Huelle, nicht der Inhalt. -------------------------------------------------------------------------- */ /* Kopfzeile und Innenabstand der Sections weiter zusammen. */ .fi-resource-view-record-page .fi-section-header { padding-top: 0.625rem !important; padding-bottom: 0.5rem !important; } .fi-resource-view-record-page .fi-section-content, .fi-resource-view-record-page .fi-section-content-ctn { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } /* Section-Titel: der Filament-Default ist fuer eine Seite mit sechs Sections zu gross und erzeugt genau den „auseinandergerissen"-Eindruck. */ .fi-resource-view-record-page .fi-section-header-heading { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.02em; text-transform: uppercase; color: rgb(82 82 91); } .dark .fi-resource-view-record-page .fi-section-header-heading { color: rgb(212 212 216); } /* Zwei nebeneinanderliegende Sections sollen oben buendig stehen und nicht auf gleiche Hoehe gestreckt werden — sonst entsteht unten wieder Leerraum. */ .fi-resource-view-record-page .fi-in-component-ctn > .fi-section { align-self: start; } /* Zwei Sections nebeneinander (.cview-2col). Filaments eigener Spalten-Parameter greift hier NICHT: er rendert arbitrary-value-Klassen wie grid-cols-[repeat(var(--cols-md),minmax(0,1fr))], die im ausgelieferten Filament-CSS nicht enthalten sind. Gemessen blieben beide Sections dadurch 1168 px breit untereinander stehen. */ /* ⚠️ Der Weg zum richtigen Element war laenger als gedacht — Filament schachtelt hier DREI Ebenen, und nur die unterste traegt die Sections: div.cview-2col ← hier landet extraAttributes() └ dl ← fi-in-component-ctn (Klasse steht nicht drauf) └ div.grid ← DAS Raster mit beiden Sections als Kindern Die unterste Ebene traegt `grid-cols-[--cols-default] lg:grid-cols-[--cols-lg]` — arbitrary-value-Klassen, die im ausgelieferten Filament-CSS fehlen und deshalb still auf eine Spalte zurueckfallen. Genau deshalb standen die beiden Sections trotz Grid::make(2) untereinander. Wichtig: NUR die unterste Ebene auf zwei Spalten setzen. Setzt man das dl auf zwei Spalten, bekommt sein einziges Kind die halbe Breite und alles wird schmaler statt nebeneinander (auf dem Weg dorthin passiert). */ .cview-2col > dl > div { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: start; } @media (min-width: 1024px) { .cview-2col > dl > div { grid-template-columns: 1fr 1fr; } } /* Kinder duerfen das Raster nicht ueber ihre Mindestbreite sprengen. */ .cview-2col > dl > div > * { min-width: 0; } /* ========================================================================== Modul-Inbox: Aktionsspalte bleibt am rechten Rand stehen (.inbox-table) -------------------------------------------------------------------------- Die Inbox-Detailtabelle hat bis zu zwoelf Spalten und laeuft dadurch aus dem Bild. Gemessen am 28.08.2026 bei 1700 px Fensterbreite: Tabelle 1683 px bei 1316 px sichtbarer Breite, die rechte Kante der Aktionszelle lag bei 2035 px. Die Zeilen-Aktion „Verwerfen" gab es also seit Session 32, nur sehen konnte sie niemand (Thiemos Anfrage). Statt Spalten zu streichen bleibt die Aktionsspalte jetzt beim Scrollen stehen. ========================================================================== */ .inbox-table table th:last-child, .inbox-table table td:last-child { position: sticky; right: 0; z-index: 1; /* Hintergrund ist Pflicht — sonst scrollen die Nachbarspalten sichtbar unter der Zelle durch. */ background-color: rgb(255 255 255); /* Trennkante, damit die festgehaltene Spalte als solche lesbar ist. */ box-shadow: inset 1px 0 0 rgb(228 228 231); } .dark .inbox-table table th:last-child, .dark .inbox-table table td:last-child { background-color: rgb(24 24 27); box-shadow: inset 1px 0 0 rgb(63 63 70); } /* Kopfzeile der Tabelle hat einen eigenen Ton. */ .inbox-table table thead th:last-child { background-color: rgb(250 250 250); } .dark .inbox-table table thead th:last-child { background-color: rgb(39 39 42); }