/* 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; --bg: #fafbfc; --card-bg: #fff; --border: #e3e6ea; --accent: #144263; --accent-light: #6fa3c4; --accent-soft: #eef3f7; --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: #1a527a; --bg-soft: #fafbfc; color-scheme: light; } :root[data-theme="dark"] { --fg: #e1e6ed; --fg-muted: #97a3b3; --bg: #0f141b; --card-bg: #1a212c; --border: #2a323e; --accent: #4a86ad; --accent-light: #b7d3e6; --accent-soft: #1d2a37; --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: #232a36; --accent-fg: #0f141b; --accent-hover: #5e9bc3; --bg-soft: #141a23; 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; align-items: flex-end; gap: 1.5rem; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem 0; } header .title-block { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .75rem; } header h1 { margin: 0; font-size: 1.3rem; color: var(--accent); font-weight: 700; } header .hint { color: var(--fg-muted); font-size: .8rem; } nav.tabs { display: flex; gap: .25rem; align-items: stretch; 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; margin-bottom: .75rem; } .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; } .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; } /* ─── 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); } .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