/* CSS Custom Properties for dynamic theming */ :root { --app-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --app-font-size-base: 0.875rem; --app-font-size-sm: 0.8125rem; --app-font-size-lg: 1rem; --app-font-size-h1: 1.5rem; --app-font-size-h2: 1.25rem; --app-border-radius: 0.375rem; --app-spacing: 1rem; } html, body { font-family: var(--app-font-family); font-size: var(--app-font-size-base); margin: 0; padding: 0; height: 100%; } h1 { font-size: var(--app-font-size-h1); } h2 { font-size: var(--app-font-size-h2); } h1:focus { outline: none; } /* ── File input – theme-aware styled button ─────────────────────────────── */ .file-input-wrapper { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .file-input-wrapper .file-label-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.875rem; background-color: var(--dxbl-btn-secondary-bg, var(--dx-color-bg-layer-1, transparent)); color: var(--dxbl-btn-secondary-color, var(--dx-color-content-default, inherit)); border: 1px solid var(--dxbl-btn-secondary-border-color, var(--dx-border-color, #6c757d)); border-radius: var(--dxbl-btn-border-radius, 0.3125rem); font-size: var(--app-font-size-base, 0.875rem); font-family: var(--app-font-family, inherit); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; user-select: none; line-height: 1.5; } .file-input-wrapper .file-label-btn:hover { background-color: var(--dxbl-btn-secondary-hover-bg, var(--dx-color-bg-layer-2, rgba(0,0,0,0.06))); border-color: var(--dxbl-btn-secondary-hover-border-color, var(--dx-border-color-hover, #5c636a)); } .file-input-wrapper .file-label-btn:active { background-color: var(--dxbl-btn-secondary-active-bg, rgba(0,0,0,0.1)); } .file-input-wrapper .file-name-text { font-size: var(--app-font-size-sm, 0.8125rem); color: var(--dx-color-content-secondary, #6c757d); font-style: italic; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Legal pages (Impressum / Datenschutz) — shared by both, hence global ── */ .legal-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; max-width: 800px; margin: 0 auto; padding: 1rem 0.25rem 2rem; line-height: 1.6; } .legal-page h2 { margin-top: 1.5rem; } .legal-page .legal-stand { margin-top: 2rem; font-size: var(--app-font-size-sm); opacity: 0.7; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ── Tooltip (.app-tooltip) ──────────────────────────────────────────────── */ /* Rendered at level via tooltip.js — never clipped by grid overflow. */ .app-tooltip { position: fixed; padding: 0.5rem 0.875rem; border-radius: 0.375rem; font-size: 0.875rem; font-family: var(--app-font-family, inherit); font-weight: 400; line-height: 1.6; white-space: pre-line; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 100000; background: var(--dx-color-bg-layer-2, #fff); color: var(--dx-color-content-default, #212529); border: 1px solid var(--dx-border-color, #dee2e6); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); } .app-tooltip--visible { opacity: 1; visibility: visible; } [data-tooltip] { cursor: default; } /* Deviation cell overflow fix for DevExpress TreeList */ .deviation-cell { overflow: visible !important; position: relative; } /* Chart axis/title text – DevExtreme writes a hardcoded dark fill inline, so the theme font color must be forced with !important to follow dark/light mode. */ .ranking-chart svg text { fill: var(--dxbl-chart-font-color) !important; } /* Statistikkonto rows (non-group) in the accounts TreeList get a subdued background to visually separate them from group rows – !important needed to beat the TreeList's own row-background rule. */ .statistics-tree .account-row > td { background-color: var(--dxds-color-surface-neutral-subdued-rest) !important; } /* Users without a dealership assignment cannot see any data – tint their row in a muted warning colour. The tint is derived from the --danger token via color-mix so it works in both light and dark; !important beats the Grid's own row-background rule. */ .users-grid .user-without-dealership > td { background-color: color-mix(in srgb, var(--danger) 12%, transparent) !important; } /* ── Active NavMenu item (brand petrol highlight) ──────────────────────────── Global rather than scoped to NavMenu: on small screens DevExpress collapses overflowing menu items into a popup portal teleported to , outside the component's scope attribute, so a scoped ::deep rule never reaches them. Keying on the item class alone highlights the item in both the top bar and the popup. !important is needed to beat the DevExpress theme's own single-class rules. */ .nav-menu-item-active { background-color: var(--primary-subtle) !important; box-shadow: inset 2px 0 0 0 var(--primary); /* left accent (vertical popup) */ } /* In the horizontal top bar the accent reads better as a bottom underline. */ .dxbl-menu-horizontal .nav-menu-item-active { box-shadow: inset 0 -1px 0 0 var(--primary); } /* The clickable element is an that sets its own text color, so override the anchor, the text span and the icon span explicitly. */ .nav-menu-item-active .dxbl-btn, .nav-menu-item-active .dxbl-menu-item-text, .nav-menu-item-active .dxbl-image { color: var(--primary) !important; font-weight: 500 !important; }