as siblings of . With no grid container, the aside was a block box at full page width and the content started underneath it. That single missing wrapper is the whole of the reported overlap; everything below assumes the wrapper now exists (layouts/dashboard). Two rules here are load-bearing and should not be removed: · `min-width: 0` on the grid children. Grid and flex items default to min-width:auto, which refuses to shrink below their content — one wide table inside the content column widens the column, widens the grid, and pushes the page into horizontal scroll. This is what makes tables scroll in their own wrapper instead of scrolling the page. · `box-sizing: border-box` on the shell parts. The sidebar has padding and a border; without it, 264px + 24px + 1px is what actually occupies the column. ========================================================================== */ body.dash-body { background: var(--color-background-deep); } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; width: 100%; box-sizing: border-box; } .app-shell > * { min-width: 0; box-sizing: border-box; } /* Retained so any page still marked `.dash` gets the same grid. */ .dash:not(.app-shell) { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* ---------------------------------------------------------------- sidebar */ .dash-sidebar { grid-column: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: var(--color-background-primary); border-inline-end: 1px solid var(--color-border); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-4); z-index: 40; } .dash-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-inline: var(--sp-2); } .dash-sidebar__brand { display: flex; align-items: center; min-height: 32px; } .dash-sidebar__brand img { height: 24px; width: auto; } /* Present only while the drawer is: display:none rather than visibility keeps it out of the tab order on desktop, where there is nothing to close. */ .dash-sidebar__close { display: none; } .company-card { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); box-sizing: border-box; } .company-card__mark { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-gold-edge); color: var(--color-gold-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; } .company-card__body { min-width: 0; flex: 1; } .company-card__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .company-card__role { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 1px; } .company-card__meta { font-size: var(--fs-xs); color: var(--color-gold-primary); margin-top: var(--sp-2); } .company-card__bar { height: 3px; width: 100%; margin-top: 5px; border-radius: var(--r-pill); background: var(--color-border-strong); overflow: hidden; } .company-card__bar > span { display: block; height: 100%; background: var(--color-gold-primary); border-radius: inherit; } /* -------------------------------------------------------------- navigation */ .dash-nav { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; } .dash-nav__group { display: flex; flex-direction: column; gap: 2px; } .dash-nav__heading { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .09em; color: var(--color-text-muted); padding-inline: 14px; margin-bottom: var(--sp-1); } .dash-nav__link { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 40px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-sm); line-height: 1.25; text-align: start; color: var(--color-text-secondary); background: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .dash-nav__icon { flex: none; opacity: .7; } .dash-nav__text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-nav__tag { flex: none; font-size: 10px; margin-inline-start: auto; } .dash-nav__link:hover { color: var(--color-text-primary); background: rgba(255,255,255,.04); } .dash-nav__link:focus-visible { outline: 2px solid var(--color-gold-primary); outline-offset: -2px; } .dash-nav__link.is-active { color: var(--color-gold-primary); border-color: var(--color-gold-edge); background: var(--color-gold-wash); font-weight: 600; } .dash-nav__link.is-active .dash-nav__icon { opacity: 1; } /* Hidden by the topbar's navigation filter; not a state the server ever sets. */ .dash-nav__link[data-filtered] { display: none; } .dash-nav__group[data-filtered] { display: none; } .dash-sidebar__foot { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 2px; } .dash-sidebar__foot .sign-out-form { margin: 0; } .dash-sidebar__foot .sign-out { color: var(--color-danger); font-weight: 600; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); } .dash-sidebar__foot .sign-out:hover { background: var(--color-danger-wash); color: var(--color-danger); } /* ------------------------------------------------------------ main column */ .dash-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; max-width: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------- topbar */ /* Sticky INSIDE the content column, so no z-index can carry it over the sidebar — it is not a page-level bar and never was meant to be. */ .dash-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-4); box-sizing: border-box; width: 100%; min-height: var(--topbar-h); padding: var(--sp-3) var(--sp-6); background: rgba(7, 17, 29, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .dash-topbar__menu { display: none; flex: none; } .dash-topbar__heading { min-width: 0; flex: 1; } .dash-topbar__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-topbar__sub { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-topbar__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .dash-search { display: flex; align-items: center; gap: var(--sp-2); box-sizing: border-box; padding: 7px var(--sp-3); border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); color: var(--color-text-muted); background: var(--color-background-deep); } .dash-search input { border: 0; background: none; color: var(--color-text-primary); font: inherit; font-size: var(--fs-sm); width: 168px; min-width: 0; padding: 0; } .dash-search input:focus { outline: none; } .dash-search:focus-within { border-color: var(--color-gold-edge); } .user-menu { position: relative; flex: none; } .user-menu__trigger { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2) 5px 5px; border: 1px solid var(--color-border-strong); border-radius: var(--r-pill); background: none; color: var(--color-text-secondary); cursor: pointer; font: inherit; } .user-menu__trigger:hover { border-color: var(--color-gold-edge); color: var(--color-text-primary); } .user-menu__mark { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-gold-wash); border: 1px solid var(--color-gold-edge); color: var(--color-gold-primary); font-size: var(--fs-xs); font-weight: 700; } .user-menu__id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 150px; } .user-menu__name { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .user-menu__role { font-size: 11px; color: var(--color-text-muted); } .user-menu__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; min-width: 208px; padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; background: var(--color-panel-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); } .user-menu__panel[hidden] { display: none; } .user-menu__code { font-size: var(--fs-xs); color: var(--color-gold-primary); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-1); } .user-menu__panel a, .user-menu__panel .sign-out { display: block; width: 100%; text-align: start; padding: 9px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); background: none; border: 0; cursor: pointer; font-family: inherit; } .user-menu__panel a:hover { background: rgba(255,255,255,.04); color: var(--color-text-primary); } .user-menu__panel .sign-out { color: var(--color-danger); font-weight: 600; } .user-menu__panel .sign-out:hover { background: var(--color-danger-wash); } .user-menu__panel form { margin: 0; } /* ---------------------------------------------------------------- content */ .dash-content { flex: 1; box-sizing: border-box; width: 100%; max-width: 1600px; margin-inline: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; } /* Page actions, left behind when each screen's own header moved into the topbar. Wraps, and aligns to the inline end so it reads as a toolbar rather than a heading. */ .dash-page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-3); min-width: 0; } .dash-page-actions:empty { display: none; } /* Kept for anything still carrying its own in-page header. */ .dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } .dash-header__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .dash-header__sub { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-top: 2px; } /* Wraps. Two buttons side by side in a 320px column is 360px of content, and a flex row that will not wrap pushes the difference onto the page as horizontal scroll — which is what Reports and Settings did at 320. */ .dash-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; } /* --------------------------------------------------------------- the drawer */ /* Inert until a breakpoint turns the sidebar into an overlay. */ .dash-scrim { display: none; } .dash-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); } .dash-footer__note { margin-top: 2px; max-width: 62ch; } /* ---------------------------------------------------------- empty states */ .empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-2); } .empty-state__mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px dashed var(--color-border-strong); border-radius: var(--r-md); color: var(--color-text-muted); margin-bottom: var(--sp-1); } .empty-state__title { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); } .empty-state__body { font-size: var(--fs-xs); color: var(--color-text-muted); max-width: 46ch; } .kpi__link { margin-top: var(--sp-3); } .dash-welcome { display: flex; flex-direction: column; gap: 2px; } /* A status badge beside a panel title keeps its own line rather than breaking mid-phrase when the column is narrow — "Partially / verified" over two lines reads as two states. */ .panel__head .badge { flex: none; white-space: nowrap; } .dash-footer strong { color: var(--color-text-secondary); letter-spacing: .06em; font-size: var(--fs-label); text-transform: uppercase; } .dash-footer nav { display: flex; gap: var(--sp-5); } .dash-grid { display: grid; gap: var(--sp-5); } .dash-grid--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid--main-side { grid-template-columns: minmax(0, 1fr) 340px; } .quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .detail-panel { border: 1px solid var(--color-gold-edge); border-radius: var(--r-lg); background: var(--color-panel-primary); overflow: hidden; } .detail-panel__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); } .detail-panel__ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-gold-primary); } .detail-panel__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); } .status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--color-gold-edge); border-radius: var(--r-md); background: var(--color-gold-wash); font-size: var(--fs-sm); } .status-bar .grow { display: flex; flex-wrap: wrap; gap: var(--sp-5); } .conv-list { display: flex; flex-direction: column; } .conv { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background var(--t-fast); } .conv:hover { background: rgba(255,255,255,.025); } .conv.is-active { background: var(--color-gold-wash); box-shadow: inset 3px 0 0 var(--color-gold-primary); } .conv__name { font-size: var(--fs-sm); font-weight: 600; } .conv__ctx { font-size: var(--fs-xs); color: var(--color-gold-primary); } .conv__preview { font-size: var(--fs-xs); color: var(--color-text-muted); } .conv__count { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gold-primary); color: var(--color-text-inverse); font-size: 11px; font-weight: 700; } .thread { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); } .bubble { max-width: 78%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid var(--color-border); background: var(--color-panel-secondary); } .bubble--out { align-self: flex-end; border-color: var(--color-success); background: rgba(66,199,122,.08); } .bubble--system { align-self: center; max-width: 100%; text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); background: transparent; border-style: dashed; } .bubble__meta { font-size: 11px; color: var(--color-text-muted); margin-top: var(--sp-2); font-family: var(--font-mono); } .composer { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--color-border); } .doc-row { display: flex; align-items: center; gap: var(--sp-3); } .doc-row__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); color: var(--color-gold-primary); } .folder-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); cursor: pointer; } .folder-list__item:hover { background: rgba(255,255,255,.03); color: var(--color-text-primary); } .folder-list__item.is-active { background: var(--color-gold-wash); color: var(--color-gold-primary); border: 1px solid var(--color-gold-edge); font-weight: 600; } .route { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; position: relative; margin-block: var(--sp-4); } .route::before { content: ""; position: absolute; inset-inline-start: 16%; inset-inline-end: 16%; top: 9px; height: 2px; background: var(--color-border-strong); } .route__node { position: relative; } .route__dot { width: 20px; height: 20px; margin: 0 auto var(--sp-2); border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-background-primary); } .route__node.is-done .route__dot { border-color: var(--color-success); } .route__node.is-current .route__dot { border-color: var(--color-gold-primary); box-shadow: 0 0 0 4px var(--color-gold-wash); } /* The per-page menu button. R47 hand-wrote one of these into each dashboard page's own

; the topbar now carries the only one, so these stay hidden at every width and the pages that still contain the markup show no second button. The drawer script binds them anyway, so an old page whose header is still in place keeps working. */ .mobile-dash-toggle { display: none !important; } /* Operations consoles are separated so restricted areas are never mistaken for member screens. Renamed from .is-admin with the sidebar rewrite. */ .dash-nav__link.is-ops .badge { flex: none; } .dash-nav__link.is-ops.is-active { border-color: var(--color-danger); background: var(--color-danger-wash); color: var(--color-danger); } /* Sidebar-left layouts. Defined as classes rather than inline styles so the responsive breakpoints can still collapse them — an inline grid-template-columns wins over any media query and was forcing horizontal overflow on small screens. */ .dash-grid--side-narrow { grid-template-columns: 280px minmax(0, 1fr); } .dash-grid--side-wide { grid-template-columns: 340px minmax(0, 1fr); } @media (max-width: 1200px) { .dash-grid--side-narrow, .dash-grid--side-wide { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------- member notifications (R49) */ /* The bell carries a count, and the count is the only thing that gets a member to look at a price confirmation that has been waiting two days. It is positioned on the icon rather than beside it so the topbar's width does not change when the first notification arrives. */ .notif-bell { position: relative; } .notif-bell.has-unread { color: var(--color-gold-primary); border-color: var(--color-gold-edge); } .notif-bell__count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } .notif { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); border-inline-start: 2px solid transparent; } .notif:last-child { border-bottom: 0; } .notif--info { border-inline-start-color: var(--color-information); } .notif--warning { border-inline-start-color: var(--color-warning); } .notif--danger { border-inline-start-color: var(--color-danger); } /* Unread is a background, not a bold weight: a list where half the lines are bold is harder to read than one where half the lines are lit. */ .notif.is-unread { background: rgba(255,255,255,.025); } .notif__body { flex: 1; min-width: 0; } .notif__title { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); } .notif.is-unread .notif__title { color: var(--color-gold-primary); } .notif__title a { color: inherit; } .notif__title a:hover { text-decoration: underline; } .notif__text { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 3px; max-width: 78ch; } .notif__meta { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .notif__mark { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 50%; } .notif__mark:hover { background: rgba(255,255,255,.06); } .notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold-primary); } .notif.is-read .notif__dot { background: var(--color-border-strong); } @media (max-width: 560px) { .notif { flex-direction: column; gap: var(--sp-2); padding-inline: var(--sp-4); } .notif__meta { width: 100%; justify-content: space-between; } } /* ------------------------------------------------------- ExMart Supply (R50) */ /* The browse tree on the search screen.

rather than JS: the browser already knows how to open and close a disclosure, and it works before any script has run. */ .supply-tree { display: flex; flex-direction: column; gap: 2px; } .supply-tree__all, .supply-tree__group { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 7px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); } .supply-tree__all:hover, .supply-tree__group:hover { background: rgba(255,255,255,.04); color: var(--color-text-primary); } .supply-tree__all.is-active, .supply-tree__group.is-active { background: var(--color-gold-wash); color: var(--color-gold-primary); border: 1px solid var(--color-gold-edge); font-weight: 600; } .supply-tree__main > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 8px var(--sp-3); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); border-radius: var(--r-sm); } .supply-tree__main > summary::-webkit-details-marker { display: none; } .supply-tree__main > summary:hover { background: rgba(255,255,255,.03); } .supply-tree__main[open] > summary { color: var(--color-gold-primary); } .supply-tree__main .supply-tree__group { padding-inline-start: var(--sp-6); } /* A facet is a link that reads as a filter. The count is the promise; see the comment in SupplyCatalogue::facets about why it has to be exact. */ .facet { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 6px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); } .facet:hover { background: rgba(255,255,255,.04); color: var(--color-text-primary); } .facet.is-active { background: var(--color-gold-wash); color: var(--color-gold-primary); font-weight: 600; } .facet__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .facet__count { flex: none; font-size: var(--fs-xs); color: var(--color-text-muted); } .facet.is-active .facet__count { color: var(--color-gold-primary); } /* The capability picker. */ .cap-main { margin-bottom: var(--sp-6); } .cap-main__title { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-h3); font-weight: 700; color: var(--color-gold-primary); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--color-border); } .cap-sub { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .09em; color: var(--color-text-muted); margin: var(--sp-4) 0 var(--sp-2); } .cap-group { border: 1px solid var(--color-border); border-radius: var(--r-sm); margin-bottom: var(--sp-2); } .cap-group__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); } .cap-group__tick { flex: 1; min-width: 0; margin: 0; } .cap-group__open { flex: none; } .cap-group__items { border-top: 1px solid var(--color-border); padding: var(--sp-3); } .cap-group__items[hidden] { display: none; } .cap-group__search { margin-bottom: var(--sp-3); } .cap-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 7px var(--sp-2); border-radius: var(--r-sm); cursor: pointer; } .cap-item:hover { background: rgba(255,255,255,.03); } .cap-item__body { min-width: 0; display: flex; flex-direction: column; } .cap-item__name { font-size: var(--fs-sm); color: var(--color-text-primary); } .cap-item__meta { font-size: var(--fs-xs); color: var(--color-text-muted); } @media (max-width: 700px) { .cap-group__head { flex-wrap: wrap; } .cap-group__open { width: 100%; } }