/* EVO TrustGuard — page-admin.css * * Owned by: admin.html — AND the admin dark-glass shell layer (.ash-*) * shared by the THREE admin pages: admin.html, * sales-pipeline.html, outreach.html (M8.1). The shell is * implemented ONCE here and loaded by all three pages BEFORE * their own page-*.css; see /css/AGENTS.md "Admin dark-glass * shell" for the pattern + rationale. * Category: admin shell page (PERMANENTLY DARK — data-theme="dark" is * pinned statically on of all three admin pages; no * light variant, no theme toggle on admin surfaces) * Cascade: tokens → base → utilities → components → portal-chrome → * shared → shared-themes → page-admin (+ page-sales-pipeline / * page-outreach after it on those pages) * Edit policy: .ash-* shell rules + admin.html page rules live here. * Anything used by 5+ pages should be promoted to * /css/components.css with a /css/AGENTS.md update. * * History: extracted C56 (verbatim move); dark Glass pass C107; M8.1 * replaced the light .dash-nav / .tab-bar chrome with the * dark-glass sidebar shell. The pre-M8.1 light base rules below * are retained where markup survives — the static dark pin means * the [data-theme="dark"] overrides are always active. */ body { font-family: var(--font-sans); background: var(--bg); color: var(--dark); line-height: var(--leading-relaxed); min-height: 100vh; display: flex; flex-direction: column; } /* ════════════════════════════════════════════════════════════════════════ ADMIN DARK-GLASS SHELL (.ash-*) — M8.1. One chrome across admin.html / sales-pipeline.html / outreach.html: glass top bar (brand + env badge + static search + Portal link + avatar), grouped left sidebar, main column. Built from the 3G.1 Glass tokens; page-scoped accent vars follow the rule-2 --sp-* precedent. Alpha washes are literal rgba() of token hues (the C103 status-wash pattern). ════════════════════════════════════════════════════════════════════════ */ :root { --ash-red-lit: #ff6f6a; /* lightened brand red — active nav text on near-black (mockup .item.on) */ --ash-side-w: 218px; /* sidebar column width (mockup) */ } /* Tier-0 vignette page background (never flat black). */ body { background: var(--glass-page-grad); background-attachment: fixed; } /* Pre-gate spinner. */ .ash-gate { flex: 1; min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: var(--text-base); } /* Top bar — sticky glass. */ .ash-top { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-4); padding: calc(var(--space-2-5) + env(safe-area-inset-top)) var(--space-5) var(--space-2-5); background: var(--tier3-tint); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-bottom: 1px solid var(--hairline); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ash-top { background: var(--tier3-tint-opaque); } } .ash-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; } .ash-brand .brand-logo { display: block; height: 42px; width: auto; } /* Theme-adaptive wordmark fills (LOCKED C38 — shield PNG + EVO red + serif white; CSS fills win over any legacy presentation attributes). */ .ash-brand .brand-evo { fill: var(--red); } .ash-brand .brand-trustguard { fill: var(--text); } .ash-brand-admin { color: var(--text-muted); font-size: var(--text-md); padding-left: var(--space-3-5); border-left: 1px solid var(--border); white-space: nowrap; } /* Environment badge — amber STAGING pill on localhost/staging, absent on prod (hostname-derived client-side via window.TG.env(); render-only). */ .ash-env { flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; color: var(--amber); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 6px; padding: 3px var(--space-2-5); } /* Static visual-parity search chrome — unwired (M8.2+ candidate). */ .ash-search { flex: 1 1 auto; max-width: 420px; margin-left: auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-disabled); background: var(--tier2-bg); border: 1px solid var(--hairline); box-shadow: var(--tier2-inset); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3-5); font-size: var(--text-md); } .ash-portal { color: var(--text-muted); font-size: var(--text-md); text-decoration: none; white-space: nowrap; flex: none; } .ash-portal:hover { color: var(--text); } /* Shell grid — sidebar + main. */ .ash-shell { flex: 1; display: grid; grid-template-columns: var(--ash-side-w) 1fr; align-items: stretch; } .ash-side { border-right: 1px solid var(--hairline); padding: var(--space-5) var(--space-3); background: rgba(0, 0, 0, 0.25); /* translucent sidebar wash over the vignette (mockup .side) */ } .ash-grp { font-size: var(--text-xxs); font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-disabled); margin: var(--space-4-5) var(--space-2-5) var(--space-2); } .ash-grp:first-child { margin-top: 0; } .ash-item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; padding: var(--space-2-5) var(--space-3); min-height: 40px; margin-bottom: 2px; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-md); text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .ash-item:hover { background: var(--surface); color: var(--text); } .ash-item.on { background: var(--red-wash); border-color: rgba(229, 52, 46, 0.35); color: var(--ash-red-lit); font-weight: var(--weight-medium); } .ash-item.is-disabled { opacity: 0.45; cursor: not-allowed; } .ash-item.is-disabled:hover { background: none; color: var(--text-muted); } .ash-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; flex: none; } .ash-main { padding: var(--space-6); min-width: 0; } /* Shell action buttons (page headers + pagers on the admin pages). */ .ash-btn { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-3-5); min-height: 40px; border-radius: var(--btn-radius); background: var(--btn-secondary-bg); border: var(--btn-secondary-border); box-shadow: var(--btn-secondary-shadow); color: var(--btn-secondary-text); cursor: pointer; white-space: nowrap; transition: filter 0.15s ease, transform 0.18s var(--ease-spring); } .ash-btn:hover:not(:disabled) { filter: brightness(1.06); } .ash-btn:active:not(:disabled) { transform: scale(var(--press-scale)); } .ash-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ash-btn-primary { background: var(--btn-primary-bg); border: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); color: var(--btn-primary-text); } /* ── M8.4.1 — STICKY DESKTOP SIDEBAR (≥900px): WINDOW scroll + sticky sidebar. The desktop scroll container is the WINDOW (NOT .ash-main) so in-content position:sticky elements — the shared .list-filterbar (list-header.css), authored for window-scroll at top:calc(77px + …) — keep resolving against the window and pin correctly at the top of the card list. The reverted M8.4 approach made .ash-main the scroll container, which reparented every descendant sticky's offset context and floated the filter bar 77px into the list (M8.4.1 BUG 2). align-self:start collapses the otherwise-stretched grid item to content height so position:sticky engages; top:62px is the desktop top-bar height (10px pad + 42px brand-logo + 10px pad; env(safe-area-inset-top) resolves to 0 at desktop). Own overflow-y + max-height keep an over-long group list reachable. .ash-top keeps its own sticky top:0 rule (admin.css line ~49). 100vh max-height line is the no-dvh fallback. ── */ @media (min-width: 900px) { .ash-side { position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto; } } /* ── M8.4 — MOBILE NAV (≤899px): glass nav sheet replaces the M8.1 horizontal-scroll strip. The sidebar hides entirely; .ash-navtrigger (a real native