/* ============================================================================ AU ONE ERP · dwb-pro.css — DETAILED WEEKLY BUDGET, VISUAL LAYER ONLY ---------------------------------------------------------------------------- Everything here is scoped under `.dwb2`, the one wrapper renderWeeklyHTML now returns its markup inside. Nothing outside this tab can be affected, and deleting this file (and that wrapper) restores the previous look exactly. No behaviour, no data, no permission, no formula is touched by this file. WHAT WAS ACTUALLY WRONG — measured on the live site, signed in, at 2560px: .view 2180px no max-width anywhere on the page one KPI tile 720px three tiles stretched across the whole monitor .trfnote 481px capped at 78ch, so the brief sat as a thin ribbon in a 2180px field — the page read as half-empty table 2055px TIN 191px, Mode 191px, Bank 191px — columns that hold "123-456-789-000" and "CASH" given the same width as Address padding chain 102px PER SIDE: wbwkbody 12 + wbwk2 12 + wbmonbody 12 + wbmon 12 + wbbandbody 10 + main 44, nested .wbchip gap 3px emoji sitting almost against its own label So the "wasted space" was not one rule but a stack of them, and the fix is a measure for the content plus a flatter nesting — not smaller type. THE HIERARCHY THIS ESTABLISHES 1 the week you are filling in — accent card, largest heading 2 the amount Finance must fund — the loudest number on screen 3 site name + its total — card headers 4 the request rows — quiet, dense, tabular 5 brief, month bands, meta — muted, out of the way ============================================================================ */ /* ── 1 · A MEASURE FOR THE CONTENT ────────────────────────────────────────── The widest real element is the 12-column table. Measured with real content it needs ~1345px: two native date pickers alone will not render below ~118px each, and there are twelve columns. 1440px gives it that plus the card insets, so the sheet fits WITHOUT side-scrolling on a normal monitor — while still cutting the 2180px full-bleed stretch that made three KPI tiles 720px wide each. Narrower screens keep the existing .trkscroll horizontal scroll, unchanged. */ .dwb2{ /* 1440 → 1720 (owner, 2026-09-04): wider, but still a measure — not the full monitor. Seven request columns need the room; the KPI tiles do not turn into billboards at this width. */ max-width:1720px; margin-inline:auto; /* NAMED, because the QPAD panel establishes a container of its own (request-detail-fields.js) and would otherwise swallow every unnamed query written against the sheet. The name is additive: the unnamed @container rules further down still resolve to this element exactly as before. */ container:dwb / inline-size; } /* ── 2 · THE BRIEF — reference material, not the headline ─────────────────── Kept in full (nothing removed), but it opens as two lines and expands on demand, so the data starts near the top of the screen instead of below a six-line paragraph. */ .dwb2 .trfnote{ max-width:none; margin:0 0 14px; padding:11px 14px 11px 13px; border-left:3px solid var(--olive,#7c8a3e); border-radius:0 10px 10px 0; background:color-mix(in srgb, var(--olive,#7c8a3e) 5%, transparent); font-size:11.5px; line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; cursor:pointer; transition:none; } .dwb2 .trfnote::after{ content:"… tap to read the full brief"; display:block; margin-top:4px; font-weight:800; font-size:10.5px; letter-spacing:.04em; color:var(--olive-d,#54632a); } .dwb2 .trfnote.dwb-open{ -webkit-line-clamp:unset; display:block; } .dwb2 .trfnote.dwb-open::after{ content:"tap to collapse"; } /* ── 3 · KPI STRIP — three equal tiles, not three billboards ──────────────── auto-fit + 1fr let each tile eat a third of a 2180px row. Explicit equal columns with a ceiling keeps them legible and puts the eye back on the data. */ .dwb2 .trkkpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 12px; } .dwb2 .trkkpi{ padding:11px 13px; } @container (max-width:720px){ .dwb2 .trkkpis{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } } /* ── 4 · FLATTEN THE NESTING ──────────────────────────────────────────────── Band > month > week > site > table each added its own 10-12px inset, so the table was inset 102px per side from the page. One inset per level, and the levels that only group (band body, month body) give theirs up entirely. */ .dwb2 .wbbandbody{ padding:6px 6px 2px; } .dwb2 .wbmon{ padding:8px 8px; margin:0 0 8px; } .dwb2 .wbmonbody{ padding:2px 0 0; } .dwb2 .wbwk2{ margin:7px 0; } .dwb2 .wbwkbody{ padding:0 10px 10px; } .dwb2 .wbsite{ margin:0 0 9px; } .dwb2 .wbsite:last-of-type{ margin-bottom:4px; } .dwb2 .wbadd{ padding:7px 10px 9px; } /* ── 5 · WEEK HEADER — the row most at risk of colliding ──────────────────── Up to eight children: number, range, "This week", lock chip, source chip and three lock buttons, then the total. It already wraps; what it lacked was breathing room between an emoji and its own label, and a total that could not be crowded off the line. */ .dwb2 .wbwk2 > .wbwksum{ padding:11px 13px; gap:12px; align-items:flex-start; } .dwb2 .wbwksum .mosumL{ gap:7px 8px; row-gap:6px; align-items:center; } .dwb2 .wbwkno{ font-size:15px; letter-spacing:-.01em; } .dwb2 .wbwksum .wkrng{ font-size:11px; } .dwb2 .wbwksum .mosumR{ flex:none; white-space:nowrap; font-size:15px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; align-self:center; } /* Emoji are wider than the 3px gap assumed, and render wider still on Windows — this is the reported "icon touching the text". */ .dwb2 .wbchip{ gap:5px; padding:3px 9px; line-height:1.7; } .dwb2 .wbchip.lockbtn, .dwb2 .wbchip.detopen, .dwb2 .wbchip.setdate{ padding:4px 10px; } /* ── 6 · SITE CARD ──────────────────────────────────────────────────────────*/ .dwb2 .wbsitehd{ padding:9px 12px; font-size:11px; } .dwb2 .wbsitehd span:last-child{ font-family:'IBM Plex Mono',monospace; font-weight:800; color:var(--ink); } /* ── 7 · THE TABLE — it must FIT, which means it cannot be min-width maths ── First attempt gave each column a pixel floor. Those floors summed to more than the container on any window narrower than ~1450px, so the last column was cut off — the reported clipping. Pixel floors can only ever be right at one width. A fixed table layout plus percentages is a guarantee, not an estimate: the browser lays the columns out from the declared ratios and the table is exactly 100% of its host, so it cannot overflow at ANY width. The percentages below are weighted by what each column actually holds — a TIN and the word CASH do not need the room an address does — and they favour the columns with a HARD minimum. A native date input and a alone made approval feel invisible: it looked like a filter, not a decision, so nobody could see whether a request had been approved or who could approve it. Now the Head/Owner gets a real affirmative control beside the dropdown, and an approved request says so plainly. */ .dwb2 .wbtbl td:nth-child(10){ white-space:normal; } .dwb2 .wbapprove{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; width:100%; justify-content:center; border:1px solid var(--olive,#7c8a3e); background:var(--olive,#7c8a3e); color:#fff; font:inherit; font-weight:800; font-size:11px; padding:5px 9px; border-radius:8px; cursor:pointer; transition:filter .12s, transform .06s; } .dwb2 .wbapprove:hover{ filter:brightness(1.07); } .dwb2 .wbapprove:active{ transform:scale(.97); } .dwb2 .wbapprove:focus-visible{ outline:2px solid var(--olive-d,#54632a); outline-offset:2px; } .dwb2 .wbapproved{ display:block; margin-top:5px; text-align:center; font-size:10px; font-weight:800; letter-spacing:.04em; color:#2f7a44; } html[data-theme="dark"] .dwb2 .wbapproved{ color:#67c97a; } /* ── 15 · QPAD — the sheet a PIC fills before the row ─────────────────────── Promoted from a grey disclosure line to a labelled section, because it is now a prerequisite rather than an afterthought. */ .dwb2 .rdfpanel{ margin:0 0 6px; border:1px solid var(--line2,#d9d9cf); border-left:3px solid var(--olive,#7c8a3e); border-radius:0 10px 10px 0; background:var(--paper2,#fff); } .dwb2 .rdfpanel > .rdfsum{ padding:8px 12px; cursor:pointer; list-style:none; font-size:11.5px; color:var(--ink); } .dwb2 .rdfpanel > .rdfsum::-webkit-details-marker{ display:none; } .dwb2 .rdfsumttl{ font-size:12px; color:var(--olive-d,#54632a); } html[data-theme="dark"] .dwb2 .rdfsumttl{ color:#b9c77e; } /* The row is waiting on its QPAD sheet. */ .dwb2 tr.qpad-locked > td:first-child{ box-shadow:inset 3px 0 0 #c8861f; } .dwb2 tr.qpad-locked input.wbin:not(.wbpaidamt):not(.wbstat2){ background:color-mix(in srgb,#c8861f 7%,var(--paper3,#f4f4ef)); border-style:dashed; } .dwb2 .rdfpanel.qpad-need{ border-color:#c8861f; border-left-color:#c8861f; box-shadow:0 0 0 3px rgba(200,134,31,.16); } @media(prefers-reduced-motion:no-preference){ .dwb2 .rdfpanel.qpad-need{ transition:box-shadow .18s ease, border-color .18s ease; } } /* ── 15 · REQUEST · QPAD · COMMENT — three columns, not three stacked rows ─── Owner, 2026-09-03: "every request the qpad is on the side then also the comments … like Request > QPAD > Comment". The sheet was a 12-column table whose every request pushed its QPAD sheet and its thread BELOW it, so reading one request meant scrolling past it and losing sight of the row you were deciding on. Here each request becomes a card laid out as two columns — the request's own fields on the left, its QPAD panel on the right — and the QPAD panel is itself split into sheet and conversation (request-detail-fields.js), so across the card the eye reads Request → QPAD → Comment. SCOPE: presentation only. Every input, every onchange, every column width below the breakpoint and every total is untouched — this re-flows markup that renderWeeklyHTML already emits. A CONTAINER query, not a media query: .dwb2 is capped at 1440px and sits beside a sidebar, so the sheet's own width — not the window's — is what decides whether three columns fit. Below it the classic table is exactly what it always was, which is still the right answer on a phone. */ @container (min-width:1000px){ /* nothing overflows sideways any more, so the sheet stops being a scroller */ .dwb2 .wbscroll{ overflow:visible; } .dwb2 .wbtbl{ display:block; min-width:0; table-layout:auto; } .dwb2 .wbtbl > thead{ display:none; } /* each field carries its own label below */ .dwb2 .wbreq{ display:grid; /* 3 : 4 — the request takes three sevenths, the QPAD sheet with its comment column the other four (3 + 1, see .rdfsplit). */ grid-template-columns:minmax(0,3fr) minmax(0,4fr); gap:0 16px; align-items:start; margin:0 0 10px; padding:12px; border:1px solid var(--line,#d3d8de); border-radius:12px; background:var(--paper2,#fbfcfd); } .dwb2 .wbreq > tr{ display:block; } /* text-align:left undoes the shared .trktbl rule that right-aligns every cell but the first. That reads correctly under a shared header; under a per-field label it pushes every label away from the field it names. The two money inputs keep their own right alignment (.wbamt). */ .dwb2 .wbreq > tr > td{ display:block; width:auto!important; padding:0; border:0; white-space:normal; text-align:left; } /* a card is its own band — the zebra that made a 12-column row traceable has nothing left to trace */ .dwb2 .wbtbl tbody.wbreq:nth-of-type(even) tr.wbrow > td{ background:transparent; } /* ── column 1 · THE REQUEST, as a labelled mini-form ────────────────────*/ /* .wbreq > tr sets display:block above; this must out-specify it, hence the tag on the class rather than the class alone. */ .dwb2 .wbreq > tr.wbrow{ grid-column:1; grid-row:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; align-content:start; } .dwb2 .wbrow > td::before{ content:attr(data-l); display:block; margin-bottom:4px; font:800 9.5px/1 system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#697079); } .dwb2 .wbrow > td:not([data-l])::before{ content:none; } /* Reading order: who → how much → when → where → how it is paid → the decision. `order` also drives auto-placement, so the pairs below fall out of it without a single explicit row. */ .dwb2 .wbrow > td:nth-child(1) { order:1; grid-column:1/-1; } /* Supplier */ .dwb2 .wbrow > td:nth-child(4) { order:2; } /* Amount */ .dwb2 .wbrow > td:nth-child(11){ order:3; } /* Paid amount */ .dwb2 .wbrow > td:nth-child(5) { order:4; } /* Date needed */ .dwb2 .wbrow > td:nth-child(6) { order:5; } /* Due date */ .dwb2 .wbrow > td:nth-child(3) { order:6; grid-column:1/-1; } /* Address */ .dwb2 .wbrow > td:nth-child(2) { order:7; } /* TIN */ .dwb2 .wbrow > td:nth-child(7) { order:8; } /* Mode */ .dwb2 .wbrow > td:nth-child(8) { order:9; } /* Bank */ .dwb2 .wbrow > td:nth-child(9) { order:10; } /* Account # */ .dwb2 .wbrow > td:nth-child(10){ order:11; grid-column:1/-1; } /* Status */ .dwb2 .wbrow > td:nth-child(12){ order:12; grid-column:1/-1; } /* flag/delete */ /* the actions cell keeps the flex row it needs — the block rule above is more specific than the .wbactc rule it would otherwise override */ .dwb2 .wbrow > td.wbactc{ display:flex; justify-content:flex-end; align-items:center; gap:2px; padding:2px 0 0; } .dwb2 .wbrow .wbstat2{ text-align:center; font-size:11.5px; } /* ── column 2 · THE QPAD SHEET (which carries the thread beside it) ─────*/ .dwb2 .wbrdfrow{ grid-column:2; grid-row:1; } .dwb2 .wbreq .rdfpanel{ margin:0; } /* ── full width under both · the flag thread, when a request is flagged ─*/ .dwb2 .wbcmtrow{ grid-column:1/-1; grid-row:2; padding-top:10px; } /* a flagged request colours its whole card, not two cells of it */ .dwb2 .wbreq:has(> .wbflagrow){ border-color:color-mix(in srgb,#E0922B 55%,var(--line,#d3d8de)); background:color-mix(in srgb,#E0922B 7%,var(--paper2,#fbfcfd)); } .dwb2 .wbtbl tbody.wbreq tr.wbflagrow > td{ background:transparent!important; } /* the add-request button belongs to the list of cards, not to a table edge */ .dwb2 .wbadd{ margin-top:2px; } } /* Below the card breakpoint the sheet is the classic 12-column table again, and the QPAD panel spans its full 1080px inside a horizontal scroller. The panel is therefore WIDE while the screen is narrow, so its own container query would keep the thread beside the sheet — off the right edge, reachable only by side-scrolling. Keyed to the sheet (named container) rather than the panel, this puts the thread back under the sheet wherever there are no cards to sit it beside. */ @container dwb (max-width:999.98px){ .dwb2 .rdfsplit{ grid-template-columns:minmax(0,1fr); gap:12px; } .dwb2 .rdfsplitside .rclist{ flex:0 1 auto; max-height:300px; } }