/* MudBlazor Component Workarounds */
/* Common fixes for known MudBlazor issues that can be reused project-wide */

/* Kurzueberblick-Tour: Das Profil-Menue wird im Konto-Schritt programmatisch aufgeklappt.
   Damit es trotz des Tour-Spotlights (.tutorial-hole/.tutorial-fullshade liegen bei z-index
   2001) sichtbar bleibt, wird sein Popover knapp darueber gehoben. Die Sprechblase selbst
   liegt bei 2002 und im DOM nach dem Popover, bleibt also dank gleichem z-index obenauf.
   Diese Klasse wird nur waehrend des Tour-Schritts gesetzt (PopoverClass), beeinflusst die
   normale Menue-Nutzung also nicht. */
.tour-account-menu-popover {
    z-index: 2002 !important;
}

/* Fix: MudTextField double-click focus issue in nested containers (MudItem, MudPaper) */
/* Problem: Input elements inside nested MudBlazor containers require double-click to focus */
/* Solution: Ensure input elements immediately receive pointer events */
.mud-input-control .mud-input-slot textarea,
.mud-input-control .mud-input-slot input {
    pointer-events: auto !important;
}

/* Isolate input controls from parent container click handlers to prevent interference */
.mud-paper .mud-input-control,
.mud-grid-item .mud-input-control {
    isolation: isolate;
}

/* Speed up MudNavGroup expand/collapse animation (default 300ms is too slow) */
.mud-collapse-container {
    transition: grid-template-rows 75ms ease-out !important;
}

/* Stimmen-Beschreibung nur im offenen Dropdown anzeigen, nicht im geschlossenen Input-Feld */
.mud-input-slot .voice-description {
    display: none;
}

/* Modell-Auswahl Dropdown: maximale Breite begrenzen, damit lange Beschreibungen umbrechen */
.model-selector-popover,
.model-selector-list {
    max-width: 500px;
}

/* Höhe auf den Viewport begrenzen und scrollen, sobald mehr Modelle freigeschaltet sind als in
   die Fensterhöhe passen — sonst läuft die Liste unten aus dem Bild heraus und die letzten
   Provider-Gruppen (Anthropic, xAI) sind unerreichbar. Die Gruppen-Überschriften scrollen mit,
   weil die Begrenzung auf der Liste sitzt und nicht auf einzelnen Einträgen.
   Wichtig: `.mud-menu-list` mit in den Selektor und `!important` — sonst gewinnen MudBlazors
   eigene Höhen-/Overflow-Regeln auf der Liste und die Begrenzung greift gar nicht (gleiches
   Muster wie beim AppBar-Projekt-Menü weiter unten). */
