/*
 * Bevorzugte UI-Schrift ist Inter, lokal ausgeliefert (Konzept 3.3/37.19).
 * Sobald die Font-Dateien unter wwwroot/fonts/ abgelegt sind, hier die
 * @font-face-Regeln ergänzen. Bis dahin greift der Systemfont-Fallback.
 */
html, body {
    height: 100%;
    background-color: #F8FAFC;
}

/* Die Seite selbst scrollt nie waagerecht (breite Tabellen scrollen in ihrem eigenen Container). Sonst schiebt ein
   Tooltip am rechten Rand (z. B. "Bearbeiten" ganz rechts in der Aktionsleiste) die Seite breiter, die Scrollleiste
   erscheint, das Layout springt, der Tooltip schließt - und das Ganze flackert im Wechsel. clip statt hidden, damit
   kein Scrollcontainer entsteht und position: sticky weiter funktioniert. */
html {
    overflow-x: clip;
}

/* Native Formularfelder für die Identity-Seiten (Login/Registrierung).
   MudBlazor-Eingabekomponenten unterstützen kein Formular-Binding bei
   statischem SSR-Formular-POST, daher werden hier native Blazor-Inputs
   im Erpira-Look verwendet. */
.erpira-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.erpira-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.erpira-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0F2D4A;
}

.erpira-field--inline label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.erpira-input {
    padding: 0.65rem 0.85rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #0F2D4A;
}

.erpira-input:focus {
    outline: none;
    border-color: #0078D4;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.erpira-form .validation-message {
    color: #D32F2F;
    font-size: 0.8rem;
}

