/* ========================================================================== SEMANTIC COLOUR TOKENS ========================================================================== Every accent colour in the app resolves through these tokens instead of a hex literal, so one definition carries both the light and the dark theme. Why this exists: the dark theme is a palette switch on MudThemeProvider, which only swaps the --mud-palette-* variables. Hardcoded literals do not follow that switch, which produced light-grey text on a light-yellow card. Three layers, and only the first one is written twice: --weg-ink-* the accent itself — text, icons, chart bars, bar fills. Defined per theme; the light values are the ones the app shipped with, so the light theme is unchanged. --weg-tint-* a tinted surface built from the ink over the current surface. Derived, so it follows the ink automatically. --weg-wash-* a stronger translucent overlay for icon wraps and badges that sit on top of a tint. Also derived. The dark values are the ink lightened until it clears roughly 4.5:1 against the dark surface. Prefer adjusting an ink over redefining a derived token per theme — the one place that needs it is documented where it happens. The tokens live on the element, which is why they also reach inline style attributes: a custom property is substituted at the point of use, so style="color: var(--weg-ink-error)" picks up whichever value carries. MudBlazor does not mark dark mode in the DOM, so MainLayout toggles the .weg-dark class via window.wegSetTheme (defined in App.razor). ========================================================================== */ :root { /* -- Accent ink — light theme (the values the app shipped with) -- */ --weg-ink-brand: #1a4c8b; --weg-ink-info: #0288d1; --weg-ink-success: #2e7d32; --weg-ink-warning: #e6a800; --weg-ink-error: #c62828; --weg-ink-teal: #00695c; --weg-ink-indigo: #283593; --weg-ink-purple: #6a1b9a; --weg-ink-neutral: #424242; } html.weg-dark { /* -- Accent ink — dark theme, lightened for contrast on the dark surface -- */ --weg-ink-brand: #7fb0ee; --weg-ink-info: #4fc3f7; --weg-ink-success: #7bc67e; --weg-ink-warning: #ffc94d; --weg-ink-error: #ef7c72; --weg-ink-teal: #6fd0c4; --weg-ink-indigo: #9fa8f5; --weg-ink-purple: #ce93d8; --weg-ink-neutral: #c9c9ce; } :root { /* -- Tinted surfaces — the ink laid over the current surface -- */ --weg-tint-brand: color-mix(in srgb, var(--weg-ink-brand) 12%, var(--mud-palette-surface)); --weg-tint-info: color-mix(in srgb, var(--weg-ink-info) 12%, var(--mud-palette-surface)); --weg-tint-success: color-mix(in srgb, var(--weg-ink-success) 12%, var(--mud-palette-surface)); --weg-tint-warning: color-mix(in srgb, var(--weg-ink-warning) 12%, var(--mud-palette-surface)); --weg-tint-error: color-mix(in srgb, var(--weg-ink-error) 12%, var(--mud-palette-surface)); --weg-tint-teal: color-mix(in srgb, var(--weg-ink-teal) 12%, var(--mud-palette-surface)); --weg-tint-indigo: color-mix(in srgb, var(--weg-ink-indigo) 12%, var(--mud-palette-surface)); --weg-tint-purple: color-mix(in srgb, var(--weg-ink-purple) 12%, var(--mud-palette-surface)); /* Neutral tints are deliberately far subtler — they group content, they do not carry a meaning. Cool takes the brand hue, plain takes grey. */ --weg-tint-neutral: color-mix(in srgb, var(--weg-ink-neutral) 5%, var(--mud-palette-surface)); --weg-tint-neutral-cool: color-mix(in srgb, var(--weg-ink-brand) 5%, var(--mud-palette-surface)); /* -- Fills — the stronger tint the report summary rows use, so a section footer reads as heavier than the section header above it -- */ --weg-fill-brand: color-mix(in srgb, var(--weg-ink-brand) 30%, var(--mud-palette-surface)); --weg-fill-success: color-mix(in srgb, var(--weg-ink-success) 30%, var(--mud-palette-surface)); --weg-fill-warning: color-mix(in srgb, var(--weg-ink-warning) 30%, var(--mud-palette-surface)); --weg-fill-error: color-mix(in srgb, var(--weg-ink-error) 30%, var(--mud-palette-surface)); --weg-fill-teal: color-mix(in srgb, var(--weg-ink-teal) 30%, var(--mud-palette-surface)); --weg-fill-indigo: color-mix(in srgb, var(--weg-ink-indigo) 30%, var(--mud-palette-surface)); --weg-fill-purple: color-mix(in srgb, var(--weg-ink-purple) 30%, var(--mud-palette-surface)); --weg-fill-neutral: color-mix(in srgb, var(--weg-ink-neutral) 12%, var(--mud-palette-surface)); /* -- Edges — accent borders that mark a row's category without shouting -- */ --weg-edge-brand: color-mix(in srgb, var(--weg-ink-brand) 45%, var(--mud-palette-surface)); --weg-edge-success: color-mix(in srgb, var(--weg-ink-success) 45%, var(--mud-palette-surface)); --weg-edge-warning: color-mix(in srgb, var(--weg-ink-warning) 45%, var(--mud-palette-surface)); --weg-edge-error: color-mix(in srgb, var(--weg-ink-error) 45%, var(--mud-palette-surface)); --weg-edge-teal: color-mix(in srgb, var(--weg-ink-teal) 45%, var(--mud-palette-surface)); --weg-edge-indigo: color-mix(in srgb, var(--weg-ink-indigo) 45%, var(--mud-palette-surface)); --weg-edge-purple: color-mix(in srgb, var(--weg-ink-purple) 45%, var(--mud-palette-surface)); /* -- Washes — translucent overlays for icon wraps and badges on a tint -- */ --weg-wash-brand: color-mix(in srgb, var(--weg-ink-brand) 14%, transparent); --weg-wash-info: color-mix(in srgb, var(--weg-ink-info) 14%, transparent); --weg-wash-success: color-mix(in srgb, var(--weg-ink-success) 14%, transparent); --weg-wash-warning: color-mix(in srgb, var(--weg-ink-warning) 14%, transparent); --weg-wash-error: color-mix(in srgb, var(--weg-ink-error) 14%, transparent); --weg-wash-teal: color-mix(in srgb, var(--weg-ink-teal) 14%, transparent); --weg-wash-indigo: color-mix(in srgb, var(--weg-ink-indigo) 14%, transparent); --weg-wash-purple: color-mix(in srgb, var(--weg-ink-purple) 14%, transparent); /* -- Solid fills that carry white text (result cards, swipe actions). Deliberately identical in both themes and NOT derived from the ink: white on a fill only stays legible while the fill itself stays dark, so these must not lighten when the dark theme lightens the inks. -- */ --weg-solid-success: #2e7d32; --weg-solid-success-alt: #388e3c; --weg-solid-error: #c62828; --weg-solid-error-alt: #d32f2f; --weg-solid-brand: #1976d2; --weg-solid-warning: #f57c00; /* -- Neutral structure — all derived from the theme's own text colour -- */ --weg-track: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); --weg-hairline: var(--mud-palette-divider); --weg-press: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); --weg-ink-faint: var(--mud-palette-text-disabled); } /* The one derived value the dark theme has to weaken: a summary band carries its own ink as the label, and in the dark theme both move in the same direction — at 30% the band closes in on its own text (~2.6:1 on the GuV totals row). Lighter inks need less fill to read as "heavier than the header above". Wins over the :root rule above on specificity, so the order here is free. */ html.weg-dark { --weg-fill-brand: color-mix(in srgb, var(--weg-ink-brand) 20%, var(--mud-palette-surface)); --weg-fill-success: color-mix(in srgb, var(--weg-ink-success) 20%, var(--mud-palette-surface)); --weg-fill-warning: color-mix(in srgb, var(--weg-ink-warning) 20%, var(--mud-palette-surface)); --weg-fill-error: color-mix(in srgb, var(--weg-ink-error) 20%, var(--mud-palette-surface)); --weg-fill-teal: color-mix(in srgb, var(--weg-ink-teal) 20%, var(--mud-palette-surface)); --weg-fill-indigo: color-mix(in srgb, var(--weg-ink-indigo) 20%, var(--mud-palette-surface)); --weg-fill-purple: color-mix(in srgb, var(--weg-ink-purple) 20%, var(--mud-palette-surface)); } /* ======================================== BLAZORPDF VIEWER FIXES ======================================== */ /* * Leitidee dieser Sektion: das PDF wird auf die Breite des Viewers eingepasst, * damit auf dem Handy nichts seitlich überläuft. Was nicht überläuft, muss auch * nicht verschoben werden — dadurch braucht es weder eigene Touch-Handler noch * eine zweite (horizontale) Scroll-Box. Vergrößern übernimmt die native * Pinch-Geste des Browsers. */ /* Positioning for the full-screen PDF viewer overlay. On mobile (< 960px) it covers the full viewport from the AppBar down. On desktop (≥ 960px) the persistent sidebar drawer (240px) is always visible, so left must start after the drawer to avoid overlap. */ .report-pdf-viewer { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 950; overflow: hidden; } @media (min-width: 960px) { .report-pdf-viewer { left: 240px; } } /* Rückfallschutz: kein Kind des Overlays darf breiter werden als das Overlay, sonst schöbe es die Erklärkarte darüber mit in die Breite. */ .report-pdf-viewer > * { max-width: 100% !important; } /* Die Toolbar des Pakets bleibt draußen: ihre Seiten-Buttons scrollen im Scroll-Modus das Element #pdfId, das in der Erklärkarten-Ansicht bewusst nicht scrollbar ist (siehe .has-explanation in den Report-Seiten) — sie wären also wirkungslos. Schließen und Herunterladen liegen in der AppBar, Vergrößern macht die Pinch-Geste. Deckt auch das Dropdown-Menü ab, das innerhalb der Toolbar gerendert wird. */ .report-pdf-viewer .blazorpdf-toolbar { display: none !important; } /* Der textLayer liegt unsichtbar über den Seiten und fängt Touch-Events für Textauswahl ab. Im Scroll-Modus unterstützt das Paket ohnehin weder Suche noch Auswahl, deshalb raus — erst dadurch scrollt und zoomt die Seite nativ. */ .report-pdf-viewer .textLayer { display: none !important; } /* Das Paket rendert jede Seite als Canvas mit fester Pixelbreite (A4 ≈ 595 px bei 100 %) und kennt kein „an Breite anpassen". max-width skaliert die Seite auf schmalen Geräten herunter (Downscaling bleibt scharf) und lässt sie auf dem Desktop in Originalgröße. */ .report-pdf-viewer canvas.blazorpdf__scroll-page { max-width: 100%; height: auto; } /* .blazorpdf-pdf ist ein Flex-Container mit overflow-x:auto: seine Kinder schrumpfen auf die Canvas-Breite (statt auf die Viewer-Breite) und der horizontale Überlauf bekommt eine eigene Scroll-Box. Beides steht dem Einpassen im Weg, deshalb auf einen schlichten Block-Fluss zurückbauen. Die Randabstände der Wrapper-Divs (inline margin: 25px) kosten auf dem Handy ein Achtel der Breite und entfallen ebenfalls. */ .report-pdf-viewer .blazorpdf-pdf { display: block !important; overflow: visible !important; } .report-pdf-viewer .blazorpdf-pdf > div, .report-pdf-viewer .blazorpdf-pdf > div > div { width: 100% !important; margin: 0 !important; } .report-pdf-viewer .blazorpdf__scroll { /* Viewer extends to bottom:0 and covers BottomNav (z-index 950 > 900). Full height = 100vh minus AppBar only. padding-bottom reserves space so the last PDF content can be scrolled into view above the nav area. */ height: calc(100vh - 64px) !important; padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; width: 100% !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Replace the package's hardcoded dark (#161719) background with the app's surface colour so the viewer matches the app's light/dark theme. Applies to all three elements the package uses to paint the dark background. */ .report-pdf-viewer .blazorpdf__scroll, .report-pdf-viewer .blazorpdf-pdf, .report-pdf-viewer .blazorpdf-pdf__pdf-container { background-color: var(--mud-palette-background) !important; } /* Override the hardcoded #007bff loader bar with the app primary colour. Global selector + !important needed because the element may sit outside the report wrapper and the package CSS has no specificity advantage. */ .blazorpdf__loader { background-color: var(--mud-palette-primary) !important; } /* ======================================== MUDBLAZOR OVERRIDES ======================================== */ /* MudBlazor reduziert die AppBar-Toolbar-Höhe auf kleinen Screens per Media-Query (< 600px Portrait: −1/8, Landscape: −1/4). Das führt zu einem Spalt zwischen der AppBar und sticky positionierten Elementen, die `top: var(--mud-appbar-height)` nutzen. Override erzwingt konsistente Toolbar-Höhe auf allen Viewport-Größen. */ .mud-appbar .mud-toolbar-appbar { height: var(--mud-appbar-height) !important; } /* mud-main-content padding-top folgt derselben Logik wie die Toolbar-Höhe: auf kleinen Screens reduziert MudBlazor den Offset auf 7/8 der AppBar-Höhe, was nach dem Toolbar-Override einen Sprung im Sticky-Bar-Verhalten erzeugt. Override synchronisiert den Content-Offset mit der nun fixen AppBar-Höhe. */ .mud-main-content { padding-top: var(--mud-appbar-height) !important; } /* mud-toolbar-gutters wechselt bei ≥ 600px von 16px auf 24px horizontales Padding, was die AppBar-Icons sichtbar vom Rand wegspringen lässt. Für eine Mobile-First-App ist der kompakte Wert auf allen Viewport-Größen sinnvoller. */ .mud-appbar .mud-toolbar-gutters { padding-left: 16px !important; padding-right: 16px !important; } /* ======================================== MOBILE / PWA OVERSCROLL ======================================== */ /* Suppress native browser pull-to-refresh (Android Chrome) so our custom PTR indicator takes over. "contain" keeps bounce-scroll within the element without triggering the browser's own refresh animation. */ html, body { overscroll-behavior-y: contain; } /* ======================================== PULL-TO-REFRESH INDICATOR (element created dynamically by pull-refresh.js) ======================================== */ .ptr-indicator { position: fixed; top: calc(var(--mud-appbar-height, 64px) + 8px); left: 50%; /* initial position: hidden above viewport (JS sets translateY at runtime) */ transform: translateX(-50%) translateY(-88px); width: 44px; height: 44px; background: var(--mud-palette-surface); border-radius: 50%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; z-index: 500; /* above page content, below dialogs (~1200) */ pointer-events: none; /* never intercepts taps */ will-change: transform; } @keyframes ptr-spin { to { transform: rotate(360deg); } } .ptr-indicator.ptr-spinning svg { animation: ptr-spin 0.75s linear infinite; transform-origin: center; } .ptr-indicator.ptr-spinning .ptr-arc { stroke-dashoffset: 22; /* ~75 % of circumference — indeterminate arc */ } /* ======================================== GLOBAL BOTTOM SHEET DIALOG STYLES ======================================== */ /* Bottom Sheet Backdrop - darker and at the bottom */ .bottom-sheet-backdrop { background-color: rgba(0, 0, 0, 0.5) !important; } /* MudBlazor Dialog Container Override for Bottom Position */ .mud-dialog-container { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; } /* Force bottom-sheet dialogs to align at bottom without padding */ .bottom-sheet-container { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; } /* Remove all default MudBlazor dialog spacing for bottom sheets */ .bottom-sheet-container .mud-dialog { margin: 0 !important; } /* Global styles for dialogs at bottom position */ .mud-dialog-container:has(.mud-dialog) { align-items: flex-end !important; padding: 0 !important; } /* Ensure full width on mobile */ @media (max-width: 959px) { .bottom-sheet-container { padding: 0 !important; } .bottom-sheet-container .mud-dialog { width: 100vw !important; max-width: none !important; left: 0 !important; right: 0 !important; margin: 0 !important; } } /* ======================================== PAGE NAVIGATION TRANSITION ANIMATIONS ======================================== */ /* Slide from Right to Left (Forward navigation) */ .page-slide-right-to-left { animation: slideRightToLeftPage 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideRightToLeftPage { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Slide from Left to Right (Back navigation) */ .page-slide-left-to-right { animation: slideLeftToRightPage 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideLeftToRightPage { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade In (Default) */ .page-fade-in { animation: fadeInPage 0.3s ease-out; } @keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } } /* ======================================== BEWEGUNG REDUZIEREN (prefers-reduced-motion) ======================================== */ /* * Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt die Seitenübergänge ohne * Bewegung — WCAG 2.3.3. Neutralisiert werden die Keyframes, nicht die Regeln: rund 25 Seiten * deklarieren `animation: slideRightToLeftPage …` in ihrem eigenen