.mud-menu-list.model-selector-list {
    max-height: min(70dvh, 620px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Das Popover darf die Liste nicht auf ihre Vollhöhe aufziehen, sonst scrollt nichts. */
.model-selector-popover {
    max-height: min(70dvh, 620px) !important;
    overflow: hidden !important;
}

.model-selector-list .mud-list-item {
    white-space: normal;
    word-break: break-word;
}

/* MudTextField in vertikalem Flex-Container vertikal ausdehnen (z.B. CalcAssist Vorlagen).
   Workaround statt CSS-Isolation (::deep): MudBlazor reicht das b-Scope-Attribut nicht
   zuverlaessig an seine internen DOM-Elemente weiter, daher global.
   Greift nur, wenn explizit Class="stretch-textfield" am MudTextField gesetzt ist. */
.stretch-textfield {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    margin-top: 4px !important;
}

.stretch-textfield .mud-input-control-input-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
}

.stretch-textfield .mud-input,
.stretch-textfield .mud-input.mud-input-outlined {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
}

.stretch-textfield textarea.mud-input-slot,
.stretch-textfield textarea.mud-input-slot.mud-input-root-multiline {
    height: auto !important;
    min-height: 0 !important;
    resize: none !important;
    overflow-y: auto !important;
}

/* HelperText (z.B. bei Auswahlhinweis) soll nicht mitschrumpfen */
.stretch-textfield .mud-input-helper-text {
    flex-shrink: 0;
}

/* Calcassist-Tabellen (Preisspiegel Phase 4, Angebotserstellung Phase 5):
   kompakte Zell-Paddings. Global statt scoped, weil das Scope-Attribut auf
   demselben Element wie die Tabellen-Klasse sitzt und ein Vorfahren-Selektor
   (::deep .x th) deshalb nicht greift. MudBlazors Default fuer dense
   MudSimpleTable ist 6px 16px; wir reduzieren auf 2px vertikal / 10px horizontal. */
.preisspiegel-table th,
.preisspiegel-table td,
.angebotserstellung-table th,
.angebotserstellung-table td {
    padding: 2px 10px !important;
}

/* Schmale graue Trennspalte (10px Breite) ohne Padding lassen.
   Die Inline-Styles setzen padding:0 — hier mit !important nachziehen,
   damit unsere obige !important-Regel nicht ueberschreibt. */
.preisspiegel-table th[style*="padding:0"],
.preisspiegel-table td[style*="padding:0"],
.angebotserstellung-table th[style*="padding:0"],
.angebotserstellung-table td[style*="padding:0"] {
    padding: 0 !important;
}

/* Phase-5-Angebotstabelle: NUR Pos.- und Kurztext-Spalte bleiben beim horizontalen Scrollen
   links fixiert; alle uebrigen Spalten (inkl. Menge/Einh.) scrollen normal mit.
   table-layout: fixed + width: max-content geben den Spalten feste, vom Inhalt unabhaengige
   Breiten — dadurch sitzt Kurztext exakt auf 220px hinter der 90px-Pos.-Spalte (verlaesslicher
   left-Offset, keine Ueberlappung/"Margin") und die Tabelle ist breiter als ihr Scroll-Container
   (.mud-table-container), sodass dieser horizontal scrollt. Dieser Container-Scroll ist
   Voraussetzung dafuer, dass position: sticky greift — deshalb darf am MudTable-Root KEIN
   min-width gesetzt sein, das den Container so breit wie die Tabelle macht. */
.angebotserstellung-table table {
    table-layout: fixed;
    width: max-content;
}

.angebotserstellung-table .col-frozen {
    position: sticky;
    background: var(--mud-palette-surface);
    z-index: 2; /* Body-Zellen der eingefrorenen Spalten ueber den horizontal scrollenden Zellen */
}

/* WICHTIG: MudBlazor setzt fuer den FixedHeader auf JEDE thead-th per
   `.mud-simple-table.mud-table-sticky-header * table thead * th` ein `position: sticky; top: 0;
   z-index: 1`. Die frozen-th kleben dadurch zwar korrekt bei left:0/90px, werden aber von den
   im DOM spaeter stehenden, scrollenden Header-Zellen (gleicher z-index 1) UEBERDECKT — es sah
   aus, als wuerde der Header nicht mitfixiert. Loesung: z-index der Header-Zellen ueber MudBlazors
   Wert heben. Da MudBlazors Selektor gleich/hoeher spezifisch ist, ist hier `!important` noetig. */
.angebotserstellung-table thead th {
    z-index: 3 !important; /* gesamte Header-Zeile ueber den Body-Zellen (auch beim vertikalen Scrollen) */
}

/* Kreuzungszellen: Header-th der eingefrorenen Spalten muessen ueber ALLEM liegen — ueber den
   horizontal scrollenden Header-Zellen UND ueber den vertikal scrollenden frozen-Body-Zellen. */
.angebotserstellung-table thead .col-frozen {
    z-index: 4 !important;
}

/* Breite der Pos.-Spalte bewusst hier (nicht inline am th): der left-Offset der Kurztext-Spalte
   MUSS demselben Wert folgen, sonst ueberlappen die beiden eingefrorenen Spalten. 125px fasst die
   laengste real vorkommende GAEB-Ordnungszahl ("02.00.00.00.01", 14 Zeichen) samt der 2x10px
   Zell-Paddings; mit den vorherigen 90px wurden schon 12-stellige Nummern ("02.01.3.0004")
   abgeschnitten — table-layout: fixed laesst die Nummer ueberlaufen und die darueberliegende
   sticky Kurztext-Zelle verdeckte den Rest ohne jeden Hinweis.
   ellipsis + title-Attribut am td: laufen Nummern doch einmal ueber, ist das sichtbar ("…")
   und der volle Wert per Tooltip lesbar, statt lautlos zu verschwinden. */
.angebotserstellung-table .col-pos {
    left: 0;
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.angebotserstellung-table .col-kurztext { left: 125px; }

/* Benachrichtigungs-Dropdown (Glocke): bei vielen/langen Eintraegen scrollbar machen, statt
   unten aus dem Viewport zu laufen und abgeschnitten zu werden. Die PopoverClass
   `notification-menu-popover` war referenziert, aber nie definiert — ohne max-height/overflow
   gibt es keinen Scroll-Container. Global statt scoped, weil das Popover in einem Portal am
   Wurzelknoten (MudPopoverProvider) ausserhalb der Komponente gerendert wird. */
.notification-menu-popover {
    overflow: hidden !important;
}

/* Panel als Flex-Spalte mit Viewport-Hoehe als Deckel: Hinweis + Kopfleiste bleiben fixiert,
   nur die Liste (.notification-scroll) scrollt. */
.notification-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 96px);
}