.erpira-button {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #0078D4;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.erpira-button:hover {
    background-color: #0064B5;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Seitenmenü bleibt beim Scrollen der Seite stehen (MudBlazor positioniert das responsive Drawer sonst "absolute" im Layout). */
.mud-layout .mud-drawer.mud-drawer-responsive {
    position: fixed;
    top: 0;
    height: 100%;
}

/* Eingeklapptes Seitenmenü: Der Inhalt nutzt die volle Breite. MudLayout wird statisch gerendert und bekommt den Zustand des (interaktiven)
   Drawers in AppShell nicht mit – seine Klasse bleibt auf "offen" stehen, deshalb hier über den Zustand des Drawers selbst. */
.mud-layout .mud-main-content {
    transition: margin-left 225ms cubic-bezier(0, 0, 0.2, 1);
}

.mud-layout:has(.mud-drawer-responsive.mud-drawer--closed) .mud-main-content {
    margin-left: 0;
}

.mud-layout:has(.mud-drawer-responsive.mud-drawer--closed) .mud-appbar {
    margin-left: 0;
    width: 100%;
}

/* PDF-Vorschau neben der Bestellung: bleibt beim Scrollen der Positionen sichtbar. */
.po-pdf-preview {
    position: sticky;
    top: 72px;
}

.po-pdf-frame {
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 480px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: #fff;
}

.po-light-backdrop {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Bearbeitungsdialoge neben der PDF-Vorschau (DialogPosition.CenterLeft + po-light-backdrop): mittig über der linken Spalte des
   SplitPanels statt am linken Bildschirmrand. --split-left-center setzt splitpanel.js; ohne Wert mittig im Fenster.
   Breite wie MaxWidth.Small mit FullWidth: min(600px, 100vw - 64px); der Dialog bleibt mindestens 16px vom Rand entfernt. */
.mud-dialog-container.mud-dialog-centerleft:has(> .po-light-backdrop) {
    padding-left: 0;
}

.mud-dialog-container.mud-dialog-centerleft:has(> .po-light-backdrop) > .mud-dialog {
    margin-left: clamp(16px,
        calc(var(--split-left-center, 50vw) - min(300px, 50vw - 32px)),
        calc(100vw - min(600px, 100vw - 64px) - 16px));
}

/* Tabellenzeilen per Drag & Drop sortieren (RowReorder): Tabelle mit .sortable-rows, Zeilen bekommen .sortable-row */
.sortable-rows .sortable-row-dragging {
    opacity: 0.4;
}

.sortable-rows .sortable-row-drop td {
    box-shadow: inset 0 3px 0 var(--mud-palette-primary);
}

/* Inline-Bearbeitung (InlineEditNumber / InlineEditText / InlineEditPicker) */
.inline-edit-display {
    cursor: text;
    border-radius: 4px;
    padding: 1px 3px;
    margin: 0 -3px;
    display: inline-block;
    min-width: 1.5em;
}

.inline-edit-display:hover,
.inline-edit-display:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.inline-edit-placeholder {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

.inline-edit-field {
    margin-top: 0 !important;
}

.po-extra-text {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* "Optionales Produkt" unter der Positionsbeschreibung kleiner als der Artikelname. */
.po-optional-check .mud-checkbox .mud-typography,
.po-optional-check .mud-checkbox p {
    font-size: 0.75rem !important;
    color: var(--mud-palette-text-secondary);
}

.po-rows td,
.po-rows th {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.po-rows td .mud-icon-button {
    padding: 3px;
}

/* Zahlenfeld in der Tabelle: schmal, rechtsbündig - die Spaltenbreite ändert sich beim Bearbeiten nicht */
.inline-edit-number input {
    text-align: right;
    padding-left: 0;
    padding-right: 0;
}

/* SplitPanel: zwei Spalten mit ziehbarem Trenner (Breite der linken Spalte in --split-left) */
.split-panel {
    --split-left: 50%;
    display: flex;
    align-items: stretch;
}

.split-panel .split-left {
    flex: 0 0 var(--split-left);
    min-width: 0;
}

.split-panel-single .split-left {
    flex: 1 1 100%;
}

.split-panel .split-right {
    flex: 1 1 0;
    min-width: 0;
}

.split-panel .split-handle {
    flex: 0 0 14px;
    cursor: col-resize;
    position: relative;
    touch-action: none;
}

.split-panel .split-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    border-radius: 1px;
    background: var(--mud-palette-lines-default);
}

.split-panel .split-handle:hover::before,
.split-panel .split-handle:focus-visible::before,
.split-panel.split-dragging .split-handle::before {
    background: var(--mud-palette-primary);
    width: 4px;
    left: 5px;
}

.split-panel.split-dragging {
    user-select: none;
    cursor: col-resize;
}

.split-panel.split-dragging iframe {
    pointer-events: none;
}

@media (max-width: 1279.98px) {
    .split-panel {
        flex-direction: column;
    }

    .split-panel .split-left {
        flex: none;
    }

    .split-panel .split-handle {
        display: none;
    }

    .split-panel .split-right {
        margin-top: 16px;
    }
}

/* Belegseiten mit PDF-Vorschau (SplitPanel mit ScrollPanes): schmalerer Kopfbereich, und das Panel füllt die restliche
   Fensterhöhe - links Beleg, rechts Vorschau scrollen getrennt, Reiter, Breadcrumb und Titel bleiben stehen. */
.page-content:has(> .split-panel-scroll) {
    padding-top: 12px !important;
}

.page-content:has(> .split-panel-scroll) > .module-tabs {
    margin: -4px 0 8px;
}

.page-content:has(> .split-panel-scroll) > nav > .mud-breadcrumbs {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 4px !important;
}

.page-content:has(> .split-panel-scroll) > .mb-4 {
    margin-bottom: 12px !important;
}

@media (min-width: 1280px) {
    .page-content:has(> .split-panel-scroll) {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--mud-appbar-height, 64px));
        padding-bottom: 0 !important;
    }

    .page-content:has(> .split-panel-scroll) > * {
        flex: 0 0 auto;
    }

    .page-content:has(> .split-panel-scroll) > .split-panel-scroll {
        flex: 1 1 0;
        min-height: 0;
    }

    .split-panel-scroll > .split-left,
    .split-panel-scroll > .split-right {
        overflow-y: auto;
        padding-bottom: 16px;
    }

    /* Rechts füllt die Vorschau die Spaltenhöhe: Spalte -> Tabs -> Tab-Inhalt -> Vorschau -> iframe, jeweils als Flex-Spalte. */
    .split-panel-scroll > .split-right,
    .split-panel-scroll > .split-right > .mud-tabs,
    .split-panel-scroll > .split-right .mud-tabs-panels,
    .split-panel-scroll .mud-tab-panel:has(> .po-pdf-preview),
    .split-panel-scroll .po-pdf-preview {
        display: flex;
        flex-direction: column;
    }

    .split-panel-scroll > .split-right > *,
    .split-panel-scroll > .split-right .mud-tabs-panels,
    .split-panel-scroll > .split-right .mud-tabs-panels > *,
    .split-panel-scroll .po-pdf-preview {
        flex: 1 0 auto;
    }

    .split-panel-scroll > .split-right .mud-tabs-tabbar {
        flex: 0 0 auto;
    }

    .split-panel-scroll .po-pdf-preview {
        position: static;
    }

    /* Die Vorschau füllt die Restfläche und scrollt in sich (PdfPreview), statt mit ihren Seiten die Spalte zu verlängern. */
    .split-panel-scroll .po-pdf-frame {
        flex: 1 1 0;
        height: auto;
        min-height: 320px;
    }
}

/* PDF-Vorschau mit pdf.js (PdfPreview.razor): Seiten als Blätter auf grauem Grund, Inhalt setzt pdfpreview.js. */
.pdf-preview {
    overflow: auto;
    /* Platz für die Scrollleiste von Anfang an - sonst ändert ihr Erscheinen die Breite und löst ein zweites Zeichnen aus. */
    scrollbar-gutter: stable;
    background: var(--mud-palette-background-gray);
}

.pdf-preview:empty::before {
    content: "Vorschau wird geladen …";
    display: block;
    padding: 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.pdf-preview-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.pdf-preview-page {
    display: block;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.pdf-preview-error {
    padding: 16px;
    color: var(--mud-palette-error);
    font-size: 0.875rem;
}

/* Rich-Text-Editor für Notizen (RichTextEditor) und die formatierte Anzeige */
.rte {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}

.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

.rte-toolbar button {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.rte-toolbar button:hover,
.rte-toolbar button:focus-visible {
    border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.rte-separator {
    width: 1px;
    height: 18px;
    background: var(--mud-palette-lines-inputs);
    margin: 0 2px;
}

.rte-editor {
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
    padding: 10px 12px;
    outline: none;
    line-height: 1.5;
}

.rte-editor:focus {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.rte-editor:empty::before,
.rte-editor:has(> br:only-child)::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-secondary);
}

.rte-editor p,
.rte-view p {
    margin: 0 0 0.5em;
}

.rte-editor ul,
.rte-editor ol,
.rte-view ul,
.rte-view ol {
    margin: 0 0 0.5em;
    padding-left: 1.6em;
}

.rte-view > :last-child {
    margin-bottom: 0;
}

/* Einleitung und Schlusstext von Belegen (DocumentTextEditor) und ihre Anzeige mit Bildern */
.dte-editor img,
.dte-view img {
    max-width: 100%;
    height: auto;
}

.dte-editor img {
    cursor: pointer;
}

.dte-editor img.dte-selected {
    outline: 2px solid var(--mud-palette-primary);
}

/* Signatur-Editor: Fläche wie in einer Mail (weiß, Calibri), auch im dunklen Design. */
.sig-editor {
    min-height: 140px;
    max-height: 420px;
    background: #fff;
    color: #1f2933;
    font-family: Calibri, Arial, sans-serif;
    font-size: 11pt;
}

.sig-editor img {
    max-width: 100%;
    cursor: pointer;
}

.sig-editor img.sig-selected {
    outline: 2px solid var(--mud-palette-primary);
}

.sig-editor a {
    color: #1e4f8a;
}

.sig-toolbar select {
    height: 28px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
}

.sig-color-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    font-weight: 600;
    cursor: pointer;
}

.sig-color-label input {
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* Kontakthistorie (CRM): Einträge mit Symbol links, Text auf wenige Zeilen gekürzt bis "mehr anzeigen". */
.interaction-timeline {
    display: flex;
    flex-direction: column;
}

.interaction-entry {
    display: flex;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.interaction-entry:last-child {
    border-bottom: none;
}

.interaction-entry--highlight {
    background: var(--mud-palette-action-default-hover);
    outline: 2px solid var(--mud-palette-primary);
}

.interaction-entry--document {
    padding: 4px 8px;
    align-items: center;
}

.interaction-document-icon {
    margin-left: 6px;
    margin-right: 6px;
}

.interaction-body {
    flex: 1 1 auto;
    min-width: 0;
}

.interaction-text {
    margin-top: 4px;
    overflow-wrap: anywhere;
}

/* Verkaufschance: Phasen als Schritte (erreichte Phasen in ihrer Farbe, die aktuelle hervorgehoben). */
.opportunity-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.opportunity-stage {
    flex: 1 1 120px;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}

.opportunity-stage:disabled {
    cursor: default;
}

.opportunity-stage--reached {
    background: var(--stage-color);
    border-color: var(--stage-color);
    color: #fff;
    opacity: 0.6;
}

.opportunity-stage--current {
    background: var(--stage-color);
    border-color: var(--stage-color);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

/* Pipeline (CRM): Spalten je Phase nebeneinander, bei vielen Phasen horizontal scrollbar. */
.pipeline-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 8px;
}

.pipeline-column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
}

.pipeline-column--closing {
    background: transparent;
    gap: 12px;
}

.pipeline-column-head {
    padding: 8px 10px;
    border-top: 4px solid var(--mud-palette-lines-default);
    border-radius: 6px 6px 0 0;
}

.pipeline-count {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

.pipeline-zone {
    min-height: 120px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pipeline-zone--won,
.pipeline-zone--lost {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
    min-height: 90px;
}

.pipeline-zone--won {
    border-color: var(--mud-palette-success);
}

.pipeline-zone--lost {
    border-color: var(--mud-palette-error);
}

.pipeline-card {
    padding: 8px 10px;
    cursor: grab;
    flex-shrink: 0;
}

/* Ab Tablet-Breite füllt das Board die restliche Fensterhöhe; jede Spalte scrollt für sich, der Spaltenkopf (Phase, Summen)
   bleibt stehen. Der horizontale Scrollbalken des Boards ist damit immer sichtbar. */
@media (min-width: 960px) {
    .page-content:has(> .pipeline-board) {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--mud-appbar-height, 64px));
        padding-bottom: 0 !important;
    }

    .page-content:has(> .pipeline-board) > * {
        flex: 0 0 auto;
    }

    .page-content:has(> .pipeline-board) > .pipeline-board {
        flex: 1 1 0;
        min-height: 0;
        padding-bottom: 16px;
    }

    .pipeline-board > .pipeline-column {
        max-height: 100%;
        min-height: 0;
    }

    .pipeline-column-head {
        flex: 0 0 auto;
    }

    .pipeline-column > .pipeline-zone:not(.pipeline-zone--won):not(.pipeline-zone--lost) {
        flex: 0 1 auto;
        min-height: 120px;
        overflow-y: auto;
    }
}

.pipeline-card:hover {
    border-color: var(--mud-palette-primary);
}

/* Mehrere Zugewiesene einer Aufgabe nebeneinander (TaskAssigneesLabel). */
.task-assignees {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    vertical-align: middle;
}

/* Board: nutzt das Spalten-Layout der Pipeline, mit breiteren Spalten für Projektkarten samt Aufgabenliste. */
.pipeline-column.board-column {
    flex-basis: 300px;
}

.board-card--done {
    opacity: 0.6;
}

/* Geplant: "Frühestens ab" liegt in der Zukunft – sichtbar, aber zurückgenommen. */
.board-card--planned {
    opacity: 0.7;
    border-style: dashed;
}

.board-planned-label {
    display: inline-block;
    margin-top: 2px;
    margin-right: 4px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

/* Wochenansicht: Tage teilen sich die Breite, bei schmalem Fenster scrollt die Woche horizontal. */
.pipeline-board.board-week > .pipeline-column.board-week-day {
    flex: 1 1 0;
    min-width: 150px;
}

.board-week-day--weekend {
    opacity: 0.85;
}

.board-week-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.board-week-column {
    margin-right: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.board-week-column::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--board-column-color);
}

.board-card-menu {
    margin: -6px -8px 0 0;
}

.board-card-tasks {
    margin-top: 6px;
}

.board-task-row {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.board-task-title {
    cursor: pointer;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-task-check {
    margin: -6px 0 0 -8px;
}

.board-people {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.board-people-count {
    margin-left: 6px;
    font-weight: 600;
}

.board-people-overdue {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
}

.interaction-text--clamped {
    max-height: 7.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent);
    mask-image: linear-gradient(to bottom, black 65%, transparent);
}

/* Administration: Tab-Leiste und Titel bleiben stehen, nur der Inhalt der Unterseite scrollt.
   Höhe = Fenster minus AppBar minus Padding der Seite (2 x 24px). */
.admin-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height, 64px) - 48px);
    min-height: 420px;
}

.admin-page > .admin-tabs {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-tabs .mud-tabs-panels {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Links die Liste der Unterseiten, rechts der scrollende Inhalt */
.admin-panel {
    display: flex;
    align-items: stretch;
    gap: 24px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 24px;
}

.admin-subnav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.admin-subnav .admin-subnav-item {
    justify-content: flex-start;
    text-align: left;
    text-transform: none;
}

.admin-content {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    /* Platz für den Schatten der Bereiche, damit er nicht abgeschnitten wird */
    padding: 2px 8px 24px 2px;
}

@media (max-width: 900px) {
    /* Schmal: Liste über dem Inhalt, die ganze Fläche darunter scrollt gemeinsam */
    .admin-panel {
        flex-direction: column;
        gap: 16px;
        overflow-y: auto;
    }

    .admin-subnav {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    .admin-content {
        flex: 0 0 auto;
        overflow-y: visible;
    }
}

/* Text in Deutsch und Englisch (BilingualTextField) */
.bilingual-field {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 12px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

/* Nebeneinander (z. B. Fußzeile links/Mitte/rechts) teilen sich die Felder die Breite. */
.mud-stack-row > .bilingual-field {
    flex: 1 1 0;
}

.bilingual-field-label {
    display: block;
    margin-bottom: 6px;
}

/* Globale Suche in der (dunklen) AppBar: Mud-Eingabefelder sind für helle Flächen ausgelegt
   (dunkler Text, dunkle Rahmenfarbe) - auf dem dunklen AppBar-Hintergrund wäre das dunkel auf
   dunkel. Farbe daher lokal überschreiben statt global. !important, weil das eigentliche
   <input>-Element von Haus aus nicht automatisch die Textfarbe der umgebenden Elemente erbt. */
.global-search {
    --mud-palette-lines-inputs: rgba(255, 255, 255, .4);
    --mud-palette-action-default: rgba(255, 255, 255, .7);
}

.global-search .mud-input-outlined-border {
    background-color: rgba(255, 255, 255, .08);
}

.global-search input {
    color: #fff !important;
    caret-color: #fff;
}

.global-search input::placeholder {
    color: rgba(255, 255, 255, .7) !important;
    opacity: 1;
}

.global-search .mud-icon-root {
    color: rgba(255, 255, 255, .85);
}

/* Handy: Die Suche füllt den Platz zwischen Menüknopf und den Symbolen rechts (statt fester Breite). */
@media (max-width: 599.98px) {
    .global-search {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Weniger Seitenrand, kleinere Seitentitel (Belegnummern passen in eine Zeile). */
    .page-content {
        padding: 12px !important;
    }

    .page-content .mud-typography-h4 {
        font-size: 1.6rem;
    }

    /* Reiterleiste: inaktive Reiter nur mit Symbol, der aktive mit Namen - so passen alle Reiter eines Moduls auf den Bildschirm. */
    .module-tabs {
        margin: -4px 0 12px;
    }

    .module-tab {
        padding: 10px 12px 8px;
    }

    .module-tab:not(.module-tab-active) > span {
        display: none;
    }
}

/* ---- Wissensdatenbank ---- */

/* Inhalt einer Seite (Ansicht und Editor) */
.kb-content {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.kb-content > :first-child {
    margin-top: 0;
}

.kb-content p,
.kb-content ul,
.kb-content ol,
.kb-content pre,
.kb-content blockquote,
.kb-content table,
.kb-content .kb-callout {
    margin: 0 0 0.8em;
}

.kb-content h2,
.kb-content h3,
.kb-content h4 {
    margin: 1.2em 0 0.5em;
    line-height: 1.3;
    font-weight: 600;
    scroll-margin-top: 80px;
}

.kb-content h2 {
    font-size: 1.5rem;
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.kb-content h3 {
    font-size: 1.25rem;
}

.kb-content h4 {
    font-size: 1.05rem;
}

.kb-content ul,
.kb-content ol {
    padding-left: 1.6em;
}

.kb-content a {
    color: var(--mud-palette-primary);
}

.kb-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

.kb-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.2em 0;
}

/* Seitenumbruch: am Bildschirm gestrichelte Linie mit Beschriftung, beim Drucken (und im PDF) eine neue Seite */
.kb-content hr.kb-pagebreak {
    position: relative;
    overflow: visible;
    border-top: 2px dashed var(--mud-palette-lines-inputs);
    margin: 2em 0;
}

.kb-content hr.kb-pagebreak::after {
    content: "Seitenumbruch";
    position: absolute;
    left: 50%;
    top: -0.75em;
    transform: translateX(-50%);
    padding: 0 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

.kb-content blockquote {
    border-left: 4px solid var(--mud-palette-lines-inputs);
    padding: 0.2em 0 0.2em 1em;
    color: var(--mud-palette-text-secondary);
}

.kb-content code {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
}

.kb-content pre {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.9em;
    padding: 0.8em 1em;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    overflow-x: auto;
    white-space: pre-wrap;
}

.kb-content pre code {
    padding: 0;
    background: none;
}

.kb-content table {
    border-collapse: collapse;
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

.kb-content th,
.kb-content td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    vertical-align: top;
    min-width: 80px;
}

.kb-content th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    text-align: left;
}

.kb-content mark,
.kb-result mark {
    background: #fff3a0;
    color: #000;
    padding: 0 1px;
    border-radius: 2px;
}

/* Hinweisboxen */
.kb-content .kb-callout {
    padding: 0.7em 1em 0.7em 2.8em;
    border-radius: 6px;
    border-left: 4px solid;
    position: relative;
}

.kb-content .kb-callout::before {
    position: absolute;
    left: 0.8em;
    top: 0.65em;
    font-size: 1.1em;
}

.kb-content .kb-callout > :last-child {
    margin-bottom: 0;
}

.kb-content .kb-callout-info { background: rgba(33, 150, 243, 0.08); border-color: #2196f3; }
.kb-content .kb-callout-info::before { content: "\2139\FE0F"; }
.kb-content .kb-callout-tip { background: rgba(76, 175, 80, 0.09); border-color: #4caf50; }
.kb-content .kb-callout-tip::before { content: "\1F4A1"; }
.kb-content .kb-callout-warning { background: rgba(255, 152, 0, 0.1); border-color: #ff9800; }
.kb-content .kb-callout-warning::before { content: "\26A0\FE0F"; }
.kb-content .kb-callout-danger { background: rgba(244, 67, 54, 0.09); border-color: #f44336; }
.kb-content .kb-callout-danger::before { content: "\26D4"; }

/* Checklisten */
.kb-content ul.kb-checklist {
    list-style: none;
    padding-left: 0.2em;
}

.kb-content ul.kb-checklist > li {
    position: relative;
    padding-left: 1.8em;
}

.kb-content ul.kb-checklist > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    box-sizing: border-box;
}

.kb-content ul.kb-checklist > li[data-checked="true"]::before {
    content: "\2713";
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: #fff;
    font-size: 0.8em;
    line-height: 1em;
    text-align: center;
    font-weight: 700;
}

.kb-content ul.kb-checklist > li[data-checked="true"] {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

/* Seitenansicht mit Inhaltsverzeichnis rechts */
.kb-page-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.kb-page-body {
    flex: 1;
    min-width: 0;
    max-width: 920px;
}

.kb-toc {
    flex: 0 0 220px;
    position: sticky;
    top: 80px;
    font-size: 0.875rem;
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.kb-toc-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.kb-toc a {
    display: block;
    padding: 3px 0;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.kb-toc a:hover {
    color: var(--mud-palette-primary);
}

.kb-toc .kb-toc-3 { padding-left: 12px; }
.kb-toc .kb-toc-4 { padding-left: 24px; font-size: 0.8rem; }

@media (max-width: 1100px) {
    .kb-toc {
        display: none;
    }
}

/* Kapitelbaum */
.kb-tree-panel {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    position: sticky;
    top: 72px;
}

.kb-tree-item {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 6px;
    min-height: 32px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.kb-tree-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.kb-tree-selected {
    background: var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.1));
    font-weight: 600;
}

a.kb-tree-item,
.kb-tree-link {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 4px 6px 4px 0;
    color: inherit;
    text-decoration: none;
}

.kb-tree-toggle {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.kb-tree-toggle:disabled {
    cursor: default;
}

.kb-tree-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-tree-chapter {
    font-weight: 500;
}

/* Kapitelkacheln */
.kb-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.kb-tile {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: box-shadow 0.15s;
}

.kb-tile:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kb-tile-title {
    font-weight: 600;
}

.kb-tile-description {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-tile-count {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Editor */
.kbe {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
}

.kbe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
    position: sticky;
    top: 64px;
    z-index: 2;
}

.kbe-toolbar button,
.kbe-toolbar select {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.kbe-toolbar select {
    border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.kbe-toolbar button:hover,
.kbe-toolbar button:focus-visible {
    border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
}

.kbe-toolbar button[hidden],
.kbe-toolbar span[hidden] {
    display: none;
}

.kbe-separator {
    width: 1px;
    height: 20px;
    background: var(--mud-palette-lines-inputs);
    margin: 0 3px;
}

.kbe-editor {
    min-height: 360px;
    padding: 16px 20px;
    outline: none;
}

.kbe-editor:focus {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.kbe-editor.kbe-dragover {
    box-shadow: inset 0 0 0 3px var(--mud-palette-success);
    background: rgba(76, 175, 80, 0.05);
}

.kbe-editor ul.kb-checklist > li::before {
    cursor: pointer;
}

.kbe-editor img {
    cursor: pointer;
}

/* Markiertes Bild mit Anfasser an der unteren rechten Ecke zum Ändern der Breite */
.kbe-editor img.kbe-selected {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
    border-bottom-right-radius: 0;
    border-right: 6px solid var(--mud-palette-primary);
    border-bottom: 6px solid var(--mud-palette-primary);
}

.kbe-editor img.kbe-resize-corner,
.kbe-editor.kbe-resizing,
.kbe-editor.kbe-resizing img {
    cursor: nwse-resize;
}

.kbe-editor.kbe-resizing {
    user-select: none;
}

.kbe-editor img.kbe-cropping {
    opacity: 0.5;
}

/* Zuschneide-Dialog: Bild mit verschiebbarem Rahmen, außerhalb abgedunkelt */
.kbe-crop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
}

.kbe-crop-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
    padding: 16px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.kbe-crop-title {
    font-weight: 500;
}

.kbe-crop-stage {
    position: relative;
    align-self: center;
    overflow: hidden;
    line-height: 0;
    user-select: none;
    touch-action: none;
}

.kbe-crop-stage img {
    display: block;
    max-width: min(1100px, calc(100vw - 64px));
    max-height: calc(100vh - 200px);
}

.kbe-crop-box {
    position: absolute;
    cursor: move;
    outline: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.kbe-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: #fff;
}

.kbe-crop-nw { left: 0; top: 0; cursor: nwse-resize; }
.kbe-crop-n { left: 50%; top: 0; cursor: ns-resize; }
.kbe-crop-ne { left: 100%; top: 0; cursor: nesw-resize; }
.kbe-crop-e { left: 100%; top: 50%; cursor: ew-resize; }
.kbe-crop-se { left: 100%; top: 100%; cursor: nwse-resize; }
.kbe-crop-s { left: 50%; top: 100%; cursor: ns-resize; }
.kbe-crop-sw { left: 0; top: 100%; cursor: nesw-resize; }
.kbe-crop-w { left: 0; top: 50%; cursor: ew-resize; }

.kbe-crop-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kbe-crop-size {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.kbe-crop-actions button {
    padding: 5px 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.kbe-crop-actions button:hover {
    background: var(--mud-palette-action-default-hover);
}

.kbe-crop-actions button.kbe-crop-apply {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.kbe-uploading {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.kbe-hint {
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.kb-edit-title input {
    font-size: 1.5rem;
    font-weight: 500;
}

/* Versionen und Vergleich */
.kb-versions {
    display: flex;
    gap: 16px;
    min-height: 60vh;
}

.kb-versions-list {
    flex: 0 0 280px;
    max-height: 70vh;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.kb-versions-detail {
    flex: 1;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.kb-diff {
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 0.95rem;
}

.kb-diff-ins {
    background: rgba(76, 175, 80, 0.22);
    text-decoration: none;
    border-radius: 2px;
}

.kb-diff-del {
    background: rgba(244, 67, 54, 0.2);
    text-decoration: line-through;
    border-radius: 2px;
}

/* Druckansicht einer Seite: nur Titel und Inhalt */
@media print {
    .mud-appbar,
    .mud-drawer,
    .split-left,
    .split-handle,
    .kb-no-print,
    .mud-snackbar-provider {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
    }

    .split-panel .split-right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .kb-content pre,
    .kb-content table,
    .kb-content img,
    .kb-content .kb-callout {
        break-inside: avoid;
    }

    .kb-content hr.kb-pagebreak {
        break-after: page;
        border: none;
        margin: 0;
    }

    .kb-content hr.kb-pagebreak::after {
        content: none;
    }
}

/* Reiterleiste eines Menüpunkts über den Listenseiten (ModuleTabs.razor), optisch wie MudTabs mit Border. */
.module-tabs {
    display: flex;
    /* Nur waagerecht scrollen (schmale Fenster); overflow-x allein erzwingt sonst auch einen senkrechten Balken. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin: -8px 0 24px;
}

.module-tabs::-webkit-scrollbar {
    display: none;
}

.module-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 16px 10px;
    border-bottom: 2px solid transparent;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: var(--mud-typography-button-text-transform);
    line-height: var(--mud-typography-button-lineheight);
}

.module-tab:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.module-tab-active,
.module-tab-active:hover {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* Menüpunkt eines Moduls bleibt markiert, solange eine seiner Seiten offen ist (NavMenu.razor). */
.erp-nav-active .mud-nav-link,
.mud-nav-link.erp-nav-active {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* MudBlazor überträgt den Style eines Datumsfelds (z. B. max-width:180px) auch auf das aufklappende Kalenderfenster,
   das dadurch abgeschnitten wird. Das Kalenderfenster nimmt immer die Breite, die es braucht. */
.mud-picker-popover-paper {
    max-width: none !important;
    width: auto !important;
}

/* Vorschau eines gewählten Belegs neben dem Erfassungsdialog (ReceiptPreview.razor). */
.receipt-preview {
    height: 70vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.receipt-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.receipt-preview img {
    max-width: 100%;
    height: auto;
}

/* Gruppenüberschrift in der Kontoauswahl (AccountSelect.razor): nicht wählbar, aber gut lesbar. */
.mud-list .mud-list-item.mud-list-item-disabled:has(.account-select-group),
.mud-list .mud-list-item.mud-list-item-disabled:has(.account-select-group) * {
    font-weight: 600;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 1 !important;
    cursor: default;
}

/* Fällige offene Posten (OpenItems.razor): ganze Zeile rot hinterlegt. */
.mud-table-row.open-item-due > td {
    background-color: rgba(var(--mud-palette-error-rgb), 0.18);
}

.mud-table-row.open-item-due:hover > td {
    background-color: rgba(var(--mud-palette-error-rgb), 0.26);
}

/* Unterpunkt eines Moduls im linken Menü (NavTab.InMenu): eingerückt unter dem Modul, mit kleinerem Symbol. */
.erp-nav-sub .mud-nav-link,
.mud-nav-link.erp-nav-sub {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 40px;
    font-size: 0.875rem;
}

.erp-nav-sub .mud-nav-link .mud-nav-link-icon,
.mud-nav-link.erp-nav-sub .mud-nav-link-icon {
    font-size: 1.15rem;
}

.erp-nav-active .mud-nav-link .mud-nav-link-icon,
.mud-nav-link.erp-nav-active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Kopfdaten eines Belegs (Kunde, Datum, Zahlungsziel …) kompakt als Label/Wert-Raster.
   Die Spaltenzahl richtet sich nach der tatsächlichen Breite des Bereichs, nicht nach dem Fenster –
   neben der PDF-Vorschau werden es also weniger, aber schmale Spalten statt hoher Viertelspalten. */
.mud-grid.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 24px;
    width: 100%;
    margin: 0 0 16px 0;
}

.mud-grid.info-grid > .mud-grid-item {
    max-width: none;
    flex-basis: auto;
    padding: 0;
    min-width: 0;
    line-height: 1.35;
}

/* Einträge nur mit xs="12" (Beschreibung, Notizen) laufen über die ganze Breite. */
.mud-grid.info-grid > .mud-grid-item-xs-12:not([class*="mud-grid-item-sm-"]):not([class*="mud-grid-item-md-"]) {
    grid-column: 1 / -1;
}

.mud-grid.info-grid > .mud-grid-item > .mud-typography-caption {
    display: block;
    line-height: 1.35;
}

.mud-grid.info-grid > .mud-grid-item > .mud-typography-body1 {
    font-size: 0.875rem;
    line-height: 1.35;
}

/* Aktionsleiste (ActionBar / ActionGroup / ActionIcon in Components/Shared). */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-left: auto;
}

/* Segmentleiste: MudButtonGroup verbindet die Schaltflächen; hier nur einheitlicher neutraler Rahmen,
   die Farbe (Primary, Success, Error …) trägt allein Text und Icon. */
/* Die Leiste bricht nur als Ganzes in der ActionBar um; auf sehr schmalen Bildschirmen wird sie waagerecht scrollbar. */
.action-group.mud-button-group-root {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    box-shadow: none;
}

/* Nur die äußeren Ecken der Leiste sind rund. MudButtonGroup macht das zwar selbst, hier aber mit höherer
   Spezifität abgesichert, weil MudBlazor.min.css nach app.css geladen wird. */
.action-group.mud-button-group-root > .mud-button-root:not(:last-child),
.action-group.mud-button-group-root > :not(:last-child) .mud-button-root {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.action-group.mud-button-group-root > .mud-button-root:not(:first-child),
.action-group.mud-button-group-root > :not(:first-child) .mud-button-root {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.action-group .mud-button-root.mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
    white-space: nowrap;
}

/* Hover-/Fokusrahmen liegt über dem Nachbarn statt darunter. */
.action-group .mud-button-root:hover,
.action-group .mud-button-root:focus-visible {
    position: relative;
    z-index: 1;
}

/* Aufgeklappte Details unter einer Tabellenzeile (ExpandToggle + ChildRowContent). */
td.expand-detail {
    background: var(--mud-palette-background-gray);
    padding: 8px 16px 12px 48px !important;
}

td.expand-detail .mud-table-root td,
td.expand-detail .mud-simple-table td {
    border-bottom-color: var(--mud-palette-lines-default);
}

td.expand-detail tr.expand-detail-match td {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
}

/* Alle mehrzeiligen Textfelder lassen sich am unteren Rand von Hand vergrößern. MudBlazor setzt resize: none und wird
   nach dieser Datei geladen, daher die doppelte Klasse für die höhere Spezifität. */
.mud-input > textarea.mud-input-root.mud-input-root,
textarea {
    resize: vertical;
    min-height: 1lh;
}

/* Große Textfelder mit hoher Mindesthöhe (z. B. im Produktdialog). */
.resizable-textarea .mud-input > textarea.mud-input-root {
    min-height: 8lh;
}

/* Namensschild eines Benutzers (UserLabel.razor): kleines Profilbild vor dem Namen, passt in Tabellenzeilen und Fließtext. */
.user-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    max-width: 100%;
}

.user-label .user-label-photo {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 0.65rem;
}

.user-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kundenkarte (Kontakte > Karte): Karte links, Liste rechts; schmal untereinander. */
.partner-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    height: calc(100vh - 260px);
    min-height: 420px;
}

.partner-map {
    height: 100%;
    min-height: 320px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    z-index: 0;
}

.partner-map-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.partner-map-entries {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.partner-map-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.partner-map-popup a {
    color: var(--mud-palette-primary);
}

.partner-map-popup-meta {
    color: #666;
    font-size: 0.75rem;
    margin: 2px 0 4px;
}

@media (max-width: 959.98px) {
    .partner-map-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 60vh 360px;
        height: auto;
    }
}

/* Zusammenführen von Kontakten: Auswahl je Angabe und Vorschau */
.partner-merge-choice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    font-size: .875rem;
}

.partner-merge-choice:hover,
.partner-merge-choice:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.partner-merge-choice.selected {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .08);
}

.partner-merge-preview th {
    width: 38%;
    vertical-align: top;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.partner-merge-preview td {
    overflow-wrap: anywhere;
}

/* Reisekostenabrechnung: kompakte, Excel-ähnliche Tabelle mit nativen Eingabefeldern */
.travel-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.travel-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    white-space: nowrap;
}

.travel-grid th,
.travel-grid td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    vertical-align: middle;
}

.travel-grid thead th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.travel-grid .travel-grid-group th {
    padding-top: 4px;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
    font-size: .6875rem;
    font-weight: 400;
}

.travel-grid tfoot td {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    border-bottom: none;
}

.travel-grid .num { text-align: right; }
.travel-grid .check { text-align: center; }
.travel-grid .strong { font-weight: 600; }

.travel-grid-empty {
    padding: 16px 8px !important;
    color: var(--mud-palette-text-secondary);
    white-space: normal;
}

.travel-grid input:not([type=checkbox]),
.travel-grid select {
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 4px;
    min-height: 28px;
}

.travel-grid input:not([type=checkbox]):hover,
.travel-grid select:hover {
    border-color: var(--mud-palette-lines-inputs);
}

.travel-grid input:not([type=checkbox]):focus,
.travel-grid select:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.travel-grid select option { background: var(--mud-palette-surface); }
.travel-grid input[type=number] { width: 72px; text-align: right; }
.travel-grid input.wide { width: 100%; min-width: 220px; }
.travel-grid input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--mud-palette-primary); }