/* ============================================================================= admin.css — minimal scaffolding around the Vela Design System. The DS supplies every visual primitive via `` components and token-driven CSS custom properties (see https://ds.cdn.velaintelligence.com/ai/component-catalog.yaml and https://ds.cdn.velaintelligence.com/ai/tokens.yaml). This file only contains app-specific scaffolding the DS doesn't (and shouldn't) own: · Sharper-corner override on the DS radius ref tokens · App-shell layering (canvas vs aside vs sidebar surfaces) · The Deal Intelligence brand lockup glyphs · A code-block style (DS doesn't ship one) · The settings-row layout used by the appearance switcher Everything else — layout primitives, tables, lists, timeline, modals, forms, empty states, badges — comes from the DS. If you're tempted to add a new rule here, check the DS catalog first. ========================================================================== */ html, body { margin: 0; padding: 0; height: 100%; /* Disable rubber-band / pull-to-refresh — the admin shell is an app surface, not a document. Without this, dragging at the top of the page on macOS/touch devices bounces the whole viewport. */ overscroll-behavior: none; font-family: var(--vi-ref-font-sans, system-ui, sans-serif); background: var(--vi-sem-surface-canvas, #fff); color: var(--vi-sem-text-default, #111); } /* defaults to no intrinsic height. Force a viewport-filling shell and widen both rails. The aside width isn't exposed as a DS token, so we target ::part(aside) directly (the catalog lists `aside` as an exposed part on vi-page). */ vi-page#shell { display: block; min-height: 100vh; --vi-page-navigation-width: 220px; } vi-page#shell::part(aside) { width: 220px; } /* ── app-shell surface layering ──────────────────────────────────────────── */ /* Canvas + sidebar + aside all use DS semantic surface tokens, so they flip with the theme switcher automatically. Sidebar and aside elevate above the canvas content area (DS Explorer pattern). */ .app-canvas { background: var(--vi-sem-surface-canvas); color: var(--vi-sem-text-default); } .app-sidebar { background: var(--vi-sem-surface-default); color: var(--vi-sem-text-default); border-right: 1px solid var(--vi-sem-border-default); } /* Aside: in vi-page's grid the `aside` slot lives in the LEFT column, stacked BELOW the navigation (see `packages/components/src/vi-page.ts` — "Left column (nav + aside, flush)"). So our user chip sits at the bottom of the sidebar, not on a right rail. - Border-right matches .app-sidebar so the column-divider line is continuous from top to bottom — without it, the divider breaks where the chip begins. */ .app-aside { padding: 16px 8px; border-right: 1px solid var(--vi-sem-border-default); background: var(--vi-sem-surface-default); height: 100%; box-sizing: border-box; } /* Two-line content inside the chip's default slot. Block children so they stack inside the row's .content span (which has white-space:nowrap, but that only stops text wrap — block stacking still works). */ .user-chip__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; } .user-chip__name { display: block; font-weight: 500; font-size: 0.88rem; color: var(--vi-sem-text-default); overflow: hidden; text-overflow: ellipsis; } .user-chip__email { display: block; font-size: 0.74rem; color: var(--vi-sem-text-muted); overflow: hidden; text-overflow: ellipsis; } #sidenav-wrap { padding: 16px 8px; } #content { padding: 24px 32px; max-width: 1280px; /* Pages render their lists into here; min-width:0 lets flex/grid children * (including ) actually constrain to the available width * instead of expanding to their content's natural width. */ min-width: 0; } /* ── data-grid sizing ───────────────────────────────────────────────────── */ /* is a block-level host that the DS doesn't width-constrain * by itself: its own shadow `:host { display: block }` lets the host take * the natural width of its inner table, and its `.table-wrap` (exposed as * ::part(base)) has `overflow: auto` with no width so it grows to fit the * table instead of constraining it. Pin both layers explicitly + force * box-sizing + content min-width so the host stays inside #content's * available width and any actually-too-wide row scrolls horizontally * inside the table wrap (rather than the page itself). */ vi-data-grid { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } vi-data-grid::part(base) { width: 100%; max-width: 100%; box-sizing: border-box; } /* Primary identifier cell rendered as a clickable affordance — the * canonical "open this row" pattern in admin tables now that the * wrapper no longer auto-injects an Open column. Used as a slotted * on orgs (href-based) or