.notification-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dezente Trennlinie zwischen den einzelnen Benachrichtigungskarten — die letzte Karte
   braucht keine, damit unten kein doppelter Strich zum Panel-Rand entsteht. */
.notification-scroll .notification-item {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.notification-scroll .notification-item:last-child {
    border-bottom: none;
}

/* Zuschlags-ExpansionPanel (Calcassist Phase 5): Header ohne Padding und auf
   Hoehe der Medium-Buttons (36px) gestreckt, damit er buendig mit den
   Aktions-Buttons rechts daneben in einer Zeile sitzt. Global statt scoped,
   weil das b-Scope-Attribut auf demselben Element wie .zuschlagspanel sitzt
   und ::deep deshalb nicht greift (analog zur .preisspiegel-table Loesung
   weiter oben). */
.zuschlagspanel .mud-expand-panel-header {
    padding: 0 !important;
    min-height: 36px !important;
}

/* Toolbar-Hoehe ab Tablet/Desktop (>=600px) auf 48px reduzieren. MudBlazor 8.7 setzt in seinem
   eigenen Bundle dieselbe Regel mit 64px (gleiche Spezifitaet) — daher !important auf der
   Custom-Property, damit unser Wert unabhaengig von der Ladereihenfolge gewinnt. */
@media (min-width: 600px) {
    .mud-toolbar {
        --mud-internal-toolbar-height: 48px !important;
    }
}

/* Projekt-Auswahl (MudSelect im Nav-Drawer, Variant.Outlined): MudSelect ankert das Popover
   an einem Platzhalter INNERHALB des Input-Paddings, nicht an der aeusseren Feldkante. Dadurch
   sitzt das Popover 16px zu weit rechts (gemessen: Feld left=8px, Popover left=24px, delta=16px)
   — obwohl RelativeWidth die Breite bereits korrekt an die Feldbreite koppelt. Wir schieben die
   Position per negativem margin-left um genau diese 16px zurueck, sodass das Popover buendig unter
   dem Feld sitzt. margin-left greift bei position:absolute auf die per Inline-Style gesetzte
   left-Position und laesst die Animations-transform unberuehrt. Global statt scoped, weil das
   Popover im Portal am Wurzelknoten (MudPopoverProvider) ausserhalb der Komponente gerendert wird. */
.project-selector-popover {
    margin-left: -16px;
}

/* Projekt-Auswahl (MudMenu in der AppBar, Zwei-Spalten-Layout): MudMenu setzt — anders als
   MudSelect (dort MaxHeight-Default 300px) — KEINE Hoehenbegrenzung auf das Popover. Die Liste
   erbt per MudBlazor-Default `.mud-list{max-height:inherit;overflow-y:auto}` die Popover-Hoehe;
   fehlt sie, loest `inherit` zu „unbegrenzt" auf und die Liste laeuft unten aus dem Viewport,
   ohne scrollbar zu sein. Wir setzen eine feste (responsive) Hoehe direkt auf die Liste.
   WICHTIG: Selektor MUSS `.mud-menu-list` mit einschliessen — sonst hat unsere Regel dieselbe
   Spezifitaet wie MudBlazors `.mud-list{max-height:inherit}`, und da `MudBlazor.min.css` NACH
   dieser Datei geladen wird, gewaenne dort `inherit`. Global statt scoped, weil das Popover im
   Portal am Wurzelknoten (MudPopoverProvider) ausserhalb der Komponente gerendert wird. */
.mud-menu-list.appbar-project-menu-list {
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Projekt-Auswahl (MudMenu in der AppBar): Ohne Breitenbegrenzung waechst das Popover auf die
   Breite des laengsten Projektnamens (z.B. „73223_Grossenrich_2025-11-21_114643") und ragt auf
   Mobile ueber den rechten Viewport-Rand hinaus — die rechts sitzenden Favoriten-Sterne werden
   abgeschnitten. Wir kappen die Breite (Desktop max. 360px, Mobile Viewport minus Rand). Zusammen
   mit `min-width:0` am Namens-Span (im Markup) greift dann `text-truncate`, sodass lange Namen
   kuerzen statt die Zeile aufzublaehen, und der Stern bleibt sichtbar. Global, weil das Popover im
   Portal am Wurzelknoten ausserhalb der Komponente gerendert wird. */
.appbar-project-menu-popover {
    max-width: min(360px, calc(100vw - 24px)) !important;
}

/* MudFileUpload mit sichtbarem Activator (Import-Buttons „JSON Import"/„XML Import" in der
   Lieferantenverwaltung): Der Datei-Input liegt per InputClass absolut und transparent UEBER dem
   Activator-Button (`absolute mud-width-full mud-height-full z-10`) und ist damit das Hover-Ziel.
   Browser rendern fuer `input[type=file]` den normalen Pfeil — MudBlazors `cursor:pointer` an
   `.mud-button-root` darunter kommt deshalb nie zum Tragen. Der Parameter `InputStyle` reicht dafuer
   nicht aus: er landet in MudBlazor 8.x nicht auf dem Input-Element selbst (sonst haette der
   Inline-Style jede Stylesheet-Regel geschlagen).
   !important ist Pflicht — diese Datei wird in App.razor VOR `MudBlazor.min.css` eingebunden, bei
   gleicher Spezifitaet gewaenne sonst MudBlazor. Regel bewusst auf Wrapper, Label, Button UND Input,
   damit sie unabhaengig davon greift, welches Element am Ende oben liegt. */
.aura-file-upload,
.aura-file-upload label,
.aura-file-upload .mud-button-root,
.aura-file-upload input[type="file"] {
    cursor: pointer !important;
}

/* Laeuft ein Import, ist das MudFileUpload deaktiviert (Input traegt `disabled`) — dann der normale
   Pfeil statt der Hand, damit die Optik zum gesperrten Zustand passt. */
.aura-file-upload input[type="file"]:disabled,
.aura-file-upload:has(input[type="file"]:disabled),
.aura-file-upload:has(input[type="file"]:disabled) label,
.aura-file-upload:has(input[type="file"]:disabled) .mud-button-root {
    cursor: default !important;
}

/* Info-Tooltips der Stammdaten-Dialoge (AURA-145): maximal 200px breit.
   MudTooltip hat keinen MaxWidth-Parameter; `Class` landet in MudBlazor 8.x auf dem Tooltip selbst
   (fuer den Wrapper gibt es RootClass), die Regel greift also direkt auf `.mud-tooltip`.
   Beide Selektoren bewusst: der zweite ist die Rueckfallebene, falls die Klasse in einer kuenftigen
   MudBlazor-Version wieder am Wrapper landet.
   `text-align: left` ueberschreibt das zentrierte Standard-Layout — bei begrenzter Breite bricht der
   Text in mehrere Zeilen, zentriert waeren die Zeilenanfaenge versetzt und der Text schlecht lesbar.
   !important ist Pflicht: diese Datei wird VOR `MudBlazor.min.css` eingebunden (siehe oben). */
.aura-tooltip-narrow,
.aura-tooltip-narrow .mud-tooltip {
    max-width: 200px !important;
    text-align: left !important;
}