/* MWS Dashboards — shell + per-dashboard styles. Vanilla CSS; tiny enough * that splitting by file isn't worth the import overhead. */ /* Color tokens. * * theme.js sets on load; the * [data-theme="dark"] block below overrides the light defaults. * Browser `color-scheme` is also set so native UI (scrollbars, form * controls) follows along without us styling them explicitly. */ :root { --fg: #1a2330; --fg-muted: #5b6675; /* MWS-Gelb: the page background takes the MWS ivory so the dashboards * sit homogeneously alongside the MWS app (which uses this cream behind * its white content cards). Cards themselves stay white (--card-bg). */ --bg: #fcffef; --card-bg: #fff; --border: #e3e6ea; --accent: #144263; /* oc-blue-dark */ --accent-light: #66b3da; /* oc-blue-light */ --accent-soft: #e7eff9; /* oc-blue-lighter */ --status-ok: #34a853; --status-err: #ea4335; --status-warn: #fbbc04; --warn-soft: #fff8e1; --warn-border: #f6cf6a; /* Per-Einkaufsartikel badge tints — distinct semantics: * allergen → red/rose (warning) * customer → teal/blue (informational identifier) */ --allergen-bg: #fde7e9; --allergen-border: #d97a82; --allergen-fg: #9b2c33; --customer-bg: #e2f0ec; --customer-border: #6ba893; --customer-fg: #1f5e4d; --code-bg: #eef0f3; --accent-fg: #fff; --accent-hover: #19557d; /* oc-blue */ --bg-soft: #fafbfc; /* App-name badge in the header — mirrors the MWS app bar's centered * application box (white icon + name on oc-blue-dark). */ --app-box-bg: #144263; --app-box-fg: #fff; /* Loading-overlay backdrop — light washes white, dark washes navy so * the page underneath dims instead of glowing. */ --overlay-backdrop: rgba(255, 255, 255, .3); color-scheme: light; } :root[data-theme="dark"] { --fg: #e1e6ed; --fg-muted: #9fb0c4; /* Dark chrome experiment: base the dark theme on the official * oc-blue-dark-background (#1b354c) so it reads as OrgaCard navy rather * than neutral slate. The dominant surface (cards / header / table — * ~90% of the page) takes the official #1b354c so that navy is what you * actually see; the page canvas behind them is one step lighter (#21415d) * so the cards read as recessed panels. Revert this commit to restore the * previous near-black slate dark theme. */ --bg: #21415d; --card-bg: #1b354c; /* oc-blue-dark-background — the ~90% surface */ --border: #33506d; --accent: #4a86ad; --accent-light: #b7d3e6; --accent-soft: #274563; --status-ok: #5cbe6f; --status-err: #ef6f63; --status-warn: #f0c252; --warn-soft: #3a2f1c; --warn-border: #8a6e2d; --allergen-bg: #3a1e22; --allergen-border: #8a484f; --allergen-fg: #f0a3a8; --customer-bg: #1d2f2a; --customer-border: #4a8473; --customer-fg: #9bd0bc; --code-bg: #24435f; --accent-fg: #0f141b; --accent-hover: #5e9bc3; --bg-soft: #1e3a54; /* On the dark chrome the badge takes oc-blue (a touch brighter than * oc-blue-dark) so it still separates from the surrounding navy. */ --app-box-bg: #19557d; --app-box-fg: #fff; --overlay-backdrop: rgba(9, 20, 32, .45); color-scheme: dark; } * { box-sizing: border-box; } /* One unified focus ring across every interactive element. :focus-visible * means it only paints on keyboard nav, not on mouse clicks — keeps the * UI quiet for pointer users while keyboard users always know where they * are. Components that already paint their own focus state can override * with a more specific selector. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* Flex column on the body lets header + footer claim their natural * heights and gives
the remaining vertical real estate. */ body { display: flex; flex-direction: column; } /* ─── shell chrome ────────────────────────────────────────────────────── */ header { display: flex; /* Branding (logo, title, app-name badge, toggle) is vertically centered * in a fixed-height bar; only the tab strip opts out to flex-end so the * active tab still meets the header's bottom border and reads as * connected to the content below. Symmetric vertical padding (none, the * min-height does the work) keeps equal space above and below the logo * and badge. */ align-items: center; gap: 1.5rem; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 0 1.5rem; min-height: 3.5rem; } header .title-block { display: flex; flex-direction: column; gap: .15rem; } header h1 { margin: 0; font-size: 1.3rem; color: var(--accent); font-weight: 700; } header .hint { color: var(--fg-muted); font-size: .8rem; } /* ─── header branding (MWS) ─────────────────────────────────────────── * OrgaCard logo on the far left, the app-name badge centered between it * and the tab strip. The badge's margin-left:auto pairs with * nav.tabs's own margin-left:auto to split the free space either side of * the badge, so it lands roughly centered while the tabs stay right. * Both inherit the header's vertical centering (align-items: center). * LMS keeps the .title-block/h1 header above and never renders these. */ header .brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; } header .brand-logo { height: 30px; width: auto; display: block; } header .app-name { display: flex; align-items: center; gap: .5rem; margin-left: auto; /* pairs with nav.tabs margin-left:auto to center */ padding: .3rem .75rem; background: var(--app-box-bg); color: var(--app-box-fg); border-radius: 6px; flex: 0 0 auto; } header .app-name-icon { height: 30px; width: auto; display: block; flex: 0 0 auto; } header .app-name-text { display: flex; flex-direction: column; line-height: 1.1; } header .app-name-title { font-weight: 700; font-size: .95rem; } header .app-name-sub { font-size: .72rem; opacity: .85; font-weight: 500; } nav.tabs { display: flex; gap: .25rem; align-items: stretch; align-self: flex-end; /* pin the tab strip to the bar's bottom edge */ margin-left: auto; } nav.tabs a { display: block; padding: .5rem 1rem; color: var(--fg-muted); text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; font-weight: 500; margin-bottom: -1px; /* sit on top of the header bottom border */ } nav.tabs a:hover { background: var(--accent-soft); color: var(--fg); } nav.tabs a.active { background: var(--bg); color: var(--accent); border-color: var(--border); border-bottom: 1px solid var(--bg); } /* Theme toggle — segmented control of three icon buttons (Hell, Auto, * Dunkel). Sits at the far right of the header, separated from the tab * strip. The active state mirrors the saved preference, not the * computed theme — Auto is a meta-state independent of the effective * light/dark resolution. */ .theme-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; align-self: center; } .theme-toggle .theme-btn { background: var(--card-bg); color: var(--fg-muted); border: none; padding: .35rem .55rem; font-size: .85rem; cursor: pointer; min-width: 1.9rem; line-height: 1; } .theme-toggle .theme-btn + .theme-btn { border-left: 1px solid var(--border); } .theme-toggle .theme-btn:hover { background: var(--accent-soft); color: var(--fg); } .theme-toggle .theme-btn.active { background: var(--accent); color: var(--accent-fg); } main { flex: 1 1 auto; min-height: 0; /* allow children to shrink in flex layout */ padding: 1rem 1.5rem; overflow: hidden; /* per-section scroll instead of page scroll */ } footer { flex: 0 0 auto; padding: .65rem 1.5rem; color: var(--fg-muted); font-size: .95rem; border-top: 1px solid var(--border); background: var(--card-bg); } /* Status line is the "lade …" / "N Treffer" feedback at the bottom- * left. Bumped from .8rem to a comfortable 1rem and made bold + * higher-contrast colours on customer request — the previous size * blended into the chrome and a user scanning the table for results * had no peripheral signal that a fetch was in progress. */ .status { color: var(--fg); font-weight: 600; font-size: 1rem; } .status.ok { color: var(--status-ok); font-weight: 600; } .status.error { color: var(--status-err); font-weight: 600; } .status.loading{ color: var(--status-warn);font-weight: 600; } /* Reserve one line for the footer status so the chrome keeps a constant * height: without this the empty (loaded) state collapses the inline span * to 0 while "lade …" is a full text line, and the footer jumps. */ #status { display: block; min-height: 1lh; } .empty { color: var(--fg-muted); text-align: center; padding: 4rem 1rem; } /* Full-page replacement shown by shell.js when /api/* returns 401. Deliberately minimal — body is wiped, no header, no navigation. Users return to MWS to re-mint a session. */ .auth-required { max-width: 32rem; margin: 6rem auto; padding: 0 1rem; color: var(--fg); } .auth-required h1 { font-size: 1.5rem; margin: 0 0 .75rem; } .auth-required p { color: var(--fg-muted); line-height: 1.5; } /* ─── loading overlay ───────────────────────────────────────────────── * Fullscreen spinner ported from the MWS/LMS Angular frontends * (@orgacard/theme loading-overlay.scss): the OrgaCard logo abstracted * to pure CSS — orange dot, grey arc spinning backwards, oc-blue arc * spinning forwards. The circle colors are brand constants and stay * identical in both themes; only the backdrop follows the theme. * Markup lives in two places with the same classes: shell.js builds the * runtime overlay, each app's index.html carries a static copy * (.init-loading-overlay) that bridges the gap until the shell boots. */ .loading-overlay { position: fixed; inset: 0; /* One step below #oc-auth-overlay (9999, auth.css): the LMS tenant/ * system picker appears while the init splash is still up and must * stay clickable above it. */ z-index: 9990; opacity: 1; /* shell.js fades the init splash out by setting opacity 0, then * removes the node once this transition has finished. */ transition: opacity .3s; } .loading-overlay[hidden] { display: none; } .loading-overlay .app-splash-screen { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: var(--overlay-backdrop); backdrop-filter: blur(2px); } .loading-overlay .loading-container { position: relative; width: 94px; height: 94px; overflow: visible; } .loading-overlay .circle { position: absolute; top: 50%; left: 50%; border-radius: 50%; } .loading-overlay .circle1 { width: 38px; height: 38px; background-color: rgb(243, 148, 0); transform: translate(-50%, -50%); } .loading-overlay .circle2 { width: 66px; height: 66px; border: 9px solid transparent; border-top-color: rgb(166, 168, 169); transform: translate(-50%, -50%) rotate(45deg); animation: oc-spin 3s infinite linear reverse; } .loading-overlay .circle3 { width: 96px; height: 96px; border: 11px solid transparent; border-top-color: rgb(0, 124, 193); transform: translate(-50%, -50%) rotate(45deg); animation: oc-spin 4s infinite linear; } /* The Angular original declares two identical keyframes (spin1/spin2); * collapsed to one here — the arcs still differ via duration/direction. */ @keyframes oc-spin { from { transform: translate(-50%, -50%) rotate(45deg); } to { transform: translate(-50%, -50%) rotate(405deg); } } /* ─── per-dashboard primitives ────────────────────────────────────────── */ .page { display: grid; /* minmax(0, 1fr) — without the explicit 0 floor, the chart column * inherits min-content from the ECharts canvas inside (which has * stale inline width attributes between resize()s). That floor * pushes the 280 px sidebar past the page's right edge, where * `main { overflow: hidden }` clips it. The 0 lets the column * actually shrink and the sidebar stay anchored. */ grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; /* header row natural, charts/filters fill */ height: 100%; gap: 1rem; min-height: 0; } .page-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: flex-start; gap: 1rem; } .page-header h2 { margin: 0 0 .1em 0; color: var(--accent); font-size: 1.15rem; } .page-header .color-by { margin-left: auto; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--fg-muted); } /* Label-less select (e.g. Preisbasis): drop it to the bottom so it lines up with the neighbouring select that still carries a caption above it. */ .page-header .color-by.basis { align-self: flex-end; } .page-header .color-by.basis + .color-by { margin-left: 0; } .page-header .color-by select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--fg); min-width: 160px; } .page-header .hint { color: var(--fg-muted); font-size: .85rem; } .page-header code { background: var(--code-bg); padding: .05em .35em; border-radius: 3px; font-size: .85em; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; /* Flex column so the .chart inside can flex:1 and fill remaining space. */ display: flex; flex-direction: column; min-height: 0; /* As a grid item, default min-width is `auto` (= min-content), which * inherits the ECharts canvas's last-rendered width. That refuses * to shrink, so when the viewport narrows, the card overflows its * cell instead of compressing — and the sidebar drops off the page. * min-width: 0 lets the cell take whatever width the grid gives. */ min-width: 0; } .card h3 { margin: 0 0 .75rem 0; font-size: 1rem; font-weight: 600; color: var(--accent); flex: 0 0 auto; } .charts { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 0; /* Let the grid container shrink below its children's min-content * (the canvas widths). Otherwise it would push past the page's * right edge and clip the sidebar. */ min-width: 0; } .chart { width: 100%; flex: 1 1 auto; min-height: 280px; /* floor so the chart stays usable on shorter screens */ /* Same min-width: 0 reasoning as on .card — without it the flex * item floors at the canvas's intrinsic width and refuses to * shrink with its container. */ min-width: 0; } .filters { grid-column: 2; grid-row: 2; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; /* Scroll the sidebar independently when filters + legend are taller * than the viewport. Charts beside it keep their full height. */ overflow-y: auto; min-height: 0; } .filters h3 { margin: 0 0 .25rem 0; font-size: 1rem; font-weight: 600; color: var(--accent); } .filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--fg-muted); } .filters select, .filters input { font: inherit; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--fg); } /* Range filter (von / bis) — two compact number inputs side by side * with a hint line below showing the data's actual min/max. */ .filters fieldset.range-filter { border: 1px solid var(--border); border-radius: 4px; padding: .35rem .6rem .5rem; margin: 0; color: var(--fg-muted); font-size: .85rem; } .filters fieldset.range-filter legend { padding: 0 .35rem; font-size: .8rem; } .filters fieldset.range-filter .range-row { display: flex; gap: .5rem; } .filters fieldset.range-filter .range-row label { flex: 1; } .filters fieldset.range-filter input[type="number"] { width: 100%; padding: .25rem .35rem; } .filters fieldset.range-filter .range-hint { margin-top: .35rem; font-size: .72rem; opacity: .8; } /* Portionspreis distribution strip — inline SVG painted by the * dashboard JS from the server-supplied 20-bin histogram. Bars * inside the active von/bis range get the accent fill; bars * outside fade to muted. Stretches to the fieldset width via * preserveAspectRatio="none" on the . */ .filters fieldset.range-filter .price-histogram { display: block; width: 100%; height: 44px; margin: .25rem 0 .5rem; background: var(--bg-soft); border-radius: 3px; } .filters fieldset.range-filter .price-bin { fill: var(--fg-muted); opacity: .35; } .filters fieldset.range-filter .price-bin.in-range { fill: var(--accent); opacity: .9; } /* Checkbox-style filter rows: row layout instead of stacked, native * checkbox sizing instead of the padded input look above. */ .filters label.checkbox-filter { flex-direction: row; align-items: center; gap: .5rem; cursor: pointer; } .filters label.checkbox-filter input[type="checkbox"] { padding: 0; margin: 0; width: 1rem; height: 1rem; flex: 0 0 auto; cursor: pointer; } /* ─── MultiSelect widget ──────────────────────────────────────────────── */ .ms { position: relative; } .ms-details > summary { list-style: none; cursor: pointer; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--fg); display: flex; align-items: center; user-select: none; font-size: .85rem; } .ms-details > summary::-webkit-details-marker { display: none; } .ms-details > summary::after { content: '▾'; margin-left: auto; color: var(--fg-muted); font-size: .8em; } .ms-details[open] > summary { border-color: var(--accent); background: var(--accent-soft); } .ms-summary.has-selection { color: var(--accent); font-weight: 500; } .ms-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 14px rgba(20, 35, 60, .12); padding: .5rem; display: flex; flex-direction: column; gap: .35rem; } /* When the toggle sits low in the viewport the widget flips upward, so the * popover anchors to the summary's top edge instead of its bottom. */ .ms-panel.ms-panel-up { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -6px 14px rgba(20, 35, 60, .12); } /* Empty-state notice shown in place of the list when no options match. */ .ms-empty { padding: .6rem .4rem; text-align: center; color: var(--fg-muted); font-size: .85rem; border: 1px dashed var(--border); border-radius: 4px; background: var(--bg-soft); } .ms-search { padding: .3rem .5rem !important; font-size: .85rem; } .ms-list { overflow-y: auto; max-height: 220px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-soft); } /* .ms-row is a
(LMS Overview's * informational legend) and