/* ===========================================================================
   Sample PARTNER portal — the live portal.vacei.com shell and screens.
   ---------------------------------------------------------------------------
   Every value here is read off the shipped Admin-canvas code
   (vacei-portal-frontend origin/main, 2026-09-03):
     MainLayout.tsx · SideBar.tsx + vacei-sidebar.css + vacei-canvas-shell.css
     (the solid-white rail, tint-fill active rows, masked PNG icon set) ·
     TopHeader.tsx (.vc-header) · vacei-canvas.css / vacei-brand.css /
     vacei-brand-theme.css / a4-ui.css tokens · hero-assistant.css +
     HeroAssistant.tsx + DashboardShell.tsx (Overview) · PageHeader.tsx,
     ListPage / ListTable / FilterPills / StatusChip (Companies, Billing) ·
     EngagementsA4.tsx + a4-exact.css (Engagements).
   Namespace `pp-`.
   =========================================================================== */

:root {
  /* vacei-canvas.css §1 */
  --vc-teal: #17695f; --vc-teal-dark: #0a443d;
  --vc-ink: #16211f; --vc-ink-text: #1b2a27;
  --vc-ink-muted: rgba(27,42,39,.6); --vc-ink-faint: rgba(27,42,39,.45);
  --vc-btn-ink: #16211f; --vc-btn-ink-hover: #17695f;
  --vc-canvas-alt: #eff3f1; --vc-fill: #f2f5f4; --vc-fill-active: #eaf0ee;
  --vc-row-hover: #f7fbfa; --vc-hairline: rgba(27,42,39,.09);
  --vc-waiting-fg: #7a4a08; --vc-waiting-bg: #f8eec9; --vc-amber: #d9a514; --vc-presence: #4caf7d;
  --vc-accent-books: oklch(0.5 0.08 180); --vc-accent-vat: oklch(0.5 0.08 255); --vc-accent-tax: oklch(0.5 0.08 210);
  --vc-accent-payroll: oklch(0.5 0.08 305); --vc-accent-audit: oklch(0.5 0.08 30); --vc-accent-corporate: oklch(0.5 0.08 80);
  --vc-accent-documents: oklch(0.5 0.08 120);
  /* vacei-brand.css (teal era) over vacei-brand-theme.css (neutrals, status) */
  --a4-accent: #33646E; --a4-accent-deep: #2A535C; --a4-accent-bg: #EBF0F0;
  --a4-ink: #151515; --a4-ink-2: #3B3B3B; --a4-ink-muted: #6B6B6B; --a4-ink-3: #8E8E8E;
  --a4-card: #FFFFFF; --a4-surface-subtle: #F2F2F2; --a4-surface-quiet: #FAFAFA;
  --a4-hairline: #E4E4E4; --a4-hairline-soft: #EDEDED; --a4-hairline-strong: #D6D6D6;
  --a4-positive: #186246; --a4-positive-bg: rgba(24,98,70,.12); --a4-positive-dot: #186246;
  --a4-warn: #7d5110; --a4-warn-bg: rgba(125,81,16,.12); --a4-warn-dot: #7d5110;
  --a4-danger: #a32c2c; --a4-danger-bg: rgba(163,44,44,.12); --a4-danger-dot: #a32c2c;
  --a4-info: #00699f; --a4-info-bg: #e6f2fb; --a4-info-dot: #007bc2;
  --a4-neutral: #50565e; --a4-neutral-bg: rgba(25,28,31,.06);
  --a4-auto: #2A535C; --a4-auto-bg: #EBF0F0; --a4-auto-dot: #33646E;
  --a4-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  /* hero-assistant.css */
  --a4-hero-cover-base: #4E7B84;
  --a4-hero-cover-grad: linear-gradient(112deg, #33646E 0%, #4E7B84 34%, #6B939B 68%, #8FAEB3 100%);
  --a4-hero-cover-bloom: radial-gradient(120% 90% at 88% 8%, rgba(255,255,255,0.16) 0%, transparent 58%);
  --a4-hero-cover-scrim: linear-gradient(90deg, rgba(23,52,58,0.38) 0%, rgba(23,52,58,0.18) 38%, transparent 62%);
  --a4-hero-cover-shadow: 0 10px 30px rgba(23,52,58,0.20);
  --a4-hero-assist-grad:
    radial-gradient(120% 90% at 12% 108%, rgba(150,168,74,.55) 0%, rgba(150,168,74,0) 62%),
    radial-gradient(90% 80% at 88% 112%, rgba(168,180,86,.45) 0%, rgba(168,180,86,0) 58%),
    linear-gradient(158deg, #E7EBB4 0%, #FAFD86 100%);
  --a4-hero-assist-shadow: 0 16px 40px rgba(70,86,14,0.20);
  --a4-hero-ink: #173B40; --a4-hero-dark: #173B40;
}

body { background: var(--vc-canvas-alt); color: var(--a4-ink); }
.a4-num { font-family: var(--a4-font-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }

/* ── Shell (MainLayout.tsx: p-16, gap-18, rail beside the content column) ── */
.pp-shell { display: flex; padding: 16px; gap: 18px; min-height: calc(100vh - 40px); }
.pp-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Sidebar (.vc-sb via vacei-sidebar.css, re-skinned solid white by vacei-canvas-shell.css) ── */
.pp-rail-wrap { position: relative; z-index: 60; flex-shrink: 0; width: 72px; }
.pp-rail-wrap:is(:hover,[data-open]) { z-index: 80; }
.pp-sb {
  position: sticky; top: 56px; /* 40 banner + 16 */
  display: flex; flex-direction: column; width: 72px; height: calc(100vh - 40px - 32px);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  color: var(--vc-ink); background: #fff; border: 1px solid var(--vc-hairline); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(27,42,39,.04), 0 10px 24px -14px rgba(27,42,39,.16);
  transition: width .2s ease, background .2s ease, box-shadow .2s ease;
}
.pp-sb::-webkit-scrollbar { display: none; }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb { width: 246px; box-shadow: 0 20px 44px rgba(27,42,39,.18); }
.pp-sb .open { display: none; }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb .open { display: flex; }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb .open.block { display: block; }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb .closed { display: none !important; }

.pp-sb-brand { display: flex; align-items: center; justify-content: center; padding: 13px 0 14px; flex-shrink: 0; /* 13 + 14 = the 54px header card's centre line */ }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb-brand { justify-content: flex-start; padding: 13px 16px 14px; }
.pp-sb-brand a { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-sb-brand .dm-logo-slot { width: 28px; height: 28px; color: var(--a4-accent); }
.pp-sb-brand b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--vc-ink); }
/* The wordmark is artwork, never type (brand kit): the site's own mask, filled
   with the text colour so it reads on the light card and the dark rail alike. */
.pp-sb-brand b { flex: none; width: 58px; height: 15px; font-size: 0; background: currentColor; -webkit-mask: url(/assets/vacei-word-mask.png) left center / contain no-repeat; mask: url(/assets/vacei-word-mask.png) left center / contain no-repeat; }
.vc-sb-pin {
  flex: none; margin-left: auto; padding: 3px 9px; font-size: 10px; font-weight: 600; letter-spacing: .02em; border: 0;
  color: var(--vc-ink-muted); background: var(--vc-fill); border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.vc-sb-pin:hover { background: var(--vc-fill-active); color: var(--vc-ink); }
.pp-sb-divider { margin: 6px 16px; border-top: 1px solid rgba(0,0,0,.07); }
/* SideBar.tsx: the nav is the ONE scrolling region (flex-1 min-h-0 overflow-y-auto);
   brand and footer stay put. Without the overflow the user card rides over the
   last rows. */
.pp-sb-nav { padding: 4px 14px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.pp-sb-nav::-webkit-scrollbar { display: none; }
.pp-sb-nav > ul, .pp-sb-group ul { list-style: none; margin: 0; padding: 0; }
.pp-sb-nav > ul { display: flex; flex-direction: column; gap: 12px; }
.pp-sb-group { padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.pp-sb-group > ul { display: flex; flex-direction: column; gap: 2px; }
.pp-sb-group-label { margin: 0; padding: 0 12px 2px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--vc-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sb-rail-divider { display: flex; justify-content: center; padding: 6px 0; }
.pp-sb-rail-divider span { width: 16px; height: 1.5px; background: #d6d6d6; border-radius: 2px; }
.vc-sb-item {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 38px; padding: 0 12px; font-size: 13.5px; font-weight: 500; color: #3b3b3b;
  background: transparent; border-radius: 12px; transition: color .14s ease-out, background .14s ease-out;
}
.pp-rail-wrap:is(:hover,[data-open]) .vc-sb-item { justify-content: flex-start; }
.vc-sb-item:hover:not(.is-active) { color: var(--a4-ink); background: var(--vc-fill); }
.vc-sb-item.is-active { font-weight: 600; color: var(--vc-ink); background: var(--vc-fill-active); }
.vc-sb-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--vc-item-accent, var(--vc-teal)); }
.pp-rail-wrap:not(:hover):not([data-open]) .vc-sb-item.is-active::before { top: 10px; bottom: 10px; }
.vc-sb-icon-wrap { position: relative; flex-shrink: 0; display: block; }
.vc-sb-png { display: inline-block; width: 18px; height: 18px; background-color: var(--a4-accent); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.pp-rail-wrap:is(:hover,[data-open]) .vc-sb-png { width: 19px; height: 19px; }
.vc-sb-icon { width: 18px; height: 18px; color: #6b6b6b; }
.vc-sb-item.is-active .vc-sb-icon { color: var(--vc-teal); }
.vc-sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: -2px; background: var(--vc-ink-faint); flex: none; }
.vc-sq[data-service="ACCOUNTING"] { background: var(--vc-accent-books); }
.vc-sq[data-service="PAYROLL"] { background: var(--vc-accent-payroll); }
.vc-sq[data-service="TAX"] { background: var(--vc-accent-tax); }
.vc-sq[data-service="AUDITING"] { background: var(--vc-accent-audit); }
.vc-sq[data-service="CSP"], .vc-sq[data-service="MBR"] { background: var(--vc-accent-corporate); }
.vc-sb-item-label { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-sb-badge { margin-left: auto; padding: 2px 7px; font-size: 10px; font-weight: 700; color: var(--vc-waiting-fg); background: var(--vc-waiting-bg); border-radius: 999px; }
.vc-sb-badge-dot { position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; height: 15px; min-width: 15px; padding: 0 3px; font-size: 9px; font-weight: 700; line-height: 1; color: #fff; background: var(--vc-amber); border-radius: 999px; }
.pp-rail-wrap:is(:hover,[data-open]) .vc-sb-badge-dot { display: none; }
.pp-ext { width: 12px; height: 12px; flex-shrink: 0; opacity: .55; }
.pp-sb-footer { padding: 0 14px 12px; flex-shrink: 0; }
.pp-sb-user { border-radius: 12px; padding: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; gap: 0; }
.pp-rail-wrap:is(:hover,[data-open]) .pp-sb-user { gap: 10px; justify-content: flex-start; border-color: var(--vc-hairline); }
.pp-sb-av { position: relative; flex-shrink: 0; }
.pp-sb-av > div { width: 28px; height: 28px; border-radius: 999px; background: var(--a4-accent-bg); color: var(--a4-accent-deep); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.pp-sb-av i { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--a4-positive-dot); border: 2px solid #fff; }
.pp-sb-user-text { min-width: 0; flex: 1; text-align: left; }
.pp-sb-user-text p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sb-user-text p:first-child { font-size: 12.5px; font-weight: 600; color: var(--a4-ink); }
.pp-sb-user-text p:last-child { font-size: 10.5px; color: var(--a4-ink-3); }

/* ── Header (.vc-header — the second white card in the content column) ──── */
.vc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 18px;
  background: #fff; border: 1px solid var(--vc-hairline); border-radius: 16px; margin-bottom: 18px;
  position: sticky; top: 56px; z-index: 40;
}
.pp-hdr-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pp-hdr-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--vc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; flex-shrink: 0; }
.pp-hdr-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--a4-hairline); background: #fff; font-size: 13px; font-weight: 500; color: var(--a4-ink-2); cursor: pointer; flex-shrink: 0; }
.pp-hdr-back:hover { background: var(--vc-fill); }
.pp-hdr-back svg { width: 14px; height: 14px; }
.pp-firm-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--vc-fill-active); color: var(--vc-teal); flex-shrink: 0; }
.pp-search { position: relative; max-width: 340px; width: 100%; margin-left: 4px; flex: 1; min-width: 160px; }
.pp-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--a4-ink-3); pointer-events: none; }
.vc-header-search { width: 100%; height: 34px; padding: 0 36px; border-radius: 999px; border: 1px solid transparent; background: var(--vc-fill); font: inherit; font-size: 13px; font-weight: 500; color: var(--vc-ink-text); outline: none; }
.vc-header-search::placeholder { color: var(--vc-ink-faint); }
.vc-header-search:focus { background: #fff; border-color: var(--vc-teal); }
.pp-hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pp-icon-btn { position: relative; width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--a4-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pp-icon-btn:hover { background: var(--vc-fill); }
.pp-icon-btn svg { width: 16px; height: 16px; }
.pp-icon-btn.danger { color: var(--a4-danger); }
.pp-icon-btn.danger:hover { background: rgba(163,44,44,.1); }
.pp-hdr-count { position: absolute; top: -4px; right: -4px; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--a4-danger); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 16px; border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pp-hdr-dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 999px; background: var(--a4-danger); color: #fff; border: 2px solid #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pp-hdr-user { display: flex; align-items: center; gap: 12px; padding-left: 12px; border-left: 1px solid var(--a4-hairline); }
.pp-hdr-name { text-align: right; }
.pp-hdr-name p { margin: 0; }
.pp-hdr-name p:first-child { font-size: 13px; font-weight: 600; color: var(--a4-ink); line-height: 1.2; }
.pp-hdr-name p:last-child { font-size: 10px; font-weight: 600; color: var(--a4-ink-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.pp-hdr-av { position: relative; cursor: pointer; }
.pp-hdr-av > div { width: 32px; height: 32px; border-radius: 999px; background: var(--vc-btn-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pp-hdr-av i { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--vc-presence); border: 2px solid #fff; }
@media (max-width: 1279px) { .pp-hdr-name { display: none; } }
@media (max-width: 767px) { .pp-search { display: none; } }

/* ── Page scaffold ─────────────────────────────────────────────────────── */
.pp-page { width: 100%; max-width: 1240px; margin: 0 auto; }
.pp-stack > * + * { margin-top: 20px; }

/* PageHeader.tsx standard mode */
.pp-ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pp-ph-left { display: flex; min-width: 0; align-items: flex-start; gap: 16px; }
.pp-ph-chip { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--a4-accent-bg); color: var(--a4-accent-deep); }
.pp-ph-chip svg { width: 22px; height: 22px; }
[data-accent] { --vc-tile-tint: oklch(0.955 0.015 var(--vc-hue, 255)); --vc-tile-ink: oklch(0.46 0.075 var(--vc-hue, 255)); --vc-tile-bloom: oklch(0.915 0.04 var(--vc-hue, 255)); --vc-tile-line: oklch(0.885 0.036 var(--vc-hue, 255)); }
.pp-ph-chip[data-accent] { background: var(--vc-tile-tint); color: var(--vc-tile-ink); }
.pp-eyebrow { margin: 0 0 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--a4-ink-muted); }
.vc-page-title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.5px; line-height: 1.1; color: var(--vc-ink); }
.pp-ph-sub { margin: 7px 0 0; max-width: 560px; font-size: 14px; line-height: 1.375; color: var(--a4-ink-muted); }
.pp-ph-actions { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 8px 16px; border: 1px solid transparent; transition: background .14s ease; }
.pp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pp-btn.outline { border-color: var(--a4-hairline); background: #fff; color: var(--a4-ink); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.pp-btn.outline:hover { background: var(--a4-surface-subtle); }
.pp-btn.header { background: #fff; color: var(--vc-ink); }
.pp-btn.header:hover { background: var(--vc-fill); }
.pp-btn.pill-h40 { height: 40px; padding: 0 18px; border-color: var(--a4-hairline); background: #fff; color: var(--a4-ink); font-size: 13.5px; font-weight: 600; box-shadow: none; }
.pp-btn.pill-h40:hover { background: var(--a4-surface-subtle); }
.pp-btn.dark { background: #173B40; color: #fff; padding: 10px 16px; font-size: 12.5px; font-weight: 600; }
.pp-btn.dark:hover { background: #0F2226; }
.pp-btn.ink { background: var(--vc-btn-ink); color: #fff; padding: 10px 16px; font-size: 12.5px; font-weight: 600; }
.pp-btn.ink:hover { background: var(--vc-btn-ink-hover); }

/* toolbars (Companies / Billing) */
.pp-toolbar { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .pp-toolbar { flex-direction: row; } }
.pp-tb-search { position: relative; flex: 1; }
.pp-tb-search.max-md { max-width: 28rem; }
.pp-tb-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--vc-ink-faint); pointer-events: none; }
.pp-tb-search input { width: 100%; padding: 12px 24px 12px 48px; background: #fff; border: 1px solid var(--a4-hairline); border-radius: 16px; outline: none; font: inherit; font-weight: 500; color: var(--vc-ink-text); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pp-tb-search input::placeholder { color: var(--a4-ink-3); }
.pp-tb-search input:focus { border-color: rgba(22,33,31,.2); box-shadow: 0 0 0 4px rgba(22,33,31,.05); }
.pp-tb-actions { display: flex; align-items: center; gap: 8px; }
.pp-dd { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 16px; border: 1px solid var(--a4-hairline); background: #fff; color: var(--vc-ink-text); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); white-space: nowrap; }
.pp-dd:hover { background: var(--vc-fill); }
.pp-dd svg { width: 16px; height: 16px; color: var(--vc-ink-faint); }

/* FilterPills.tsx */
.pp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-filter { border-radius: 999px; border: 1px solid var(--a4-hairline); padding: 7px 15px; font-size: 12.5px; font-weight: 600; background: #fff; color: var(--a4-ink-muted); cursor: pointer; transition: background .14s ease, color .14s ease; }
.pp-filter:hover { background: var(--a4-surface-subtle); color: var(--a4-ink); }
.pp-filter.is-active { border-color: var(--a4-accent); background: var(--a4-accent-bg); color: var(--a4-accent-deep); }
.pp-filters[data-accent] .pp-filter.is-active { border-color: var(--vc-tile-ink); background: var(--vc-tile-tint); color: var(--vc-tile-ink); }

/* ListTable.tsx */
.pp-list { overflow: hidden; border-radius: 16px; border: 1px solid var(--a4-hairline); background: #fff; }
.pp-list[data-accent] { background-image: linear-gradient(var(--vc-tile-ink), var(--vc-tile-ink)); background-repeat: no-repeat; background-size: 100% 3px; background-position: top left; }
.pp-list-scroll { overflow-x: auto; }
.pp-list-grid { min-width: 640px; }
.pp-lrow { display: grid; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--a4-surface-subtle); }
.pp-lrow:last-child { border-bottom: 0; }
.pp-lrow.head { padding: 12px 22px; border-bottom: 1px solid var(--a4-hairline-soft); }
.pp-lrow.head > div { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a4-ink-3); }
.pp-lrow.link { cursor: pointer; transition: background .14s ease; }
.pp-lrow.link:hover { background: var(--a4-surface-quiet); }
.pp-lrow > div { min-width: 0; font-size: 13px; color: var(--a4-ink-2); }
.pp-lrow .c { text-align: center; }
.pp-lrow .r { text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pp-lrow .cc { display: flex; justify-content: center; align-items: center; }
.pp-name { font-size: 13.5px; font-weight: 600; color: var(--a4-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sub { font-size: 11.5px; color: var(--a4-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-avatar-sm { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--a4-surface-subtle); color: var(--a4-ink-3); font-size: 11px; font-weight: 700; }
.pp-inline { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pp-inline b { font-size: 13px; font-weight: 600; color: var(--a4-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dotline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--a4-ink-2); }
.pp-dotline i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 999px; background: var(--a4-neutral); }
.pp-dotline i.info { background: var(--a4-info-dot); }
.pp-dotline i.positive { background: var(--a4-positive-dot); }
.pp-dotline i.warn { background: var(--a4-warn-dot); }
.pp-intg { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-intg span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.pp-intg span.qb { background: var(--vc-presence); }
.pp-intg span.xero { background: var(--vc-teal); }
.pp-intg span.se { background: var(--vc-amber); }
.pp-intg button { border: 1px solid var(--a4-hairline); background: #fff; border-radius: 999px; height: 22px; padding: 0 9px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--a4-ink-2); cursor: pointer; }
.pp-eye { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; border: 1px solid var(--a4-hairline); background: #fff; color: var(--a4-ink-muted); cursor: pointer; }
.pp-eye svg { width: 16px; height: 16px; }
.pp-eye:hover { background: var(--a4-surface-subtle); }
.a4-row-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; border: 0; background: transparent; color: var(--a4-ink-muted); cursor: pointer; }
.a4-row-icon-btn:hover { background: var(--vc-fill); color: var(--a4-ink); }
.a4-row-icon-btn svg { width: 15px; height: 15px; }
.pp-open { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--a4-accent); }
.pp-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--a4-hairline); background: #fff; font-size: 12px; font-weight: 600; color: var(--a4-ink-2); cursor: pointer; }
.pp-chip-btn:hover { background: var(--vc-fill); }
.pp-chip-btn.ink { background: var(--vc-btn-ink); border-color: var(--vc-btn-ink); color: #fff; }
.pp-chip-btn.ink:hover { background: var(--vc-btn-ink-hover); border-color: var(--vc-btn-ink-hover); }

/* a4-ui.css status chips */
.a4-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3.5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.a4-chip .a4-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.a4-chip--positive { background: var(--a4-positive-bg); color: var(--a4-positive); } .a4-chip--positive .a4-dot { background: var(--a4-positive-dot); }
.a4-chip--warn { background: var(--a4-warn-bg); color: var(--a4-warn); } .a4-chip--warn .a4-dot { background: var(--a4-warn-dot); }
.a4-chip--danger { background: var(--a4-danger-bg); color: var(--a4-danger); } .a4-chip--danger .a4-dot { background: var(--a4-danger-dot); }
.a4-chip--info { background: var(--a4-info-bg); color: var(--a4-info); } .a4-chip--info .a4-dot { background: var(--a4-info-dot); }
.a4-chip--auto { background: var(--a4-auto-bg); color: var(--a4-auto); } .a4-chip--auto .a4-dot { background: var(--a4-auto-dot); }
.a4-chip--neutral { background: var(--a4-neutral-bg); color: var(--a4-neutral); } .a4-chip--neutral .a4-dot { background: var(--a4-neutral); }
.a4-service-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.pp-mbr { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--a4-hairline); background: #fff; font-size: 11px; font-weight: 600; color: var(--a4-ink-2); white-space: nowrap; }
.pp-mbr i { width: 6px; height: 6px; border-radius: 999px; background: #428619; }
.pp-mbr i.due { background: #ec7e00; }

/* Pagination.tsx */
.pp-pager { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: rgba(242,245,244,.5); border-top: 1px solid var(--vc-hairline); }
@media (min-width: 640px) { .pp-pager { flex-direction: row; } }
.pp-pager p { margin: 0; font-size: 14px; font-weight: 500; color: var(--a4-ink-muted); }
.pp-pager p b { color: var(--a4-ink); font-weight: 700; }
.pp-pager-btns { display: flex; align-items: center; gap: 8px; }
.pp-pager-btns > button { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--a4-hairline); background: #fff; font-size: 13px; font-weight: 500; color: var(--a4-ink); cursor: pointer; }
.pp-pager-btns > button:disabled { opacity: .5; cursor: default; }
.pp-pager-btns > button svg { width: 16px; height: 16px; }
.pp-pager-nums { display: flex; align-items: center; gap: 4px; margin: 0 8px; }
.pp-pager-nums button { width: 36px; height: 36px; border-radius: 12px; border: 1px solid transparent; background: transparent; font-size: 12px; font-weight: 700; color: var(--a4-ink-muted); cursor: pointer; }
.pp-pager-nums button.is-on { background: var(--vc-btn-ink); color: #fff; }

/* Empty state */
.pp-empty { display: flex; min-height: 220px; align-items: center; justify-content: center; padding: 40px 24px; font-size: 13.5px; color: var(--a4-ink-muted); }

/* ── Overview: hero + assistant + KPI (hero-assistant.css / DashboardShell.tsx) ── */
.a4-hero-cover { position: relative; overflow: hidden; border-radius: 26px; min-height: 276px; background-color: var(--a4-hero-cover-base); background-image: var(--a4-hero-cover-grad); box-shadow: var(--a4-hero-cover-shadow); padding: 58px 30px 96px; display: flex; flex-direction: column; justify-content: flex-end; }
.a4-hero-cover::before { content: ""; position: absolute; inset: 0; background: var(--a4-hero-cover-bloom); pointer-events: none; }
.a4-hero-cover::after { content: ""; position: absolute; inset: 0; background: var(--a4-hero-cover-scrim); pointer-events: none; }
.a4-hero-status-pill { position: absolute; top: 24px; left: 30px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; }
.a4-pulse-dot { width: 7px; height: 7px; border-radius: 999px; background: #12A150; flex: 0 0 auto; animation: a4-pulse 1.8s ease-in-out infinite; }
@keyframes a4-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.a4-hero-corner-btn { position: absolute; bottom: 24px; right: 24px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.17); backdrop-filter: blur(8px); color: #fff; cursor: pointer; }
.a4-hero-corner-btn svg { width: 16px; height: 16px; }
.a4-hero-title-block { position: relative; z-index: 1; max-width: 640px; }
.a4-hero-title { color: #fff; font-weight: 600; font-size: clamp(28px, 3vw, 38px); letter-spacing: -1.1px; line-height: 1.06; margin: 0; }
.a4-hero-subtitle { margin: 10px 0 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.5; max-width: 520px; }
.pp-hero-wrap { margin-bottom: 14px; }
.a4-hero-toprow { display: grid; gap: 14px; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.5fr); align-items: stretch; margin-bottom: 14px; }
.a4-assist-card { position: relative; z-index: 4; margin-top: -90px; border-radius: 26px; background: var(--a4-hero-assist-grad); box-shadow: var(--a4-hero-assist-shadow); padding: 20px; min-height: 340px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1180px) { .a4-hero-toprow { grid-template-columns: minmax(0, 1fr); } .a4-assist-card { margin-top: 0; } }
.a4-assist-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.a4-assist-brand { display: inline-flex; align-items: center; gap: 8px; }
.a4-assist-vchip { width: 30px; height: 30px; border-radius: 999px; background: var(--a4-hero-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.a4-assist-brand-label { font-size: 12px; font-weight: 700; color: var(--a4-hero-ink); text-transform: uppercase; letter-spacing: .06em; }
.a4-assist-expand { width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); color: var(--a4-hero-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.a4-assist-expand svg { width: 14px; height: 14px; }
.a4-assist-prompt { color: var(--a4-hero-ink); font-size: 23px; font-weight: 400; line-height: 1.34; margin: 0; text-wrap: pretty; }
.a4-assist-prompt b { font-weight: 700; }
.a4-assist-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.a4-assist-pill { border: 0; border-radius: 999px; background: rgba(255,255,255,.62); color: var(--a4-hero-ink); font-size: 12px; font-weight: 500; padding: 8px 14px; cursor: pointer; transition: transform .14s ease, background .14s ease; text-align: left; }
.a4-assist-pill:hover { background: #fff; transform: translateY(-1px); }
.a4-assist-controls { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.a4-assist-icon-btn { width: 32px; height: 32px; border-radius: 999px; border: 0; background: rgba(255,255,255,.58); color: var(--a4-hero-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.a4-assist-icon-btn svg { width: 16px; height: 16px; }
.a4-assist-icon-btn--primary { width: 46px; height: 46px; background: var(--a4-hero-dark); color: #fff; box-shadow: 0 8px 20px rgba(16,16,20,.28); }
.pp-kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.a4-glass-tile { border-radius: 18px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 3px 14px rgba(0,0,0,.04); display: flex; align-items: center; gap: 16px; padding: 22px; text-align: left; cursor: pointer; transition: transform .14s ease; font: inherit; color: inherit; }
.a4-glass-tile:hover { transform: translateY(-2px); }
.a4-glass-tile[data-accent] { position: relative; overflow: hidden; border-color: var(--vc-tile-line); }
.a4-glass-tile[data-accent]::before { content: ""; position: absolute; top: -62px; right: -46px; width: 168px; height: 168px; border-radius: 999px; background: var(--vc-tile-bloom); filter: blur(24px); opacity: .72; pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.a4-glass-tile[data-accent] > * { position: relative; z-index: 1; }
.a4-glass-tile[data-accent]:hover::before { opacity: 1; transform: scale(1.14); }
.pp-kpi-chip { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--vc-tile-tint, var(--a4-accent-bg)); color: var(--vc-tile-ink, var(--a4-accent-deep)); }
.pp-kpi-chip svg { width: 20px; height: 20px; }
.pp-kpi-text { min-width: 0; flex: 1; }
.pp-kpi-text p { margin: 0; }
.pp-kpi-text p:first-child { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--a4-ink-muted); }
.pp-kpi-text p:last-child { margin-top: 5px; font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--a4-ink); }
.pp-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .pp-split { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); } }
.a4-solid-card { background: #fff; border-radius: 22px; border: 0; box-shadow: 0 4px 16px rgba(0,0,0,.05); padding: 22px 24px; overflow: hidden; }
.a4-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; color: var(--a4-ink-muted); }
.pp-card-h2 { margin: 3px 0 14px; font-size: 18px; font-weight: 600; color: var(--a4-ink); }
.pp-notice { border: 1px solid var(--a4-hairline); border-radius: 14px; padding: 14px 16px; }
.pp-notice + .pp-notice { margin-top: 10px; }
.pp-notice-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--a4-ink-3); }
.pp-notice h3 { margin: 6px 0 4px; font-size: 15px; font-weight: 600; color: var(--vc-ink); }
.pp-notice p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--a4-ink-muted); }
.pp-qa { display: flex; flex-direction: column; gap: 8px; }
.a4-quick-action { display: flex; align-items: center; gap: 12px; border-radius: 12px; border: 1px solid var(--a4-hairline); padding: 12px 14px; text-align: left; background: #fff; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.a4-quick-action[data-accent]:hover { border-color: var(--vc-tile-line); background: var(--vc-tile-tint); }
.pp-qa-chip { display: flex; width: 34px; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 10px; color: #fff; }
.pp-qa-chip svg { width: 16px; height: 16px; }
.pp-qa-text { min-width: 0; flex: 1; }
.pp-qa-text b { display: block; font-size: 13.5px; font-weight: 700; color: var(--a4-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-qa-text span { display: block; font-size: 12px; color: var(--a4-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-quick-action > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--a4-ink-3); transition: transform .14s ease; }
.a4-quick-action:hover > svg { transform: translateX(2px); }

/* ── Engagements (EngagementsA4.tsx + a4-exact.css) ────────────────────── */
.a4-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
@media (max-width: 1279px) { .a4-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a4-stat-card { padding: 22px 24px; border: 1px solid var(--a4-hairline); border-radius: 20px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.a4-stat-card--active { border-color: var(--vc-teal); box-shadow: 0 0 0 1px var(--vc-teal); }
.a4-stat-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.a4-icon-badge { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--vc-btn-ink); color: #fff; }
.a4-icon-badge svg { width: 20px; height: 20px; }
.a4-stat-card__dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; }
.a4-stat-card__dot--blue { background: #007bc2; } .a4-stat-card__dot--warning { background: #ec7e00; } .a4-stat-card__dot--teal { background: var(--vc-teal); } .a4-stat-card__dot--green { background: #428619; }
.a4-stat-card__label { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--a4-ink-3); }
.a4-stat-card__value { margin-bottom: 6px; font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -1px; color: var(--a4-ink); }
.a4-stat-card__caption { font-size: 13px; color: var(--a4-ink-muted); }
.a4-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.a4-toolbar-search-wrap { position: relative; flex: 1; min-width: 280px; }
.a4-toolbar-search-icon { position: absolute; top: 50%; left: 18px; display: flex; transform: translateY(-50%); pointer-events: none; color: var(--a4-ink-3); }
.a4-toolbar-search-icon svg { width: 18px; height: 18px; }
.a4-toolbar-search { width: 100%; height: 50px; padding: 0 18px 0 44px; border: 1px solid var(--a4-hairline); border-radius: 999px; background: #fff; outline: none; font: inherit; font-size: 14px; color: var(--a4-ink); }
.a4-toolbar-search::placeholder { color: var(--a4-ink-3); }
.a4-toolbar-filter-btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 1px solid var(--a4-hairline); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--a4-ink); }
.a4-toolbar-filter-btn svg { width: 16px; height: 16px; }
.a4-toolbar-filter-btn:hover { background: var(--vc-fill); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pp-shell { padding: 10px; gap: 10px; }
  .pp-rail-wrap { display: none; }
  .a4-hero-cover { padding: 44px 20px 80px; }
}