:root{ /* feature-018 slice 1 — THE 17 COLOUR TOKENS ARE GONE FROM HERE. They are ShellPalette.ErpDark now, and ShellPalette.ToCssVariables() is the only place any of them becomes a value (NFR-4, T-3). App.razor emits them on , so every page still resolves var(--accent) — including the sign-in pages, which render outside MainLayout and therefore outside the shell's own root. Changing the accent is one line of C#. What remains below is what the palette does NOT own: two chart colours. feature-018 O-1 — THE TWO TYPE STACKS ARE GONE FROM HERE TOO. They are ShellTypography.ErpDense now (--shell-sans / --shell-mono), emitted beside the palette by App.razor, BECAUSE the owner's ruling is that configuration drives colours, fonts AND layout — and a font stack declared in a host's own stylesheet is a font the shell cannot configure. Same two stacks, verbatim; the ERP does not move. */ --chart-neg:#ff9c8d;--chart-hot:#6fd6e3; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--shell-sans);font-size:var(--shell-fs-base);line-height:var(--shell-lh);-webkit-font-smoothing:antialiased} .num,.money{font-variant-numeric:tabular-nums}.money{font-family:var(--shell-mono);font-size:12.5px}.mono{font-family:var(--shell-mono)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* content wrapper (MudBlazor supplies the shell). Full-bleed by design: an ERP is data-dense (grids, master-detail, KPI cards) and lives on wide/4K monitors, so the content column fills the available width with comfortable side padding rather than sitting in a narrow centred band. Reading width is bounded where it matters instead — the master-detail DETAIL pane is capped (the split now lives in shell.css — §6.194, one rule for both hosts) so documents/forms stay comfortable while the list fills the rest. Small screens shed padding via the media queries further down. */ .view{padding:28px 40px 60px} .head{margin-bottom:20px}.head h1{margin:0;font-size:22px;font-weight:640;letter-spacing:-.01em}.head p{margin:5px 0 0;color:var(--muted);font-size:13px} .crumb{color:var(--faint);font-size:12px;margin-bottom:6px;cursor:pointer} .cards{display:grid;gap:15px}.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)} .card{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:17px 19px}.card.lg{padding:21px 23px} .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} .big{font-size:25px;font-weight:650;margin-top:5px}.big.sm{font-size:19px} .sub{color:var(--muted);font-size:12.5px}.muted{color:var(--muted)}.faint{color:var(--faint)} .stack{display:flex;flex-direction:column;gap:11px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px} .sep{border-top:1px solid var(--line-2);margin-top:15px;padding-top:13px} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 9px;border:1px solid transparent;white-space:nowrap} .p-good{background:#122a19;color:#82db90;border-color:#245030}.p-warn{background:#302710;color:#f0c563;border-color:#4a3c14} .p-bad{background:#331813;color:#ff9c8d;border-color:#57271f}.p-violet{background:#211a37;color:#c7b1ff;border-color:#3a2f5c} .p-info{background:#122240;color:#a3c0ff;border-color:#284067}.p-mute{background:#1a2230;color:var(--muted);border-color:var(--line-2)} .p-accent{background:var(--accent-soft);color:#8fe0eb;border-color:var(--accent-dim)} .wrap-x{overflow-x:auto} .rawtbl table,table.rawtbl{width:100%;border-collapse:collapse;font-size:13px} .rawtbl th{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-2)} .rawtbl td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}.rawtbl tr:last-child td{border-bottom:none} .rawtbl tbody tr:hover{background:#161e2c}.rawtbl tbody tr.clickable{cursor:pointer}.r{text-align:right}.neg{color:#ff9c8d} .btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#04222a;border:none;border-radius:9px;padding:8px 14px;font-weight:660;font-size:12.5px;cursor:pointer;font-family:inherit} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}.btn.sm{padding:5px 11px;font-size:11.5px;border-radius:7px}.btn.warn{background:var(--warn);color:#241c02} .aging{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--hair)}.aging i{display:block}.aging .a0{background:var(--good)}.aging .a1{background:var(--warn)}.aging .a2{background:var(--bad)} .agkey{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle} .meter{display:inline-flex;gap:2px}.meter i{width:6px;height:12px;border-radius:2px;background:#2b3850}.meter i.f{background:var(--good)} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:#1a2230;border:1px solid var(--line-2);border-radius:7px;padding:2px 8px;color:var(--muted)}.chip.ok{color:#82db90;border-color:#245030} .note{font-size:11.5px;color:var(--faint)}.kbd{font-family:var(--shell-mono);font-size:11px;background:#0c1120;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted)} .spark{width:100%;height:38px;display:block} .ch{padding:10px 14px;border-bottom:1px solid var(--line-2);background:#131a27;font-size:12px;color:var(--muted)} /* #79 — selected-state modifier for a clickable card (bank-account cards, master-detail); reuses the same left-accent-bar language as the row-selected style elsewhere (RowStyleFunc on MudTable, .navlink.active). */ .erp-card.selected{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)} .conf{font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px}.conf.h{background:#122a19;color:#82db90}.conf.m{background:#302710;color:#f0c563}.conf.l{background:#1a2230;color:var(--muted)} .in{color:#82db90}.out{color:#ff9c8d} .basket{margin:12px;background:#111826;border:1px dashed var(--accent-dim);border-radius:10px;padding:12px 14px} .tree{font-family:var(--shell-mono);font-size:12.5px;line-height:1.95}.tag{display:inline-block;font-size:11px;border-radius:6px;padding:1px 8px;background:var(--accent-soft);color:#8fe0eb;border:1px solid var(--accent-dim)}.tag.spare{background:#1a2230;color:var(--muted);border-color:var(--line-2)} .form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:5px}.field .val{background:var(--bg);border:1px solid var(--line-2);border-radius:7px;padding:8px 11px} .kindsel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.kk{border:1px solid var(--line-2);border-radius:8px;padding:7px 13px;font-size:12.5px;color:var(--muted)}.kk.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.kk.src{color:var(--faint);font-size:11.5px} .matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left} .yes{color:var(--good)}.ro{color:var(--info);font-size:11px}.no{color:var(--faint)} .toggle{width:34px;height:19px;border-radius:20px;background:var(--accent);position:relative;display:inline-block}.toggle::after{content:"";position:absolute;right:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#04222a} .toggle.off{background:#2b3850}.toggle.off::after{left:2px;right:auto;background:var(--faint)} a{color:inherit;text-decoration:none} @media (max-width:900px){.c2,.c3,.c4,.form{grid-template-columns:1fr}} /* ---- host content the shell PLACES but does not draw: the drawer-top company line and the "view as role" box (C-20's fragment), and the sign-in pages. Everything that was chrome — the app bar, the drawer, the brand, the nav fold, the search and identity clusters — left this file for shell.css in slice 1. ---- */ .company{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;margin:2px 8px 10px;font-size:12px;color:var(--muted)} .company .c{width:16px;height:16px;border-radius:4px;background:#2b6ea3} .viewas{margin:0 12px 4px;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em} .roleselect{margin:0 8px 10px} .roleselect select{width:100%;background:var(--elev);color:var(--text);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit} /* ---- MudBlazor content polish (dark, matches the surface language) ---- */ .erp-card.mud-paper{background:var(--surface);border:1px solid var(--line-2);border-radius:12px} .erp-table.mud-table{background:transparent;border:1px solid var(--line-2);border-radius:12px;overflow:hidden} .erp-table .mud-table-container{background:var(--surface)} .erp-table th.mud-table-cell{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);font-weight:600;border-bottom:1px solid var(--line-2);background:var(--surface)} .erp-table td.mud-table-cell{border-bottom:1px solid var(--hair);font-size:13px;color:var(--text)} .erp-table tbody tr.mud-table-row:hover{background:#161e2c!important} .money-td{font-family:var(--shell-mono);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .mono-td{font-family:var(--shell-mono)} /* One-line, ellipsis-trimmed cell content (company name / line-name preview). Applied to a block SPAN inside the cell, never the : the table layout algorithm sizes columns to their content, so a max-width on the cell alone is ignored. Trimming is CSS, so the full text is always intact in the element's title attribute. */ .trunc{display:block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trunc.wide{max-width:34ch} .kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} .kpi-value{font-size:22px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums} .hstack{display:flex;align-items:center;gap:8px}.hstack.wrap{flex-wrap:wrap} .rowclick{cursor:pointer} /* line-item tables sit FLUSH inside their card — no nested double border, span paper left→right */ .erp-table-flush.mud-table{border:none;border-radius:0;background:transparent;border-top:1px solid var(--line-2)} .erp-table-flush .mud-table-container{background:transparent} .erp-table-flush{margin:8px -16px 0;width:calc(100% + 32px)} .erp-table-flush td.mud-table-cell:first-child,.erp-table-flush th.mud-table-cell:first-child{padding-left:16px} .erp-table-flush td.mud-table-cell:last-child,.erp-table-flush th.mud-table-cell:last-child{padding-right:16px} /* ==== UI polish 2 (2026-07-15): center · no card-in-card · clean line grid · nav sizing ==== */ /* main content column fills the width (see .view above) — no auto-centring so wide/4K screens aren't wasted */ .view{margin-left:0;margin-right:0} /* ANY data table inside a card renders flush → removes card-in-card double borders everywhere */ .erp-card .erp-table.mud-table{border:none;border-radius:0;background:transparent} .erp-card .erp-table .mud-table-container{background:transparent} .erp-card .erp-table.mud-table thead th.mud-table-cell{background:transparent} /* editable line grid: cells look like flat fields, not boxed inputs */ .erp-table-flush .mud-input.mud-input-outlined .mud-input-outlined-border{border:0 !important} .erp-table-flush .mud-input.mud-input-outlined{background:transparent;border-bottom:1px solid var(--hair);border-radius:0} .erp-table-flush .mud-input.mud-input-outlined.mud-focused{border-bottom:1.5px solid var(--accent)} .erp-table-flush .mud-input-control{margin-top:0} .erp-table-flush td.mud-table-cell{padding:3px 8px;vertical-align:middle} /* ==== "view as role" box + its select — C-20 slot CONTENT, host-owned. The drawer's own density, icons, group headers, active-item rule and badge left for shell.css in slice 1; the region wrappers .drawer-top and .drawer-note went with them and are .shell-drawer-top / .shell-drawer-footnote there. ==== */ .viewas-box{margin:2px 8px 4px;padding:8px;border:1px dashed var(--line-2);border-radius:8px} .viewas{font-size:9.5px;margin:0 0 4px;padding:0;color:var(--faint);text-transform:uppercase;letter-spacing:.1em} .roleselect{margin:0} /* P3: native select restyled to match the surface language, custom chevron */ .roleselect select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-2);border-radius:8px; padding:7px 28px 7px 10px;font-size:12.5px;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 9px center} .roleselect select:focus{border-color:var(--accent);outline:none} /* KPI/summary cards in a row stretch to equal height — scoped to items that hold a card, so it never touches form-field grids */ .mud-grid>.mud-grid-item:has(>.erp-card){display:flex} .mud-grid>.mud-grid-item>.erp-card{height:100%;flex:1} .page-title{font-size:22px;font-weight:640;letter-spacing:-.01em;margin:0} .page-title:focus,.page-title:focus-visible{outline:none} .erp-badge.mud-chip{font-weight:600} .erp-tag.mud-chip{font-weight:500} .page-sub{color:var(--muted);font-size:13px;margin:5px 0 0} /* ── epic-080 ③ — THE STAFF CHAT FRAME ───────────────────────────────────────────────────────── One component (ModelingEvolution.Chat's ConversationView, which ships NO stylesheet of its own) is rendered by both hosts, and the two hosts wrapped it in frames that agreed on nothing: ERP inline style="" border var(--mud-palette-lines-default) radius 4px height 26rem portal .chat-conversation border var(--line-2) radius 6px height 26rem The ERP's half was the worse one on every count. It read a MUDBLAZOR variable, so it did not follow the shell palette at all and would drift the moment the shell's line colour changed; and it was an INLINE STYLE ATTRIBUTE, which cannot be themed, cannot be overridden, and is invisible to every pin in this repo that reads CSS as text. Both frames now read the same shell tokens, and the radius is --shell-radius rather than a literal that agreed with nothing. ⚠ height: 26rem is STILL stated in two files, deliberately and under protest — it is the one value the two frames already agreed on, and unifying it means a shared stylesheet or a component parameter, which is the portal-wide token sweep this change is explicitly NOT (backlog: docs/backlog/). Filed, not fixed. */ /* ── M8 — THE INNER FRAME IS GONE (reviewer's ruling, and a different argument from §10's) ──────────────── This border+radius sat INSIDE a mud-paper-outlined carrying its own border+radius, with the composer's rounded box inside that again: three nested frames around one conversation. ⚠ NOT the portal's §10 rule. §10's "Surface on Bg, one left-edge rule" describes the BUYER'S 50/50 PANEL and does NOT travel to an embedded staff pane (screen-staff-erp.md: "two panes with two rules"). The pane keeps its MudPaper frame and its definite height. What goes is only the SECOND frame drawn inside the first, which no contract asked for. `overflow:hidden` STAYS — it is what keeps the list's own scroll inside the region rather than the page, and the height stays definite because the package's flex chain needs something to fill. */ /* ── S1 — THE SHAPE. At 1280 the editor's columns wrap and this became 938 x 416: a ~110-character measure showing three messages, which is the least chat-like shape there is. Two properties, no new machinery: · the height BREATHES where the viewport allows but stays DEFINITE — clamp() resolves to a length, which is what the package's flex chain needs to fill (`.chat-panel{height:100%}` over `.chat-list{flex:1 1 auto;min-height:0}`). A percentage or `auto` here collapses the list back to content height, which is the rc149 portal defect in a different frame; · the MEASURE is capped on the message body, not the frame. Capping the frame would leave a narrow box floating in a wide card; capping the text keeps the card's width for the composer and the head while the reading line stays a reading line. */ .offer-chat-conversation{height:clamp(22rem,55vh,40rem);overflow:hidden} .offer-chat-conversation .chat-body{max-width:46rem} /* ── S5 — the disabled send control read as a rendering artefact rather than a control: MudBlazor paints a disabled icon button at rgba(255,255,255,0.26), which against this surface is barely there. The STATE is correct — nothing to send, so nothing to press — and only its contrast is wrong. --faint is the token the rest of this pane already recedes with. */ .offer-chat-conversation [data-chat-send]:disabled, .offer-chat-conversation [data-chat-send][disabled]{color:var(--faint)} /* ── M9 — THE GROUPING RHYTHM, AND THIS OVERRIDE IS NOT THE CHAT PACKAGE'S FAULT ────────────────────────── §10 specifies 4px between messages inside a group and 16px between groups — "the ratio is what makes grouping legible without any rule or box". ModelingEvolution.Chat ships exactly that, and ships `.chat-body > :last-child { margin-bottom: 0 }` to keep it. MudBlazor.Markdown then beats it with `.mud-markdown-body p { margin-bottom: 1.25em !important }`, adding ~20px of dead band under every row. MEASURED: 24px in-group vs 36px between — a 1:1.5 ratio where the contract says 1:4. That is the main reason the thread reads as an undifferentiated list rather than as grouped turns, which is what the owner was looking at when he said it does not look nice. ⚠ THIS IS A THIRD OVERRIDE AND IT IS DELIBERATELY NOT COUNTED AGAINST THE CHAT PACKAGE'S CAP. The two standing overrides exist because a ModelingEvolution.Chat rule is wrong; here the Chat rule is RIGHT and is being overridden by a THIRD party's stylesheet. `!important` is required to win against `!important`, and the narrower selector keeps it inside the conversation. ⚠ APPLIED TO BOTH HOSTS IN THE SAME COMMIT (portal.css carries the twin) — same defect, same component, and letting one host carry it is how the two surfaces start to drift. */ .offer-chat-conversation .chat-body .mud-markdown-body p:last-child{margin-bottom:0 !important} /* ── epic-081, owner on rc166: "The Chat doesn't look nice in ERP." ────────────────────────────────────── THE SAME TWO FOREIGN OVERRIDES THE PORTAL ALREADY CARRIES, applied to the second host that renders the same component. Not a third and a fourth: the standing cap is on the number of package rules we override, and these are the same two rules — the portal's copies are in portal.css with the identical reasoning, and docs/backlog/chat-day-separator-sticky-margin-is-the-packages.md tracks BOTH for removal in one go. ⚠ THE FRAME ABOVE IS NOT TOUCHED, and that is a ruling rather than an omission. screen-chat-panel.md §10's "Surface on Bg, one left-edge rule, no border" describes the BUYER'S 50/50 PANEL. This is an embedded pane inside the offer editor — screen-staff-erp.md is explicit that these are "two panes with two rules" — so a framed, fixed-height box is correct here. Only the CONVERSATION's rules travel between the hosts (§6.110, one renderer); the panel's do not. (1) The package's day separator is `position: sticky` carrying `margin: 16px 0 8px`. A sticky element's margin is not painted, so a 16px transparent strip sits above it and the row underneath shows through — visible on rc166 as "Klient 15:15" sliced by the 17.08.2026 band. Same spacing, painted. */ .offer-chat-conversation [data-chat-day]{margin-top:0;padding-top:16px} /* (2) §10: "group head 14px, name `Text`/600, time `Faint`". Measured on rc166 the time came out rgb(233,238,246) — the same value as the sender name — so every group head read as two equally loud facts and nothing receded. */ .offer-chat-conversation [data-chat-time]{color:var(--faint)} /* epic-080 — the crumb is a