html, body {
    font-family: 'Roboto', sans-serif;
}

.mud-appbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mud-drawer {
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/*
 * Sticky-Listen-Layout (Spendenboxen, Safebags, ...): MudCard nimmt den
 * verfuegbaren Viewport-Bereich ein, intern flex-column. Header (oben) und
 * Pager (unten) sind fix, dazwischen scrollt nur der Tabellen-Body.
 *
 * Hoehe = Viewport-Hoehe - AppBar-Hoehe - sichtbare Page-Elemente daruber.
 * AppBar: 64px (Desktop) / 56px (< 600px). Daruber im Listen-Layout:
 *   - mt-4 vom MudContainer (16px)
 *   - h4-Page-Title-Zeile + chevron (~40px)
 *   - mb-4 vom h4-Block (16px)
 *   = ~72px zusaetzlich.
 * Auf Mobile zusaetzlich Safe-Area-Insets (Notch oben, Home-Indicator unten).
 */
.spox-list-sticky {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px - 72px);
    max-height: calc(100vh - 64px - 72px);
}

@media (max-width: 599.95px) {
    .spox-list-sticky {
        height: calc(100vh - 56px - 72px);
        max-height: calc(100vh - 56px - 72px);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .spox-list-sticky {
        height: calc(100vh - 64px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: calc(100vh - 64px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    @media (max-width: 599.95px) {
        .spox-list-sticky {
            height: calc(100vh - 56px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            max-height: calc(100vh - 56px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }
    }
}

/* Header oben fix. */
.spox-list-sticky .mud-card-header {
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    z-index: 2;
}

/* Content nimmt den Rest und kapselt den scrollenden Tabellen-Body.
   Hinweis: padding bleibt hier auf MudBlazor-Default. Auf Mobile setzt
   Aturis.SPOX.App/wwwroot/app.css das padding zusaetzlich auf 0, damit
   die Tabelle dort buendig an die Card-Kante klebt und mehr Platz fuer
   Listen-Items entsteht. */
.spox-list-sticky .mud-card-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* MudDataGrid: flex-column, sodass Tabellen-Container scrollt und Pager am Boden bleibt. */
.spox-list-sticky .mud-data-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Scrollender Tabellen-Bereich. MudDataGrid rendert den scrollbaren Body
   in einem div mit class mud-table-container. */
.spox-list-sticky .mud-table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Pager unten fix. */
.spox-list-sticky .mud-table-pagination-toolbar {
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.06);
    z-index: 2;
}

/*
 * First-Page und Last-Page Buttons sichtbar machen. MudDataGridPager rendert
 * standardmaessig alle 4 Navigations-Buttons (First, Previous, Next, Last),
 * versteckt First und Last aber via CSS unterhalb eines Mobile-Breakpoints.
 * Wir erzwingen die Anzeige aller Buttons — auf Web ist das ein No-Op (sie
 * sind dort sowieso sichtbar), auf Mobile macht es sie wieder sichtbar.
 */
.spox-list-sticky .mud-table-pagination-actions .mud-icon-button {
    display: inline-flex !important;
}

/*
 * User-Guide-Inhalte im VideoGuideDialog (Markdown→HTML aus
 * UserGuides/{key}.md, gerendert via UserGuideContentLoader).
 * Skaliert die typografischen Defaults von Markdig fuer die kompakte
 * Dialog-Ansicht und stylet die role-hint-Boxen.
 */
.user-guide-content {
    line-height: 1.6;
}
.user-guide-content h1 { font-size: 1.4rem; margin-top: 1rem; }
.user-guide-content h2 { font-size: 1.2rem; margin-top: 1.5rem; border-bottom: 1px solid var(--mud-palette-lines-default); padding-bottom: 0.25rem; }
.user-guide-content h3 { font-size: 1.05rem; margin-top: 1rem; }
.user-guide-content code { background: var(--mud-palette-background-grey); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
.user-guide-content pre { background: var(--mud-palette-background-grey); padding: 0.75rem; border-radius: 4px; overflow-x: auto; }
.user-guide-content pre code { background: transparent; padding: 0; }
.user-guide-content table { border-collapse: collapse; margin: 0.75rem 0; }
.user-guide-content table th, .user-guide-content table td { border: 1px solid var(--mud-palette-lines-default); padding: 0.4rem 0.6rem; text-align: left; }
.user-guide-content table th { background: var(--mud-palette-background-grey); }
.user-guide-content ul, .user-guide-content ol { padding-left: 1.5rem; }
.user-guide-content li { margin-bottom: 0.25rem; }

/*
 * Role-Hint-Boxen aus :::role-hint <Rollen>-Bloecken im Markdown. Der
 * UserGuideContentLoader filtert serverseitig nach User-Rolle; CSS gibt
 * nur das visuelle Format.
 */
.user-guide-content .role-hint {
    border-left: 4px solid var(--mud-palette-info);
    background: var(--mud-palette-background-grey);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}
.user-guide-content .role-hint::before {
    content: "Hinweis für deine Rolle";
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.85em;
    color: var(--mud-palette-info);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.user-guide-content .role-hint > :first-child {
    margin-top: 0;
}
.user-guide-content .role-hint > :last-child {
    margin-bottom: 0;
}

/*
 * MudChart (Statistiken-Seite): X-Achsen-Beschriftung mit XAxisLabelRotation=90
 * wird beim Initial-Render links abgeschnitten (z.B. "1.05" statt "01.05"),
 * weil das SVG eine viewBox aus der Pre-Render-Phase hat und das Container-
 * div mit overflow:hidden alles ueberzeichnet, was ueber die viewBox raus-
 * laeuft. Erst beim Hover (oder anderem Re-Render) wird die viewBox neu
 * berechnet. Bis das in MudBlazor sauber geloest ist, erlauben wir hier
 * explizit overflow:visible auf das chart-SVG und seine Label-Texte, damit
 * die rotierten Datums-Labels nicht beschnitten werden.
 */
.spox-chart svg,
.spox-chart svg g,
.spox-chart svg text {
    overflow: visible !important;
}
.spox-chart svg text {
    clip-path: none !important;
}