-Page-Title (tabindex="-1"), wodurch der Browser
eine Default-Focus-Outline rendert — wirkt als unerwarteter Rahmen um
den Title. Wir blenden ihn aus, weil Headlines visuell ohnehin als
"page intro" lesbar sind, also keinen zusätzlichen Focus-Ring brauchen.
Tab-Navigation auf interaktive Elemente (Links, Buttons) ist davon
nicht betroffen, die haben weiterhin :focus-visible-Styles. */
.platform-page-panel .page-panel-title:focus,
.platform-page-panel .page-panel-title:focus-visible,
.platform-page-panel .page-panel-trail-current:focus,
.platform-page-panel .page-panel-trail-current:focus-visible {
outline: none !important;
}
/* ── DataGrid: Mono-Uppercase-Header + Trennlinien zwischen Zeilen ──────
Header-DOM laut DevTools:
mit drin, der Text liegt in
.
Wir styling alle drei, um sicher zu treffen. */
.fluent-data-grid {
background: transparent !important;
}
/* Globale Mindestbreite 30px fuer ALLE Daten-Tabellen-Spalten —
User-Direktive 2026-05-15: beim Resize-Down (FluentDataGrid) bzw.
Grid-Auto-Sizing (Custom-HTML-Tabellen) soll keine Spalte unter 30px
schrumpfen. Action-Spalten mit groesseren expliziten MinWidth-Werten
(z.B. 80-120px fuer Edit/Delete-Icon-Gruppen) bleiben unberuehrt weil
ihre Werte ohnehin > 30px sind.
1) FluentDataGrid (Bookings, Tenants, PaymentAccounts, Entities,
Categories, RecurringRules, Transfers, Loans, Uva) */
.fluent-data-grid td,
.fluent-data-grid th,
.fluent-data-grid [role="gridcell"],
.fluent-data-grid [role="columnheader"] {
min-width: 30px;
}
/* 2) Custom HTML mit .docs-row/.docs-header (Documents, Datenraum) —
CSS-Grid-Layout, Children sind die Zellen. */
.docs-header > *,
.docs-row > * {
min-width: 30px;
}
/* 3) Custom HTML mit .contacts-row/.contacts-header (ContactsCompanies,
ContactsPersons) — selbes CSS-Grid-Pattern. */
.contacts-header > *,
.contacts-row > * {
min-width: 30px;
}
/* 4) Real
-Tabellen (BankRules .rules-table, Abschluss .years-
table). */
table.rules-table td,
table.rules-table th,
table.years-table td,
table.years-table th {
min-width: 30px;
}
th.column-header {
border-bottom: 1px solid var(--brand-ink) !important;
background: transparent !important;
}
th.column-header .col-title-text,
th.column-header .col-sort-button,
th.column-header {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--brand-ink-3) !important;
}
/* Datenzeilen mit dünner Linie unten — ersetzt das Card-Chrome optisch. */
.fluent-data-grid-row {
border-bottom: 1px solid var(--brand-rule) !important;
}
/* Hover-Tint NUR für Datenzeilen — sonst würde der Header-Row beim
Mouseover auch hellgrau, was wie ein "weiß unterlegter" Block wirkt. */
tbody .fluent-data-grid-row:hover {
background: var(--brand-ink-tint-50) !important;
}
/* Header-Row + thead + table komplett transparent halten. Mehrere Selektoren
weil FluentUI je nach Render-Pfad mal das thead, mal das tr, mal das th
color setzt. */
.fluent-data-grid thead,
.fluent-data-grid thead tr,
.fluent-data-grid thead .fluent-data-grid-row {
background: transparent !important;
}
/* Stealth-FluentButton Shadow-DOM Override — der Sort-Button im Header und
die Action-Icon-Buttons (Edit-Stift) in jeder Datenzeile sind
im Stealth-Modus, deren Shadow-DOM-.control trotzdem auf neutral-layer-1
(~weiß) fällt. ::part(control) durchbricht die Encapsulation. Wir matchen
alles, was in der DataGrid drinsteckt — Sort-Buttons, Action-Buttons,
ColumnOptions-Buttons usw. */
.fluent-data-grid fluent-button::part(control) {
background: transparent !important;
border-color: transparent !important;
}
.fluent-data-grid fluent-button:hover::part(control) {
background: var(--brand-ink-tint-50) !important;
}
/* ── Toolbar-Primary-Button + Persona-Circle: Ink-Soft statt Pure-Ink ───
Beide Komponenten haben eigene Regeln im Shell, die --tr-brand-dark
referenzieren. Wir setzen nicht den Token um (würde Sidebar-Text +
andere Stellen ändern), sondern überschreiben sie gezielt — gleicher
Ink-Soft-Ton wie die collapsed Sidebar, einheitlicher dunkler Look. */
.platform-toolbar-button.is-primary {
background: var(--brand-ink-soft) !important;
border-color: var(--brand-ink-soft) !important;
}
.platform-toolbar-button.is-primary:hover:not(:disabled) {
background: var(--brand-ink-2) !important;
border-color: var(--brand-ink-2) !important;
}
.persona-circle,
.persona-circle-large {
background: var(--brand-ink-soft) !important;
}
/* ── TopBar · Brand-Wortmark als HTML-Text + Mark als BG-Image ─────────
via Shell rendert SVG sandboxed, damit kann
das eingebettete Wortmark die page-loaded DM Serif Display nicht nutzen
und fällt auf System-Serif zurück. Workaround: AppLogoUrl in MainLayout
ist jetzt nicht gesetzt → Shell rendert
mit AppName-Text. Wir stylen ihn hier in DM Serif Display und legen die
Lotwaage-Mark als linksstehendes background-image dran. Der Signal-Punkt
kommt via ::after. */
.topbar-brand-app {
font-family: 'DM Serif Display', Georgia, serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: var(--brand-ink) !important;
letter-spacing: -0.025em !important;
padding-left: 28px !important;
/* Bei 20 px Display ist die Standard-Mark mit Stroke 14/7 zu dünn —
deshalb hier die Small-Variante mit Stroke 22/11 (Brand-Guidelines
"App-Symbol · Optical Sizing"). */
background-image: url('/finevo-mark-small.svg');
background-repeat: no-repeat;
background-position: left 50%;
background-size: 20px auto;
}
.topbar-brand-app::after {
content: ".";
color: var(--brand-signal);
font-style: normal;
margin-left: 0.02em;
}
/* Tenant-Picker im TopBar — Shell setzt FluentUI-Default Segoe UI Variable.
Brand will überall Inter Tight für UI-Body. */
.topbar .tenant-trigger,
.topbar .tenant-trigger * {
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif !important;
}
/* Tenant-Picker-PopUp: die Menu-Items rendern Tenant-Name + Rolle + ggf.
Country-Code in einem .stack-vertical. Die FluentMenuItem-Default-Hoehe
(~32px) reicht aber nur fuer eine Zeile — bei zwei Zeilen (Name + Rolle)
ueberlappt die zweite Zeile in das naechste Menu-Item. User-Feedback
2026-05-15. Loesung: jedes MenuItem das eine .stack-vertical Substruktur
hat, bekommt auto-Hoehe + bisschen Padding. Greift via :has() nur fuer
die Tenant-Picker-Eintraege (andere Fluent-Menus haben keinen .stack-
vertical drin). */
fluent-anchored-region fluent-menu-item:has(.stack-vertical) {
height: auto !important;
min-height: 48px;
padding-top: 6px;
padding-bottom: 6px;
}
fluent-anchored-region fluent-menu-item .stack-vertical {
padding-block: 2px;
}
/* ── Sidebar · Einheitliche Schrift ─────────────────────────────────────
Vorherige Iteration hatte die Group-Labels (Stammdaten, Kontakte, …) in
Mono-Uppercase, Top-Level-Items (Start, Mandanten) und Sub-Items
(Gesellschaften, Zahlungskonten) in Inter Tight — visueller Bruch.
Jetzt: alles in Inter Tight. Aktiver Eintrag hebt sich nur über Color
und Font-Weight ab. */
.platform-nav .fluent-nav-link.active {
color: var(--brand-ink) !important;
font-weight: 500;
}
/* Doppelter Aktiv-Indikator-Fix: FluentNavLink zeigt beim aktiven Eintrag
ZWEI senkrechte Striche — einmal den Platform-Shell-Balken
(.fluent-nav-link.active::before, brand-ink) und zusaetzlich den FluentUI-
Default auf der inneren .positioning-region (durch unsere --accent-fill-
Overrides farbig + sichtbar geworden). Den FluentUI-Default ausblenden,
sodass nur EIN Strich bleibt. */
.platform-nav .fluent-nav-link.active .positioning-region::before {
display: none !important;
}
/* ── Sidebar · Kompakteres Spacing + 1 Größe kleinere Schrift ──────────
Default FluentNavMenu liefert ~14px / ~36–40px Item-Höhe — auf einem
FinEvo-Workspace mit vielen Gruppen + Sub-Items wirkt das zu locker.
Eine Schriftgröße kleiner (~12.5px) + reduziertes Padding pro Item
bringt die Sidebar dichter, ohne Tap-Targets unter ~32px zu drücken. */
.platform-nav .fluent-nav-link,
.platform-nav .fluent-nav-text {
font-size: 12.5px !important;
line-height: 1 !important;
}
.platform-nav .fluent-nav-link {
/* User-Direktive: 12px Abstand zwischen den Punkten — minimal-eng,
Text + Icon ohne zusaetzliches Padding. line-height:1 verhindert
FluentUI-Default-1.5 das den Item zu hoch macht. */
min-height: 12px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* FluentNavGroup-Header (Stammdaten, Buchhaltung, etc.) folgt dem
gleichen Pattern. */
.platform-nav fluent-accordion-item::part(button),
.platform-nav .fluent-accordion-item::part(button) {
min-height: 12px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-size: 12.5px !important;
line-height: 1 !important;
}
/* Icon-Größe leicht zurueck, damit das Verhaeltnis Icon:Text passt. */
.platform-nav .fluent-nav-link svg {
width: 18px !important;
height: 18px !important;
}
/* Aktive Sidebar-Page: Icon davor in Signal-Rot — gleiche Farbe wie der
Brand-Punkt am Page-Title-Ende. "Du bist hier · Signal"-Echo. Andere
Items behalten Ink. Im collapsed-Modus übersteuert die separate
collapsed-Regel weiter unten und zeigt Icons in Bone. */
.platform-nav:not(.collapsed) .fluent-nav-link.active svg,
.platform-nav:not(.collapsed) .fluent-nav-link.active svg path {
color: var(--brand-signal) !important;
fill: var(--brand-signal) !important;
}
/* ── Sidebar collapsed · M365-Style schmale dunkle Icon-Rail ───────────
Wenn der User die Sidebar einklappt (Class .collapsed), wird sie zur
schmalen dunklen Icon-Rail wie im Brand-Mock. Width 56 px (vorher hat
FluentUI die volle 240 px Breite gehalten, was visuell wie ein fetter
Balken wirkte). Hintergrund ist Ink-Soft (#1A1B22) statt Pure-Ink, das
wirkt weniger aggressiv und folgt dem Brand-Mock-Icon-Rail. */
.platform-nav.collapsed {
background: var(--brand-ink-soft) !important;
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
}
/* FluentNavLink hat eine innere .positioning-region mit FluentUI-Default-
Hintergrund (--neutral-layer-1, weiß). In collapsed-Mode steht das als
weiße Box auf dem Ink-Rail — wir machen sie transparent. */
.platform-nav.collapsed .positioning-region,
.platform-nav.collapsed .content-region {
background: transparent !important;
}
.platform-nav.collapsed .fluent-nav-link,
.platform-nav.collapsed .fluent-nav-text {
color: var(--brand-bone) !important;
}
.platform-nav.collapsed svg path,
.platform-nav.collapsed .fluent-nav-link svg {
fill: var(--brand-bone) !important;
color: var(--brand-bone) !important;
}
.platform-nav.collapsed .fluent-nav-link:hover,
.platform-nav.collapsed .fluent-nav-link.active {
background: var(--brand-ash) !important;
}
/* Toggle-Button (Hamburger) — auch in Bone wenn collapsed. */
.platform-nav.collapsed .expander svg path,
.platform-nav.collapsed .expander {
fill: var(--brand-bone) !important;
color: var(--brand-bone) !important;
}
/* ── Inline-Editing-Affordances (aus PR #14, jetzt mit Brand-Tokens) ──── */
.cell-editable {
display: block;
padding: 4px 6px;
margin: -4px -6px;
border-radius: 4px;
cursor: text;
transition: background-color 80ms ease;
}
.cell-editable:hover {
background: var(--brand-ink-tint-50);
}
/* Status-Toggle als Brand-Badge: aktiv = Ink-Outline, inaktiv = Lead/Italic.
Im neuen Brand sind Status-Badges in der Tabelle Mono-uppercase-Kapseln. */
.status-toggle {
appearance: none;
background: transparent;
border: 1px solid transparent;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background-color 80ms ease, border-color 80ms ease;
}
.status-toggle.is-active {
color: var(--brand-ink);
border-color: var(--brand-ink);
}
.status-toggle.is-inactive {
color: var(--brand-lead);
border-color: var(--brand-rule);
}
.status-toggle:hover:not(:disabled) {
background: var(--brand-ink-tint-50);
}
.status-toggle:disabled {
opacity: 0.6;
cursor: wait;
}
/* ── Filter-Chip Warn-Variante (Live-Stand / Inkl. Entwürfe) ────────────
Wird in allen Report-Pages und dem KPI-Dashboard verwendet.
Grundform + is-active-Variante. Inaktiv: orange-Outline auf Bone.
Aktiv: Signal-Orange-Füllung. */
.filter-chip-warn {
padding: 4px 12px;
background: var(--brand-bone, #F2EEE5);
border: 1px solid #D97706;
border-radius: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
color: #92400E;
cursor: pointer;
transition: all 100ms;
}
.filter-chip-warn:hover:not([disabled]) {
background: #FEF3C7;
border-color: #B45309;
}
.filter-chip-warn.is-active {
background: #D97706;
color: #FFFBEB;
border-color: #B45309;
}
.filter-chip-warn.is-active:hover:not([disabled]) {
background: #B45309;
}
/* ── FluentSearch / FluentTextField — Bone-Hintergrund statt White ──────
FluentUI v4 rendert / mit weißem
Default-Hintergrund (--neutral-fill-input-rest). Das beißt sich mit
unserem Bone-Page-Background. Wir setzen sowohl ::part(root) (der
Außen-Container mit Border + BG) als auch ::part(control) (das
eigentliche im Shadow-DOM) auf transparent, plus die
Token-Variablen für Hover/Active/Focus auf Bone-2.
Scope: alles unter .platform-body — also alle App-Seiten. Reicht
weiter als die alte Regel in reports-table.css, die nur ::part(control)
erwischt (der Außen-Container blieb dadurch weiß). */
.platform-body fluent-search,
.platform-body fluent-search::part(root),
.platform-body fluent-search::part(control),
.platform-body fluent-text-field::part(root),
.platform-body fluent-text-field::part(control) {
background: transparent !important;
background-color: transparent !important;
}
.platform-body fluent-search,
.platform-body fluent-text-field {
--neutral-fill-input-rest: transparent;
--neutral-fill-input-hover: var(--brand-bone-2, #EAE5D8);
--neutral-fill-input-active: var(--brand-bone-2, #EAE5D8);
--neutral-fill-input-focus: transparent;
--neutral-stroke-input-rest: var(--brand-rule, #D6D1C2);
}
/* ── PageSearchBar — Such-Leiste rechts unter dem Breadcrumb ────────────
Für Pages die kein Filter-Chip-Set haben aber trotzdem eine konsistente
Such-Position oben rechts brauchen (Projekte, Datenraum, Anlagen-
verzeichnis, Firmen, Personen). Bone-Background, flush mit
PagePanel oben + Card unten, kein eigener Border. */
.page-search-bar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 8px 16px;
background: var(--brand-bone, #F2EEE5);
margin: 0 0 8px 0;
}
.page-search-bar fluent-search { min-width: 240px; }
/* ── Live-Stand-Banner (FluentMessageBar Warning) ───────────────────────
Überschreibt marginTop/Bottom auf 0, damit der Banner flush unter
den Controls sitzt. Inline-Styles können zusätzlich gesetzt werden. */
.live-stand-banner {
margin: 0 0 4px 0 !important;
border-radius: 4px;
}
/* ── Blazor Error UI ─────────────────────────────────────────────────── */
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
via Shell rendert SVG sandboxed, damit kann
das eingebettete Wortmark die page-loaded DM Serif Display nicht nutzen
und fällt auf System-Serif zurück. Workaround: AppLogoUrl in MainLayout
ist jetzt nicht gesetzt → Shell rendert