/*
 * Sinvac × AI BOSS demo — design system.
 *
 * Palette matched to Sinvac's identity (sinvac.co.za): blue & white. Blue is the
 * brand; green is reserved only for "positive / done" status. WhatsApp greens are
 * WhatsApp's own brand. Swap the --brand* tokens when Sinvac's exact hex + logo land.
 */
:root {
  --ribbon: 34px;

  --brand: #0b5fb0; /* Sinvac blue */
  --brand-2: #084a8c;
  --navy: #0a2a4e; /* sidebar deep blue */
  --navy-2: #0c3360;
  --accent: #1e8bd6; /* bright sky-blue secondary */
  --accent-ink: #0b5fb0; /* deep blue text-on-light */
  --tint: #e8f1fb; /* blue chip tint */

  --pos: #1fb57a; /* green — positive / done only */
  --pos-ink: #0f7a52;
  --amber: #e08a1e;
  --red: #db5246;
  --blue: #2f74d0;

  --ink: #16222e;
  --muted: #62717f;
  --line: #e5ebf2;
  --line-2: #eef2f7;
  --bg: #f3f7fc;
  --card: #ffffff;

  --hair: rgba(16, 34, 54, 0.08);
  --glass: rgba(255, 255, 255, 0.72);
  --shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(16, 34, 54, 0.04),
    0 14px 38px rgba(16, 34, 54, 0.07);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 70px rgba(16, 34, 54, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 18px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Report-table grid + header tint.
     The .pbix asks for its theme's colour 1 on the gridlines and a 20%
     tint of colour 2 behind the headers. Rather than reproduce Power
     BI's palette, these take the SINVAC CORE equivalents so the pack
     matches the product it lives in and follows the brand if it moves:
     --line is the app's hairline, and --tint is already the brand's 
     blue chip tint — the same "20% of the brand blue" idea the report
     asks for. Header text takes --accent-ink for the same reason.

     Declared here rather than at the top of :root because they are
     derived from the palette above and should read that way. */
  --rp-grid: var(--line);
  --rp-header-bg: var(--tint);
  --rp-header-ink: var(--accent-ink);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(30, 139, 214, 0.1), transparent 60%),
    radial-gradient(820px 480px at -8% 12%, rgba(11, 95, 176, 0.08), transparent 55%),
    linear-gradient(180deg, #f5f9fd, #e9f1f9);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ── demo ribbon ─────────────────────────────────────────────────────────── */
.demo-ribbon {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--ribbon);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #dfeaf6;
  background: linear-gradient(90deg, var(--navy), var(--brand-2));
}
.demo-ribbon strong {
  color: #fff;
}
.demo-ribbon .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 139, 214, 0.3);
}
.ribbon-sep {
  opacity: 0.5;
}
.ribbon-muted {
  opacity: 0.7;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: calc(100vh - var(--ribbon));
}

.sidebar {
  width: 256px;
  flex-shrink: 0;
  /* FIXED, not sticky: a sticky sidebar still travels sideways when the
     page scrolls horizontally (which a wide month-column report causes),
     so it slid out of view. Fixed pins it to the viewport in both axes. */
  position: fixed;
  top: var(--ribbon);
  left: 0;
  bottom: 0;
  height: auto;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  color: #c7d6e6;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  z-index: 40;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 18px;
}
.brand-name {
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
  font-size: 16px;
}
.brand-sub {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  flex: 1;
  /* Scrolls, but without the visible track — it sat inside the brand
     panel and read as chrome. Firefox / legacy Edge / WebKit. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #b4c6d8;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav-item svg {
  opacity: 0.85;
  flex-shrink: 0;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.nav-item.active {
  background: rgba(30, 139, 214, 0.18);
  color: #fff;
  border-left-color: var(--accent);
}
.nav-item.active svg {
  color: var(--accent);
  opacity: 1;
}
.nav-flag {
  margin-left: auto;
  font-style: normal;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(30, 139, 214, 0.22);
  color: #bfe0fb;
  padding: 2px 6px;
  border-radius: 20px;
}

.sidebar-foot {
  padding: 14px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 10px;
}
.foot-line {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7d93a9;
}
.foot-brand {
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  font-size: 14px;
}
.foot-note {
  font-size: 11px;
  color: #8aa0b6;
  margin-top: 4px;
}

/* ── main / topbar ───────────────────────────────────────────────────────── */
.main {
  flex: 1;
  /* min-width:0 lets a flex child shrink below its content width — without
     it, a wide table pushes the whole page wider instead of scrolling
     inside its own container. */
  min-width: 0;
  max-width: 100%;
  /* clip (NOT hidden — hidden would force overflow-y:auto and steal the
     page's vertical scroll) so nothing inside the content column can ever
     widen the document and drag it sideways over the fixed sidebar. Wide
     tables must scroll inside their own .table-scroll. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  /* The sidebar is out of flow now, so reserve its column. */
  margin-left: 256px;
}
.topbar {
  position: sticky;
  top: var(--ribbon);
  z-index: 30;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.crumbs {
  font-weight: 650;
  font-size: 15px;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 9px;
}
.who {
  display: flex;
  align-items: center;
  gap: 10px;
  /* It is a <button> (opens the identity menu) — strip the chrome so it
     still reads as the plain chip it was. */
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 11px;
  cursor: pointer;
}
.who:hover {
  background: rgba(16, 34, 54, 0.05);
}
.who-menu {
  position: absolute;
  top: calc(var(--ribbon) + 46px);
  right: clamp(16px, 3vw, 40px);
  z-index: 60;
  min-width: 232px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(8, 22, 40, 0.16);
  font-size: 12.5px;
}
.who-menu[hidden] {
  display: none;
}
.who-menu-email {
  font-weight: 650;
  word-break: break-all;
}
.who-menu-meta {
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}
.who-menu-out {
  margin-top: 10px;
  width: 100%;
  font: inherit;
  font-weight: 650;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--bad, #b4453a);
  cursor: pointer;
}
.who-menu-out:hover {
  border-color: currentColor;
}
.who-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.who-name {
  font-size: 13px;
  font-weight: 650;
}
.who-role {
  font-size: 11px;
  color: var(--muted);
}

.content {
  padding: 28px clamp(20px, 3vw, 48px) 72px;
  max-width: none;
  width: 100%;
  outline: none;
}

/* ── page head / kpis ────────────────────────────────────────────────────── */
.page-head {
  margin-bottom: 20px;
}
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand);
}
.page-head h1 {
  font-size: 26px;
  margin: 7px 0 8px;
  letter-spacing: -0.01em;
}
.lede {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 760px;
  margin: 0;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
.kpi-val {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.kpi-lab {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── block ───────────────────────────────────────────────────────────────── */
.block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.block-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.block-head h3 {
  font-size: 16px;
  margin: 0;
}
.block-note {
  font-size: 12px;
  color: var(--muted);
}

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 -4px;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  white-space: nowrap;
}
table.data tbody tr:last-child td {
  border-bottom: 0;
}
table.data tbody tr:hover {
  background: #f7fafd;
}
.td-key {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ── badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--ok {
  background: #e3f7ee;
  color: var(--pos-ink);
}
.badge--info {
  background: #e7f0fb;
  color: var(--blue);
}
.badge--warn {
  background: #fcf0dc;
  color: #a96510;
}
.badge--bad {
  background: #fbe6e3;
  color: #b03a30;
}
.badge--muted {
  background: #eef1f5;
  color: #6b7886;
}
.badge--ai {
  background: #e3eefb;
  color: var(--accent-ink);
}

/* ── callout ─────────────────────────────────────────────────────────────── */
.callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--card);
}
.callout--ai {
  background: linear-gradient(180deg, #f1f8ff, #eef4fc);
  border-color: #d3e6f7;
}
.callout--muted {
  background: #f7f9fc;
}
.callout-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
}
.callout--muted .callout-icon {
  background: var(--muted);
}
.callout-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
}
.callout-text {
  font-size: 13.5px;
  color: #3c4a57;
  line-height: 1.6;
}
.callout-text code {
  background: #eef1f5;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

/* ── progress (projects) ─────────────────────────────────────────────────── */
.prog-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prog-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.prog-title {
  font-weight: 600;
  font-size: 13.5px;
}
.prog-pct {
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
.prog-bar {
  height: 9px;
  background: #eef2f7;
  border-radius: 20px;
  overflow: hidden;
}
.prog-fill {
  display: block;
  height: 100%;
  border-radius: 20px;
}
.prog--ok {
  background: linear-gradient(90deg, var(--pos), #36c88c);
}
.prog--warn {
  background: linear-gradient(90deg, var(--amber), #f0a648);
}
.prog-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ── chat ────────────────────────────────────────────────────────────────── */
.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Fixed-height chat window — the messages scroll within it while the ask
     box (a sibling rendered just below) stays put. */
  max-height: clamp(320px, 52vh, 540px);
  overflow-y: auto;
  padding-right: 6px;
}
.msg {
  max-width: 86%;
}
.msg-name {
  font-size: 11px;
  color: var(--muted);
  margin: 0 4px 4px;
  font-weight: 600;
}
.msg-bubble {
  padding: 11px 14px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.55;
}
.msg--staff,
.msg--rep {
  align-self: flex-end;
  text-align: right;
}
.msg--staff .msg-bubble {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg--rep .msg-bubble {
  background: #e7f0fb;
  color: #143a63;
  border-bottom-right-radius: 4px;
}
.msg--ai .msg-bubble {
  background: #fff;
  border: 1px solid #cfe2f6;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 0 rgba(30, 139, 214, 0.12);
}
.msg--system .msg-bubble {
  background: #f1f6fd;
  border: 1px solid #d3e2f3;
  border-bottom-left-radius: 4px;
}
.msg-cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--tint);
  padding: 3px 8px;
  border-radius: 6px;
}
.msg--system .msg-cite {
  color: var(--accent-ink);
  background: #e3eefb;
}

/* ── whatsapp phone (WhatsApp's own brand greens) ────────────────────────── */
.phone {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}
.phone-screen {
  width: 330px;
  max-width: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 9px solid #11202e;
  background: #e6ddd3;
  box-shadow: var(--shadow);
}
.wa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075e54;
  color: #fff;
  padding: 12px 14px;
}
.wa-back {
  font-size: 18px;
  opacity: 0.8;
}
.wa-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #cfe9da;
  color: #075e54;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.wa-who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.wa-who i {
  font-style: normal;
  font-size: 11px;
  opacity: 0.8;
}
.wa-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background-color: #e6ddd3;
  background-image: radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px);
  background-size: 14px 14px;
  min-height: 230px;
}
.wa-row {
  display: flex;
}
.wa-row--out {
  justify-content: flex-end;
}
.wa-bubble {
  max-width: 82%;
  padding: 8px 11px 18px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.wa--in {
  background: #fff;
  border-top-left-radius: 2px;
}
.wa--out {
  background: #dcf8c6;
  border-top-right-radius: 2px;
}
.wa-ai {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-ink);
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
.wa-tick {
  position: absolute;
  right: 9px;
  bottom: 5px;
  font-size: 10px;
  color: #4a9be0;
}
.wa-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin: 0 8px 10px;
  padding: 9px 14px;
  border-radius: 22px;
  color: #9aa6ad;
  font-size: 13px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.wa-send {
  width: 30px;
  height: 30px;
  background: #075e54;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* ── pipeline ────────────────────────────────────────────────────────────── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  padding-top: 8px;
}
.pipe-stage {
  text-align: center;
}
.pipe-bar {
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pipe-bar span {
  display: block;
  width: 60%;
  min-height: 18%;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.pipe-name {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--ink);
  line-height: 1.3;
}
.pipe-pct {
  font-size: 11px;
  color: var(--muted);
}

/* ── mini cards / chips ──────────────────────────────────────────────────── */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mini-card {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 15px;
  border-left: 4px solid var(--blue);
  background: #fbfdff;
}
.mini--ok {
  border-left-color: var(--pos);
}
.mini--warn {
  border-left-color: var(--amber);
}
.mini--info {
  border-left-color: var(--blue);
}
.mini-title {
  font-weight: 700;
  font-size: 13.5px;
}
.mini-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #eef3f9;
  border: 1px solid var(--line);
  color: #3c4a57;
}

/* ── agents ──────────────────────────────────────────────────────────────── */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}
.agent-card {
  display: flex;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.agent-dot {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.agent-name {
  font-weight: 700;
  font-size: 13.5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.agent-role {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── overview / hero ─────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy), var(--brand-2) 65%, var(--brand));
  color: #fff;
  border-radius: 18px;
  padding: 32px 34px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border: 32px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.hero::before {
  content: '';
  position: absolute;
  right: 30px;
  bottom: -90px;
  width: 200px;
  height: 200px;
  border: 22px solid rgba(30, 139, 214, 0.25);
  border-radius: 50%;
}
.hero-since {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #cfe6fb;
  background: rgba(30, 139, 214, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
  position: relative;
}
.hero-title {
  font-size: 40px;
  margin: 16px 0 10px;
  letter-spacing: -0.02em;
  font-weight: 800;
  position: relative;
}
.hero-title span {
  color: var(--accent);
}
.hero-lede {
  font-size: 15.5px;
  color: #d4e2f0;
  max-width: 620px;
  line-height: 1.6;
  margin: 0 0 18px;
  position: relative;
}
.hero-mandate {
  font-size: 14px;
  color: #eaf2fb;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 11px 15px;
  border-radius: 11px;
  max-width: 660px;
  position: relative;
}
.hero-mandate span {
  font-weight: 800;
  color: var(--accent);
  margin-right: 8px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.cstats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
  margin-top: 24px;
  position: relative;
}
.cstat-v {
  font-size: 20px;
  font-weight: 800;
}
.cstat-l {
  font-size: 12px;
  color: #aebfd0;
  margin-top: 2px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 6px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: left;
}
.tile-v {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.tile-l {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 26px 2px 12px;
}
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.area-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 19px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.14s,
    box-shadow 0.14s,
    border-color 0.14s;
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 34, 54, 0.12);
  border-color: #cfe0f2;
}
.area-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.area-kick {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand);
}
.area-title {
  font-size: 16px;
  font-weight: 750;
  margin: 3px 0 7px;
}
.area-sum {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.area-flag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-ink);
  background: var(--tint);
  padding: 3px 8px;
  border-radius: 20px;
}
.area-go {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

.overview-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.facts {
  margin: 0;
  padding-left: 18px;
}
.facts li {
  font-size: 13.5px;
  color: #3c4a57;
  line-height: 1.5;
  margin-bottom: 9px;
}
.achips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.achip {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 20px;
  background: var(--tint);
  color: var(--accent-ink);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.achip-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

/* ── sidebar section headers (BOSS-style grouping) ─────────────────────────── */
.nav-sec {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7088a1;
  padding: 16px 12px 6px;
}

/* ── CRUD: actions, modal, toast ───────────────────────────────────────────── */
.block-actions {
  margin-left: auto;
}
.btn-add {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 95, 176, 0.25);
  transition:
    background 0.15s,
    transform 0.12s,
    box-shadow 0.15s;
}
.btn-add:hover {
  background: var(--brand-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 95, 176, 0.3);
}
.th-act {
  text-align: right;
  width: 1%;
}
.td-act {
  text-align: right;
  white-space: nowrap;
}
.rowact {
  display: inline-flex;
  gap: 6px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
tr:hover .rowact,
.prog:hover .rowact,
.agent-card:hover .rowact {
  opacity: 1;
}
.iact {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: all 0.15s;
}
.iact:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--tint);
}
.iact-del:hover {
  border-color: var(--red);
  color: var(--red);
  background: #fbe6e3;
}
.empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 26px 0 !important;
}
.prog-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.agent-card {
  align-items: flex-start;
}
.agent-main {
  flex: 1;
}

#modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 40, 0.5);
  animation: fade 0.2s ease;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow: auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(8, 22, 40, 0.4);
  animation: pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-kick {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.modal-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}
.modal-x {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.modal-x:hover {
  color: var(--ink);
  border-color: var(--muted);
}
.modal-body {
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.fld input,
.fld select,
.fld textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.fld textarea {
  resize: vertical;
}
.fld:has(textarea) {
  grid-column: 1 / -1;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.fld .req {
  color: #cf5f50;
  font-style: normal;
  font-weight: 700;
}
.fld-money {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
}
.fld-money > span {
  display: flex;
  align-items: center;
  padding: 0 11px;
  background: rgba(11, 95, 176, 0.08);
  color: #0a548f;
  font-weight: 700;
  font-size: 13px;
}
.fld-money input {
  border: 0 !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.fld-money:focus-within {
  border-color: var(--brand);
  background: #fff;
}
.fld-computed {
  background: rgba(11, 95, 176, 0.05) !important;
  color: #0a548f !important;
  font-weight: 700 !important;
  cursor: default;
}
.fld-invalid {
  border-color: #cf5f50 !important;
  background: rgba(207, 95, 80, 0.05) !important;
}
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
}
.modal-foot-r {
  display: flex;
  gap: 10px;
}
.btn-save {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  cursor: pointer;
}
.btn-save:hover {
  background: var(--brand-2);
}
.btn-cancel {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
}
.btn-cancel:hover {
  color: var(--ink);
  border-color: var(--muted);
}
.btn-del-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  background: none;
  border: 0;
  cursor: pointer;
}
.btn-del-text:hover {
  text-decoration: underline;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
  z-index: 210;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.reset-link {
  margin-top: 8px;
  background: none;
  border: 0;
  color: #8aa0b6;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.reset-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
@media (max-width: 620px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
}

/* ── analytics dashboard ───────────────────────────────────────────────────── */
.kpis-6 {
  grid-template-columns: repeat(6, 1fr);
}
.kpi {
  position: relative;
}
.interpret {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.6;
  transition: all 0.15s;
}
.kpi:hover .interpret {
  opacity: 1;
}
.interpret:hover {
  background: var(--tint);
  border-color: var(--accent);
  transform: scale(1.08);
}
.interpret-lg {
  position: static;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--tint);
  border: 1px solid #cfe3f7;
  opacity: 1;
}
.interpret-lg:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.chart-head h3 {
  font-size: 16px;
  margin: 0;
}
.chart-sub {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}
.flagship-chart {
  width: 100%;
}
.ch-val {
  font-size: 11px;
  font-weight: 600;
  fill: #6b7a8d;
}
.ch-lab,
.ch-ax {
  font-size: 11px;
  fill: #9aa9b8;
}
.ch-grid {
  stroke: #eaf1f8;
  stroke-width: 1;
}
.ch-base {
  stroke: #d8e3ef;
  stroke-width: 1;
}
.ch-ax-row {
  font-size: 12px;
  fill: #46556a;
  font-weight: 600;
}
.ch-share {
  fill: var(--muted);
  font-weight: 600;
}
.ch-pill-bg {
  fill: var(--brand);
}
.ch-pill-tx {
  fill: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.ch-tick {
  stroke: #c4d3e3;
  stroke-width: 2;
  stroke-linecap: round;
}
.donut {
  filter: drop-shadow(0 6px 10px rgba(11, 95, 176, 0.13));
}
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.donut {
  width: 168px;
  height: 168px;
  flex-shrink: 0;
}
.donut-v {
  font-size: 26px;
  font-weight: 800;
  fill: var(--ink);
}
.donut-l {
  font-size: 11px;
  fill: var(--muted);
}
.legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #3c4a57;
  text-transform: capitalize;
}
.lg b {
  margin-left: auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lg-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.gauge-wrap {
  text-align: center;
  padding: 8px 0;
}
.gauge {
  width: 240px;
  max-width: 100%;
  height: auto;
}
.gauge-v {
  font-size: 30px;
  font-weight: 800;
  fill: var(--ink);
}
.gauge-l {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 9px 15px;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.area-chip svg {
  color: var(--brand);
}
.area-chip:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  color: var(--brand);
}
.area-chip em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-ink);
  background: var(--tint);
  padding: 2px 7px;
  border-radius: 20px;
}
.chat-cta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.kb-ask {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kb-ask input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.kb-ask input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.kb-ask button {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 12px;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.kb-ask button:hover {
  background: var(--brand-2);
}
.link-btn {
  background: none;
  border: 0;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover {
  text-decoration: underline;
}

/* ── Plasti copilot ─────────────────────────────────────────────────────────── */
.plasti-launch {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--brand));
  border: 0;
  border-radius: 30px;
  padding: 13px 22px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(11, 95, 176, 0.4);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.plasti-launch:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(11, 95, 176, 0.5);
}
.pl-spark {
  font-size: 16px;
}
body.plasti-open .plasti-launch {
  opacity: 0;
  pointer-events: none;
}
.plasti-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 540px;
  max-width: 96vw;
  z-index: 160;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 50px rgba(8, 22, 40, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.plasti-open .plasti-drawer {
  transform: translateX(0);
}
.plasti-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--navy), var(--brand-2));
  color: #fff;
}
.plasti-id {
  display: flex;
  align-items: center;
  gap: 11px;
}
.plasti-id b {
  font-size: 15px;
}
.plasti-id i {
  display: block;
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
}
.plasti-ava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #9fd2ff);
  color: #06294a;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
}
.plasti-x {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}
.plasti-x:hover {
  background: rgba(255, 255, 255, 0.26);
}
.plasti-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
}
.pm {
  max-width: 92%;
  font-size: 13.5px;
  line-height: 1.55;
}
.pm-user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
}
.pm-ai {
  align-self: flex-start;
  display: flex;
  gap: 9px;
}
.pm-ava {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #9fd2ff);
  color: #06294a;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.pm-body {
  background: #fff;
  border: 1px solid var(--line);
  padding: 11px 14px;
  border-radius: 14px 14px 14px 4px;
  color: var(--ink);
}
.pm-body b {
  color: var(--brand);
}
.pm-cite {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--tint);
  padding: 5px 9px;
  border-radius: 7px;
}
.pm-action {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
}
.pm-action:hover {
  background: var(--brand-2);
}
.pm-typing .pm-body {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pm-typing .pm-think {
  margin-right: 4px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.pm-typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: pmdot 1s infinite;
}
.pm-typing .dot:nth-child(2) {
  animation-delay: 0.18s;
}
.pm-typing .dot:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes pmdot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.plasti-suggest {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 12px 14px 4px;
  border-top: 1px solid var(--line);
}
.sug {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--tint);
  border: 1px solid #d6e7f8;
  border-radius: 20px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.sug:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.plasti-form {
  display: flex;
  gap: 9px;
  padding: 12px 14px 16px;
}
.plasti-form input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
}
.plasti-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.plasti-send {
  width: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.plasti-send:hover {
  background: var(--brand-2);
}

@media (max-width: 1180px) {
  .kpis-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .kpis-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .plasti-launch {
    bottom: 16px;
    right: 16px;
  }
}

/* ── cutting-edge glass refinement (BOSS-grade) ────────────────────────────── */
.block,
.chart-card,
.kpi,
.tile,
.area-chip,
.callout {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.chart-card:hover,
.kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.topbar {
  background: rgba(247, 250, 254, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.kpi-val,
.stat-v,
.tile-v,
.donut-v,
.gauge-v,
.ch-val,
.cstat-v,
table.data td,
.td-key,
.prog-pct {
  font-variant-numeric: tabular-nums;
}
.kpi-val {
  letter-spacing: -0.02em;
}
.modal-card,
.plasti-drawer {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.modal-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ── scrim (mobile) ──────────────────────────────────────────────────────── */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 37, 64, 0.45);
  z-index: 35;
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview-cols {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .hamburger {
    display: flex;
  }
  .main {
    /* Off-canvas drawer on small screens — reclaim the column. */
    margin-left: 0;
  }
  .sidebar {
    position: fixed;
    top: var(--ribbon);
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    height: calc(100vh - var(--ribbon));
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  }
  body.nav-open .scrim {
    display: block;
  }
  .kpis,
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .cstats {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .pipeline {
    grid-template-columns: repeat(3, 1fr);
  }
  .pipe-bar {
    height: 90px;
  }
}
@media (max-width: 620px) {
  .content {
    padding: 20px 16px 56px;
  }
  .topbar {
    padding: 0 16px;
  }
  .who-text,
  .search {
    display: none;
  }
  .hero-title {
    font-size: 30px;
  }
  .area-grid,
  .mini-grid,
  .agent-grid,
  .kpis,
  .tiles {
    grid-template-columns: 1fr;
  }
  .page-head h1 {
    font-size: 22px;
  }
}

/* ── Plasti review cards (plan / quote) ─────────────────────────────────────── */
.plan-card,
.quote-card {
  margin-top: 10px;
  border: 1px solid rgba(11, 95, 176, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  font-size: 12.5px;
}
.plan-head,
.quote-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(11, 95, 176, 0.1), rgba(11, 95, 176, 0.04));
  border-bottom: 1px solid rgba(11, 95, 176, 0.16);
}
.plan-head b,
.quote-head b {
  color: var(--brand);
}
.plan-head span,
.quote-head span {
  font-size: 11px;
  color: #6b7a8d;
}
.plan-acts {
  padding: 4px 0;
}
.plan-act {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 12px;
  cursor: pointer;
}
.plan-act:hover {
  background: rgba(11, 95, 176, 0.05);
}
.plan-act input {
  margin-top: 2px;
  accent-color: var(--brand);
}
.plan-act-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-act-h {
  font-weight: 600;
  color: #1b2a3a;
}
.plan-act-diff {
  font-size: 11px;
  color: #6b7a8d;
}
.plan-act-diff b {
  color: var(--brand);
}
/* LLM-proposed plan card — advisory summary + steps (no live edits to apply). */
.plan-llm-sum {
  padding: 9px 12px 4px;
  color: #1b2a3a;
  font-weight: 600;
}
.plan-llm-steps {
  margin: 0;
  padding: 4px 12px 10px 28px;
  color: #33424f;
  line-height: 1.5;
}
.plan-llm-steps li {
  margin: 3px 0;
}
.plan-foot,
.quote-foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(11, 95, 176, 0.14);
}
.plan-apply {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 600;
  cursor: pointer;
}
.plan-apply:hover {
  background: #0a548f;
}
.plan-discard {
  background: transparent;
  color: #6b7a8d;
  border: 1px solid rgba(16, 34, 54, 0.14);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
.plan-done {
  padding: 10px 12px;
  color: #2f9e74;
  font-weight: 600;
}
.quote-lines {
  width: 100%;
  border-collapse: collapse;
}
.quote-lines th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa9b8;
  padding: 6px 12px;
}
.quote-lines td {
  padding: 5px 12px;
  border-top: 1px solid rgba(16, 34, 54, 0.06);
}
.ql-desc {
  color: #1b2a3a;
}
.ql-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ql-qty input {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid rgba(16, 34, 54, 0.18);
  border-radius: 6px;
  font: inherit;
  text-align: right;
}
.quote-tot {
  padding: 8px 12px;
  border-top: 1px solid rgba(11, 95, 176, 0.14);
}
.quote-tot > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  color: #46556a;
}
.quote-tot b {
  font-variant-numeric: tabular-nums;
}
.quote-tot input {
  width: 52px;
  padding: 2px 5px;
  border: 1px solid rgba(16, 34, 54, 0.18);
  border-radius: 6px;
  font: inherit;
  text-align: right;
}
.quote-grand {
  border-top: 1px dashed rgba(16, 34, 54, 0.16);
  margin-top: 4px;
  padding-top: 7px !important;
}
.quote-grand b {
  color: var(--brand);
  font-size: 14px;
}
.ql-rm-cell {
  width: 26px;
  text-align: center;
}
.ql-rm {
  border: 0;
  background: transparent;
  color: #b8c2cf;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ql-rm:hover {
  color: #cf5f50;
}
.ql-empty {
  color: #9aa9b8;
  text-align: center;
  padding: 10px 12px !important;
}
.quote-add {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid rgba(16, 34, 54, 0.06);
  background: rgba(11, 95, 176, 0.03);
}
.quote-add select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(16, 34, 54, 0.18);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.quote-add input {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid rgba(16, 34, 54, 0.18);
  border-radius: 6px;
  font: inherit;
  text-align: right;
}
.quote-addbtn {
  border: 1px solid rgba(11, 95, 176, 0.4);
  background: rgba(11, 95, 176, 0.08);
  color: var(--brand);
  border-radius: 6px;
  padding: 5px 9px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.quote-addbtn:hover {
  background: rgba(11, 95, 176, 0.16);
}

/* ── Quote Builder ─────────────────────────────────────────────────────────── */
.qb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.qb-actions .qb-meta {
  flex: 1;
  color: #6b7a8d;
  font-size: 12.5px;
}
.qb-btn,
.qb-btn-ghost {
  border-radius: 9px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.qb-btn {
  background: var(--brand);
  color: #fff;
  border: 0;
}
.qb-btn:hover {
  background: #0a548f;
}
.qb-btn-ghost {
  background: #fff;
  color: #46556a;
  border: 1px solid rgba(16, 34, 54, 0.16);
}
.qb-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
/* Content Studio wants a much bigger preview — almost half the page — so the
   rendered email / post mockup reads at near-real size. The Quote Builder
   keeps its fixed 360px panel. (Stacks to one column under 980px via the
   shared .qb-wrap media rule below.) */
.qb-wrap--cc {
  grid-template-columns: minmax(0, 1fr) 46%;
}
.qb-right {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qb-card,
.qb-panel,
.qb-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hair, rgba(16, 34, 54, 0.08));
  border-radius: 14px;
  padding: 16px 18px;
}
.qb-card-h,
.qb-panel-h,
.qb-items-h h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7a8d;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
.qb-no,
.qb-int {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #0a548f;
  background: rgba(11, 95, 176, 0.1);
  border-radius: 5px;
  padding: 2px 7px;
  font-weight: 700;
}
.qb-int {
  color: #c77b3e;
  background: rgba(199, 123, 62, 0.12);
}
.qb-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.qb-grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 12px;
}
.qb-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 12px;
  margin-bottom: 10px;
}
.qb-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.qb-f > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa9b8;
  font-weight: 600;
}
.qb-f input,
.qb-f select,
.qb-f textarea {
  border: 1px solid rgba(16, 34, 54, 0.16);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: #1b2a3a;
  width: 100%;
  box-sizing: border-box;
}
.qb-f input[type='checkbox'] {
  width: auto;
}
.qb-f textarea {
  resize: vertical;
}
.qb-out {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(11, 95, 176, 0.06);
  color: #0a548f;
  font-weight: 600;
  font-size: 13px;
}
.qb-items {
  margin-top: 18px;
}
.qb-items-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.qb-add,
.qb-add-comp {
  border: 1px solid rgba(11, 95, 176, 0.4);
  background: rgba(11, 95, 176, 0.08);
  color: var(--brand);
  border-radius: 8px;
  padding: 6px 11px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12.5px;
  margin-left: 8px;
}
.qb-add:hover,
.qb-add-comp:hover {
  background: rgba(11, 95, 176, 0.16);
}
.qb-item {
  margin-bottom: 14px;
}
.qb-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qb-item-name {
  font-weight: 700;
  color: #1b2a3a;
}
.qb-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a8d;
  background: rgba(16, 34, 54, 0.06);
  border-radius: 5px;
  padding: 2px 7px;
}
.qb-item-fig {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7a8d;
}
.qb-item-fig span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qb-item-fig b {
  color: #1b2a3a;
  font-variant-numeric: tabular-nums;
}
.qb-item-fig .qb-line {
  color: var(--brand);
}
.qb-rm {
  border: 1px solid rgba(207, 95, 80, 0.3);
  background: transparent;
  color: #cf5f50;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
}
.qb-comp {
  margin: 6px 0 12px;
  border: 1px dashed rgba(199, 123, 62, 0.32);
  border-radius: 10px;
  padding: 10px;
  background: rgba(199, 123, 62, 0.04);
}
.qb-comp-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a96a2e;
  margin-bottom: 8px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
}
.qb-comp-t {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.qb-comp-t th {
  text-align: left;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa9b8;
  padding: 4px 6px;
}
.qb-comp-t td {
  padding: 3px 6px;
}
.qb-comp-t input,
.qb-comp-t select {
  width: 100%;
  border: 1px solid rgba(16, 34, 54, 0.14);
  border-radius: 6px;
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
  background: #fff;
}
.qb-comp-t .qb-rc {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #1b2a3a;
  font-weight: 600;
}
.qb-tot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  color: #46556a;
  font-size: 13px;
}
.qb-tot-row b {
  font-variant-numeric: tabular-nums;
}
.qb-tot-row.qb-grand {
  border-top: 1px solid rgba(16, 34, 54, 0.12);
  margin-top: 4px;
  padding-top: 9px;
  font-size: 15px;
}
.qb-tot-row.qb-grand b {
  color: var(--brand);
}
.qb-internal {
  margin-top: 12px;
  border-top: 1px dashed rgba(199, 123, 62, 0.4);
  padding-top: 10px;
}
.qb-int-h {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #a96a2e;
  font-weight: 700;
  margin-bottom: 6px;
}
.qb-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #9aa9b8;
  line-height: 1.5;
}
.qb-empty {
  color: #9aa9b8;
  padding: 20px;
  text-align: center;
}
@media (max-width: 980px) {
  .qb-wrap {
    grid-template-columns: 1fr;
  }
  .qb-right {
    position: static;
  }
  .qb-grid4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Sheet tabs (digitised workbook) ───────────────────────────────────────── */
.sheet-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 2px 0 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair, rgba(16, 34, 54, 0.1));
  scrollbar-width: thin;
}
.sheet-tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #5a6b80;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 14px;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.sheet-tab:hover {
  color: var(--brand);
}
.sheet-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.sheet-body {
  animation: sheetfade 0.18s ease;
}
@keyframes sheetfade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Content Composer preview ──────────────────────────────────────────────── */
.cc-prev {
  border: 1px solid var(--hair, rgba(16, 34, 54, 0.08));
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  font-size: 13px;
  line-height: 1.55;
  color: #1b2a3a;
}
.cc-prev-sub {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.cc-prev-pre {
  color: #6b7a8d;
  font-size: 12px;
  margin-bottom: 10px;
}
.cc-prev-body {
  white-space: pre-wrap;
}
.cc-prev-chat {
  background: #e7f0e7;
}
.cc-bubble {
  background: #d9fdd3;
  border-radius: 10px 10px 10px 2px;
  padding: 10px 12px;
  display: inline-block;
  max-width: 90%;
}
.cc-social-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #46556a;
}
.cc-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cc-tags {
  margin-top: 10px;
  color: var(--brand);
  font-size: 12px;
}

/* ── Branded quote document (preview → print / save as PDF) ─────────────────── */
body.qd-open {
  overflow: hidden;
}
#quote-doc {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #4a5a6c;
  overflow: auto;
  padding: 18px;
}
.qd-bar {
  max-width: 820px;
  margin: 0 auto 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12.5px;
}
.qd-bar > div {
  display: flex;
  gap: 8px;
}
.qd-page {
  background: #fff;
  color: #1b2a3a;
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 48px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  line-height: 1.5;
}
.qd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--brand);
  padding-bottom: 16px;
}
.qd-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}
.qd-bn {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.qd-bs {
  font-size: 11px;
  color: #6b7a8d;
  letter-spacing: 0.04em;
}
.qd-meta {
  text-align: right;
  font-size: 12px;
  color: #46556a;
}
.qd-qno {
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.1em;
  font-size: 14px;
  margin-bottom: 4px;
}
.qd-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 22px 0;
}
.qd-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa9b8;
  font-weight: 700;
  margin-bottom: 3px;
}
.qd-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.qd-table th {
  background: var(--brand);
  color: #fff;
  text-align: left;
  padding: 9px 10px;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.qd-table th:nth-child(n + 3),
.qd-table td.qd-c {
  text-align: right;
}
.qd-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #eef3f9;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.qd-no {
  color: #9aa9b8;
  width: 28px;
}
.qd-desc {
  text-align: left;
}
.qd-dev {
  color: #c77b3e;
  font-size: 11px;
  margin-top: 3px;
}
.qd-tot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.qd-tot table {
  border-collapse: collapse;
  min-width: 280px;
}
.qd-tot td {
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.qd-tot td:last-child {
  text-align: right;
  font-weight: 600;
}
.qd-grand td {
  border-top: 2px solid var(--brand);
  color: var(--brand);
  font-size: 16px;
  font-weight: 800;
  padding-top: 9px;
}
.qd-terms {
  margin-top: 26px;
  font-size: 11px;
  color: #6b7a8d;
  line-height: 1.6;
}
.qd-foot {
  margin-top: 18px;
  border-top: 1px solid #eef3f9;
  padding-top: 12px;
  font-size: 10.5px;
  color: #9aa9b8;
  text-align: center;
  letter-spacing: 0.02em;
}
@media print {
  body * {
    visibility: hidden;
  }
  #quote-doc,
  #quote-doc * {
    visibility: visible;
  }
  #quote-doc {
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 0;
    overflow: visible;
  }
  .qd-bar {
    display: none;
  }
  .qd-page {
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 24px;
  }
}

/* ── Content Studio — designed previews + brand visuals ────────────────────── */
.cc-vis-wrap {
  overflow: hidden;
  background: #0a3a6e;
}
.cc-vis {
  display: block;
  width: 100%;
  height: 100%;
}
.cc-vis-banner {
  height: 150px;
}
.cc-vis-square {
  height: 300px;
}
.cc-vis-wa {
  height: 120px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.cc-email {
  border: 1px solid var(--hair, rgba(16, 34, 54, 0.08));
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(8, 22, 40, 0.12);
}
.cc-email-head {
  background: var(--brand);
  color: #fff;
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-email-head small {
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.8;
  font-size: 10px;
}
.cc-email-logo {
  color: #37c871;
}
.cc-email-body {
  padding: 18px 20px;
}
.cc-email-body h2 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: #102236;
}
.cc-email-pre {
  margin: 0 0 14px;
  color: #6b7a8d;
  font-size: 12px;
}
.cc-email-text {
  color: #34465a;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.cc-cta {
  display: inline-block;
  margin-top: 16px;
  background: #37c871;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 13.5px;
}
.cc-cta-sm {
  margin: 10px 12px 12px;
  padding: 8px 14px;
}
.cc-email-foot {
  background: #0d2238;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: 0.02em;
}
.cc-post {
  border: 1px solid var(--hair, rgba(16, 34, 54, 0.08));
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(8, 22, 40, 0.12);
}
.cc-post-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.cc-post-id {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.cc-post-id b {
  font-size: 13px;
  color: #1b2a3a;
}
.cc-post-id span {
  font-size: 11px;
  color: #9aa9b8;
}
.cc-post-actions {
  display: flex;
  gap: 16px;
  padding: 10px 14px 4px;
  font-size: 18px;
}
.cc-post-caption {
  padding: 2px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #1b2a3a;
}
.cc-post-caption b {
  margin-right: 5px;
}
.cc-wa-time {
  display: block;
  text-align: right;
  font-size: 10px;
  color: #5a8a5a;
  margin-top: 4px;
}

/* ════════════════════ WhatsApp live rep console ═══════════════════════════ */
/* Sinvac blue chrome; WhatsApp greens for client-facing bubbles/connection;
   green stays "positive/done". Two-pane: conversation list + live thread. */
.wa-console {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wa-head-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #f6faff, #eef4fb);
  border-bottom: 1px solid var(--line);
}
.wa-conn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}
.wa-conn--on {
  background: #e3f7ee;
  color: var(--pos-ink);
}
.wa-conn--off {
  background: #eef1f5;
  color: #6b7886;
}
.wa-conn-dot {
  font-size: 11px;
  line-height: 1;
}
.wa-conn--on .wa-conn-dot {
  color: var(--pos);
}
.wa-conn--off .wa-conn-dot {
  color: #9aa9b8;
}
.wa-head-mid {
  flex: 1;
  min-width: 0;
}
.wa-head-wa {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.wa-rep {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wa-rep-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}
.wa-rep-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wa-rep-meta b {
  font-size: 13px;
}
.wa-rep-meta i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.wa-grid {
  display: grid;
  grid-template-columns: 312px 1fr;
  min-height: 560px;
}

/* ── conversation list (left) ──────────────────────────────────────────────── */
.wa-list {
  border-right: 1px solid var(--line);
  background: #fbfcfe;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wa-list-head {
  padding: 13px 16px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
.wa-conv-list {
  overflow-y: auto;
  flex: 1;
}
.wa-conv {
  display: flex;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 12px 15px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.14s var(--ease);
}
.wa-conv:hover {
  background: #f1f6fc;
}
.wa-conv.is-active {
  background: #e9f2fc;
  box-shadow: inset 3px 0 0 var(--brand);
}
.wa-conv-ava {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #34b27a, #1fa06a);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
}
.wa-unread-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fbfcfe;
}
.wa-conv.is-active .wa-unread-dot {
  border-color: #e9f2fc;
}
.wa-conv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-conv-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wa-conv-name {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv.is-unread .wa-conv-name {
  font-weight: 800;
}
.wa-conv-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}
.wa-conv-co {
  font-size: 11.5px;
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv-prev {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv.is-unread .wa-conv-prev {
  color: #3c4a57;
}
.wa-conv-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.wa-pending-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: #e3eefb;
  padding: 2px 7px;
  border-radius: 12px;
}
.wa-empty-sm {
  padding: 22px 16px;
  font-size: 13px;
  color: var(--muted);
}
.wa-list-off {
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wa-skel {
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  animation: wa-shimmer 1.4s infinite;
}
@keyframes wa-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── state chips ───────────────────────────────────────────────────────────── */
.wa-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.wa-chip--ok {
  background: #e3f7ee;
  color: var(--pos-ink);
}
.wa-chip--info {
  background: #e7f0fb;
  color: var(--blue);
}
.wa-chip--warn {
  background: #fcf0dc;
  color: #a96510;
}
.wa-chip--bad {
  background: #fbe6e3;
  color: #b03a30;
}
.wa-chip--muted {
  background: #eef1f5;
  color: #6b7886;
}

/* ── thread pane (right) ───────────────────────────────────────────────────── */
.wa-thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #e6ddd3;
}
.wa-thread-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  background: #075e54;
  color: #fff;
}
.wa-thread-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #cfe9da;
  color: #075e54;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
}
.wa-thread-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.wa-thread-who b {
  font-size: 14px;
}
.wa-thread-who i {
  font-style: normal;
  font-size: 11.5px;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-thread-head .wa-chip {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.wa-thread-scroll {
  flex: 1;
  overflow-y: auto;
  background-color: #e6ddd3;
  background-image: radial-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px);
  background-size: 16px 16px;
  min-height: 240px;
}
.wa-thread-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}
.wa-msg-row {
  display: flex;
}
.wa-msg-row--out {
  justify-content: flex-end;
}
.wa-msg-row--in {
  justify-content: flex-start;
}
.wa-msg {
  max-width: 74%;
  padding: 8px 12px 6px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-direction: column;
}
.wa-msg--client {
  background: #fff;
  color: #16222e;
  border-top-left-radius: 2px;
}
.wa-msg--plasti {
  background: #dcf8c6;
  color: #14331b;
  border-top-right-radius: 2px;
}
.wa-msg--rep {
  background: #d7e9fb;
  color: #143a63;
  border-top-right-radius: 2px;
}
.wa-msg--quote {
  border: 1px solid rgba(11, 95, 176, 0.25);
}
.wa-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.wa-tag--plasti {
  color: #1f7a44;
}
.wa-tag--rep {
  color: var(--accent-ink);
}
.wa-msg-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wa-msg-meta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 3px;
}
.wa-msg-tick {
  color: #4a9be0;
  font-size: 10px;
}
/* centered amber "Deal Desk" system/alert banner */
.wa-banner-row {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
.wa-banner {
  max-width: 86%;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #8a5a14;
  background: #fcf0dc;
  border: 1px solid #f0dcae;
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.wa-banner-tag {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b07a1e;
  margin-bottom: 2px;
}
.wa-thread-loading,
.wa-thread-empty .wa-thread-loading {
  text-align: center;
  color: #6b7886;
  font-size: 13px;
  padding: 30px 0;
}

/* ── actions + composer ────────────────────────────────────────────────────── */
.wa-actions {
  background: #f4f7fb;
  border-top: 1px solid var(--line);
  padding: 11px 16px 0;
}
.wa-pending-banner {
  font-size: 12.5px;
  color: var(--accent-ink);
  background: #e8f1fb;
  border: 1px solid #d3e6f7;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.wa-act-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wa-act {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.1s var(--ease),
    filter 0.14s var(--ease);
}
.wa-act:active {
  transform: translateY(1px);
}
.wa-act--approve {
  background: var(--pos);
  color: #fff;
  border-color: #18a06a;
}
.wa-act--approve:hover {
  filter: brightness(1.05);
}
.wa-act--decline {
  background: #fff;
  color: #b03a30;
  border-color: #f0c7c1;
}
.wa-act--decline:hover {
  background: #fbe6e3;
}
.wa-act--nudge {
  background: #fff;
  color: var(--accent-ink);
  border-color: #cfe2f6;
}
.wa-act--nudge:hover {
  background: #eef5fc;
}
.wa-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: #f4f7fb;
}
.wa-composer-input {
  flex: 1;
  resize: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 16px;
  background: #fff;
  color: var(--ink);
  max-height: 120px;
  outline: none;
  transition: border-color 0.14s var(--ease);
}
.wa-composer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 139, 214, 0.12);
}
.wa-composer-send {
  flex-shrink: 0;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  transition: filter 0.14s var(--ease);
}
.wa-composer-send:hover {
  filter: brightness(1.07);
}
.wa-composer-send:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── empty / offline states (inside the same chrome) ───────────────────────── */
.wa-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 36px;
  background: linear-gradient(180deg, #eef4fb, #e4ecf6);
}
.wa-thread-empty-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--pos);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.wa-thread-empty-mark svg {
  width: 30px;
  height: 30px;
}
.wa-thread-empty-mark--off {
  color: #1fa06a;
}
.wa-thread-empty h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink);
}
.wa-thread-empty p {
  margin: 0;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.wa-off-bul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 18px;
}
.wa-off-bul span {
  font-size: 12px;
  font-weight: 650;
  color: var(--pos-ink);
}

/* ── responsive — stack the panes ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .wa-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .wa-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 300px;
  }
  .wa-thread-pane {
    min-height: 480px;
  }
}

/* ── LIVE OPERATIONS — tenant-box module APIs (renderLive in app.js) ─────────── */
/* Nav chip — appears next to Live Operations items only when the probe finds
   the box's module APIs (LIVE.apis === true). Green is "positive/live" only. */
.nav-flag--live {
  background: rgba(31, 181, 122, 0.28);
  color: #b8f3d9;
}

/* status strip under the page head — live vs probing */
.lv-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -6px 0 16px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 12.5px;
  color: var(--muted);
}
.lv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 4px rgba(31, 181, 122, 0.16);
  animation: lv-pulse 2.2s infinite;
}
.lv-dot--probe {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(224, 138, 30, 0.14);
}
@keyframes lv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(31, 181, 122, 0.22);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(31, 181, 122, 0.08);
  }
}
.lv-strip-lab {
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pos-ink);
}
.lv-strip--probe .lv-strip-lab {
  color: var(--amber);
}
.lv-strip-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-strip-path code,
.lv-fallback-text code,
.lv-window code {
  background: #eef1f5;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11.5px;
}
.lv-refresh {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--tint);
  border: 1px solid #d3e6f7;
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
}
.lv-refresh:hover {
  background: #ddecfa;
}

/* fallback card — the platform host shows the demo dataset */
.lv-fallback {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid #d3e6f7;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f1f8ff, #eef4fc);
  box-shadow: var(--shadow);
}
.lv-fallback-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
}
.lv-fallback-title {
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 4px;
}
.lv-fallback-text {
  font-size: 13.5px;
  color: #3c4a57;
  line-height: 1.6;
}

/* warn callout — dark modules + simulated sends (amber, never red-panic) */
.callout--warn {
  background: linear-gradient(180deg, #fdf6ec, #fbf1e2);
  border-color: #f0dcc0;
}
.callout--warn .callout-icon {
  background: var(--amber);
  color: #fff;
}

/* loading shimmer (same rhythm as the WhatsApp console skeletons) */
.lv-loading {
  display: grid;
  gap: 10px;
  padding: 6px 0 2px;
}
.lv-skel {
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  animation: wa-shimmer 1.4s infinite;
}
.lv-loading-lab {
  font-size: 12.5px;
  color: var(--muted);
}

/* meta line under KPI strips (window / policy / source) */
.lv-window {
  font-size: 12.5px;
  color: var(--muted);
  margin: -6px 0 16px;
  line-height: 1.6;
}
.lv-more-row {
  display: flex;
  justify-content: center;
  margin: -6px 0 18px;
}
.lv-dim {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.lv-cands {
  font-size: 12px;
  color: var(--muted);
}

/* pipeline — chase-watch star + tender chip */
.lv-watch {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: #b6c2cf;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 7px;
  transition:
    color 0.15s,
    transform 0.15s;
}
.lv-watch:hover {
  color: var(--amber);
  transform: scale(1.15);
}
.lv-watch.is-on {
  color: var(--amber);
}
.lv-chip-tender {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-ink);
  background: var(--tint);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: 1px;
}

/* broadcasts — the SIMULATED flag must be unmissable */
.lv-sim {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a5a10;
  background: #fdeed3;
  border: 1px solid #f0d6a4;
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* live forms — check-in, paste & match, retrieve, compose */
.lv-form {
  display: grid;
  gap: 12px;
}
.lv-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lv-f {
  display: grid;
  gap: 5px;
}
.lv-f > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lv-form input,
.lv-form select,
.lv-form textarea {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lv-form textarea {
  resize: vertical;
  line-height: 1.5;
}
.lv-form input:focus,
.lv-form select:focus,
.lv-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.lv-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lv-form--row {
  display: flex;
  gap: 10px;
}
.lv-form--row input {
  flex: 1;
  min-width: 0;
}
.lv-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #3c4a57;
  cursor: pointer;
}
.lv-check input {
  width: 15px;
  height: 15px;
  padding: 0;
  accent-color: var(--brand);
}
/* Provenance tag on a builder pill — the Acumatica entity the field is
   read from, so "where does this come from?" is answered in place. */
.rp-origin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(11, 95, 176, 0.1);
  color: #0b5fb0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}
.rp-pill.is-on .rp-origin {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.rp-srcfield {
  display: inline-block;
  margin: 0 10px 3px 0;
  font-size: 11.5px;
}

/* ── Acumatica master-data type-ahead (visit check-in) ─────────────────────── */
.ta {
  position: relative;
}
.ta input {
  width: 100%;
}
.ta-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  box-shadow: 0 16px 38px rgba(8, 22, 40, 0.16);
}
.ta-menu[hidden] {
  display: none;
}
.ta-row {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 8px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(16, 34, 54, 0.05);
}
.ta-row:last-child {
  border-bottom: 0;
}
.ta-row:hover,
.ta-row--hi {
  background: rgba(11, 95, 176, 0.07);
}
.ta-row-main {
  display: block;
  font-size: 13px;
  font-weight: 650;
}
.ta-row-sub {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.ta-note {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.ta-state {
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.45;
}
.ta-ok {
  color: var(--pos-ink, #1f7a4d);
  font-weight: 650;
}

/* Read-only map of a captured GPS fix. */
.geo-map {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  max-width: 520px;
}
.geo-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
}
.geo-map-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 11px;
  font-size: 11.5px;
  border-top: 1px solid var(--line);
}
.geo-map-attr {
  color: var(--muted);
  margin-left: auto;
}

/* Required-field asterisk inside modal field labels (lvField's
   `required` flag) — same red as the demo forms' .fld .req. */
.lv-f .req {
  color: #cf5f50;
  font-style: normal;
  font-weight: 700;
}
/* "How do they get access?" chooser in the New-user modal: the label
   line, then each radio option on its own row. */
.lv-acc-lab {
  font-size: 12.5px;
  font-weight: 700;
  color: #3c4a57;
  margin-bottom: 6px;
}
.lv-form-row .lv-check {
  display: flex;
  margin-bottom: 5px;
}
.lv-geo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.lv-geo-ok {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pos-ink);
}
.lv-geo-err {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber);
}

/* CRM live section — search rows, deal board, account timeline */
.lv-crm-search {
  margin-bottom: 14px;
}
.lv-crm-search input {
  flex: 1;
  min-width: 0;
}
.lv-crm-filterrow {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.lv-crm-filterrow .lv-crm-search {
  margin-bottom: 0;
}
.lv-crm-filterrow--tl {
  grid-template-columns: 320px;
}
.lv-crm-cofilter select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
.lv-crm-newrow {
  margin-bottom: 12px;
}
.lv-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.lv-bcol {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}
.lv-bcol--won {
  border-color: #bfe3c8;
  background: #f2faf4;
}
.lv-bcol--lost {
  border-color: #ecc9c9;
  background: #fbf3f3;
}
.lv-bcol-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line);
}
.lv-bcol-head > span:first-child {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.lv-bcol-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.lv-bcol-empty {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 12px 0;
}
.lv-bcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  display: grid;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(15, 30, 45, 0.05);
}
.lv-bcard-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.lv-bcard-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.lv-bcard-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
}
.lv-bcard-val .lv-dim {
  font-weight: 600;
}
.lv-bcard-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.lv-stage-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.lv-stage-btn:hover {
  border-color: var(--brand);
  background: #eef4fa;
}
.lv-stage-btn--won {
  border-color: #bfe3c8;
  color: var(--pos-ink);
}
.lv-stage-btn--won:hover {
  background: #e9f7ee;
  border-color: #8fd0a0;
}
.lv-stage-btn--lost {
  border-color: #ecc9c9;
  color: #a33d3d;
}
.lv-stage-btn--lost:hover {
  background: #fbeeee;
  border-color: #dda3a3;
}
.lv-bcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lv-tl-item {
  display: flex;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.lv-tl-item:last-of-type {
  border-bottom: 0;
}
.lv-tl-glyph {
  flex: 0 0 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--brand);
}
.lv-tl-glyph--lead-engine {
  color: #7a5cc4;
}
.lv-tl-glyph--dynamic-quoting {
  color: #b07a1e;
}
.lv-tl-glyph--deal,
.lv-tl-glyph--deal-activity {
  color: var(--pos-ink);
}
.lv-tl-body {
  flex: 1;
  min-width: 0;
}
.lv-tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lv-tl-title {
  font-size: 13.5px;
  font-weight: 700;
}
.lv-tl-when {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.lv-tl-detail {
  font-size: 12.5px;
  color: #3c4a57;
  margin-top: 3px;
  line-height: 1.45;
}
.lv-tl-src {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 4px;
}
.lv-tl-srcrow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.lv-tl-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
}
.lv-tl-chip--err {
  border-color: #f0d6a4;
  background: #fdf6e8;
  color: #8a6215;
}

@media (max-width: 720px) {
  .lv-grid2 {
    grid-template-columns: 1fr;
  }
  .lv-strip {
    flex-wrap: wrap;
  }
  .lv-strip-path {
    order: 3;
    flex-basis: 100%;
    white-space: normal;
  }
  .lv-crm-filterrow {
    grid-template-columns: 1fr;
  }
  .lv-board {
    grid-template-columns: repeat(6, 220px);
  }
}

/* ── KB editor + suggestions + quote register (live CRUD depth) ─────────── */
.modal-card--wide {
  max-width: 860px;
}
/* Wide live-CRUD modals stack full-width sections; .lv-grid2 handles
   its own two-column pairs inside. */
.modal-card--wide .modal-body {
  grid-template-columns: 1fr;
}
.lv-form textarea.lv-mono,
.lv-mono-pre {
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
.lv-mono-pre {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 52vh;
  overflow: auto;
}
.lv-hist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv-hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.lv-hist-row--head {
  background: var(--bg);
}
.lv-hist-main {
  min-width: 0;
}
.lv-hist-rev {
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-ink);
  margin-right: 6px;
}
.lv-hist-note {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.lv-sug-acts {
  white-space: nowrap;
}
.lv-sug-acts .lv-stage-btn {
  margin-right: 4px;
}
.lvq-linewrap {
  margin: 6px 0 2px;
}
.lvq-lines input {
  width: 100%;
  min-width: 0;
}
.lvq-lines td {
  vertical-align: middle;
}
.lvq-skucell {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 150px;
}
.lvq-qtycell {
  width: 92px;
}
.lvq-unitcell {
  width: 84px;
}
.lvq-pricecell {
  width: 128px;
}
.lvq-lt {
  white-space: nowrap;
  font-weight: 700;
  font-size: 12.5px;
}
.lvq-find {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 8px;
  padding: 5px 7px;
  cursor: pointer;
  line-height: 1;
}
.lvq-find:hover {
  border-color: var(--brand);
}
.lvq-rm {
  font-size: 14px;
}
.lvq-cands td {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}
.lvq-cand {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}
.lvq-cand:hover {
  border-color: var(--brand);
  color: var(--accent-ink);
}
.lvq-fig {
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-weight: 800;
  color: var(--accent-ink);
  font-size: 13px;
}

/* ── global search — the Ctrl+K palette over /api/global-search ──────────── */
/* The topbar .search is now a real button (was decorative) — reset it. */
button.search {
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
button.search:hover {
  border-color: var(--brand);
  color: var(--accent-ink);
}
.search-kbd {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 2px 6px;
  line-height: 1.2;
}

#gsWrap {
  position: fixed;
  inset: 0;
  z-index: 320; /* over the Plasti panel (160) + CRUD modal (200) — under the print doc (400) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 10vh, 110px) 16px 16px;
}
.gs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 40, 0.5);
  animation: fade 0.2s ease;
}
.gs-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(8, 22, 40, 0.4);
  animation: pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.gs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.gs-head input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 550;
  color: var(--ink);
}
.gs-head input::placeholder {
  color: var(--muted);
  font-weight: 500;
}
.gs-esc {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.gs-body {
  overflow-y: auto;
  padding: 8px;
  min-height: 72px;
}
.gs-group {
  padding: 4px 0 6px;
}
.gs-group-lab {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand);
  padding: 6px 10px 4px;
}
.gs-hit {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.gs-hit:hover {
  background: var(--bg);
}
.gs-hit--sel {
  background: var(--tint);
}
.gs-hit--sel:hover {
  background: var(--tint);
}
.gs-hit-title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 55%;
}
.gs-hit-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-note {
  padding: 18px 14px;
}
.gs-note-title {
  font-size: 13.5px;
  font-weight: 750;
  margin-bottom: 6px;
}
.gs-note-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.gs-note-text code,
.gs-foot code {
  font-size: 11.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
.gs-degraded {
  margin: 6px 10px 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.gs-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
}
@media (max-width: 620px) {
  #gsWrap {
    padding: 12px;
  }
  .gs-foot span:last-child {
    display: none;
  }
}

/* ── Dynamic reporting — the Power BI pack on BOSS ─────────────────────────── */
/* Tables carry SA-formatted figures (NO-BREAK spaces, comma decimals) so a
   number never wraps mid-figure; a cell whose measure this instance cannot
   compute renders as a dimmed em dash with the reason on hover, never a 0. */
.rp-slicers {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.rp-slicers .lv-f {
  min-width: 150px;
}
.rp-slicers select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
}
.rp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  padding: 4px 0 2px;
}
.rp-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 13px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rp-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rp-card-h h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.rp-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.rp-card-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.rp-chip,
.rp-dimchip {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11, 95, 176, 0.12);
  color: #0b5fb0;
  white-space: nowrap;
}
.rp-dimchip {
  background: rgba(120, 130, 145, 0.14);
  color: var(--muted);
}
.rp-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
}
.rp-result-kick {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rp-result-head h2 {
  margin: 4px 0 3px;
  font-size: 21px;
  font-weight: 800;
}
.rp-result-sub {
  font-size: 12.5px;
  color: var(--muted);
}
.rp-result-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rp-pages {
  display: grid;
  gap: 16px;
}
/* Grid items default to min-width:auto, so a page holding a 20-column
   table would size the shared column track to the table's intrinsic
   width and stretch EVERY page (even the cover) past the viewport.
   min-width:0 keeps the track at container width; the wide table then
   scrolls inside its own .table-scroll as designed. */
.rp-pages > * {
  min-width: 0;
}
/* ── The client's own table formatting ──────────────────────────────
   Read out of their .pbix, not chosen: 12pt headers, bold, on a tint of
   the theme's second colour; 12pt values; word wrap ON for both; and
   BOTH gridlines drawn, which is what makes their pack read as a grid
   rather than as our striped rows. See
   docs/parity/sinvac-pbix-exact-spec.md.

   Word wrap is the visible one. Ours set white-space:nowrap, so a long
   business-unit name pushed the table wider and scrolled; theirs wraps
   inside a fixed column. */
.rp-table th,
.rp-table td {
  font-size: 12px;
  border-right: 1px solid var(--rp-grid);
  border-bottom: 1px solid var(--rp-grid);
}
.rp-table th:last-child,
.rp-table td:last-child {
  border-right: 0;
}
.rp-table thead th {
  font-weight: 700;
  background: var(--rp-header-bg);
  color: var(--rp-header-ink);
}
.rp-table th.rp-dim,
.rp-table td.rp-dim {
  text-align: left;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rp-table td.rp-v,
.rp-table td.rp-na {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Headers wrap, values do not: their headers are long ("Conversion %
   VALUE") and wrap inside the column; a wrapped NUMBER is unreadable. */
.rp-table th.rp-m {
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rp-table td.rp-na {
  color: var(--muted);
  opacity: 0.6;
  cursor: help;
}
.rp-table th.rp-th-na {
  opacity: 0.65;
  cursor: help;
}
.rp-flag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b4691f;
}
.rp-table tr.rp-groups th.rp-group {
  text-align: center;
  border-bottom: 2px solid var(--line);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rp-table tr.rp-total td {
  font-weight: 800;
  border-top: 2px solid var(--line);
  background: rgba(11, 95, 176, 0.05);
}
.rp-table tr.rp-derived td.rp-dim {
  font-style: italic;
  color: var(--muted);
}
.rp-note {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 2px 10px;
  line-height: 1.5;
}
.rp-why {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}
.rp-why li {
  margin-bottom: 4px;
}
.rp-kpis .kpi--na .kpi-val {
  opacity: 0.5;
}
.rp-bars {
  display: grid;
  gap: 8px;
  padding: 6px 2px 2px;
}
.rp-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr minmax(110px, auto);
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.rp-bar-lab {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-bar-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(120, 130, 145, 0.16);
  overflow: hidden;
}
.rp-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b5fb0, #37c871);
}
.rp-bar-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rp-chart svg {
  width: 100%;
  height: auto;
}
.rp-chart-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 16px 0;
}
.rp-cover {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px 34px 32px;
  background: linear-gradient(160deg, rgba(11, 95, 176, 0.08), transparent 60%), var(--card);
}
/* Front page brand lockup — their .pbix puts a logo here. */
.rp-cover-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.rp-cover-bn {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.rp-cover-bs {
  font-size: 12px;
  color: var(--muted);
}
.rp-cover-rule {
  width: 58px;
  height: 5px;
  border-radius: 3px;
  background: #37c871;
  margin-bottom: 18px;
}
.rp-cover h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.rp-cover h3 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #0b5fb0;
}
.rp-cover h4 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
}
.rp-cover-slicers {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.rp-slicer {
  font-size: 12px;
  font-weight: 800;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
}
/* The cover's period is a CONTROL, not a caption — it used to print as
   inert text that read like a picker and was not one. */
.rp-slicer-live {
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.rp-slicer-live select {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: inherit;
  padding: 5px 28px 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 11px center/9px 6px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.rp-slicer-live:focus-within {
  border-color: var(--brand, #0b5fb0);
  box-shadow: 0 0 0 3px rgba(11, 95, 176, 0.18);
}
/* Which transport answered the run. */
.rp-sourcing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  font-size: 12px;
  color: var(--muted);
}
.rp-sourcing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #37c871;
  flex: none;
}
.rp-cover-foot {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.rp-section-head {
  border-left: 5px solid #37c871;
  padding: 16px 20px;
  background: rgba(11, 95, 176, 0.06);
  border-radius: 0 12px 12px 0;
}
.rp-section-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.rp-wells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 4px 0 2px;
}
.rp-well {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 11px 13px 13px;
  background: var(--bg);
}
.rp-well-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.rp-well-h span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.rp-well select,
.rp-well input {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}
.rp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-pill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.rp-pill:hover {
  border-color: #0b5fb0;
}
.rp-pill.is-on {
  background: #0b5fb0;
  border-color: #0b5fb0;
  color: #fff;
}
.rp-pill--na {
  opacity: 0.62;
}
.rp-mgroup {
  margin-bottom: 10px;
}
.rp-mgroup-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 5px;
}
.rp-mgroup .rp-pill {
  margin: 0 5px 5px 0;
}
.rp-builder-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rp-builder-head .lv-f {
  flex: 1 1 260px;
}
.rp-builder-head input {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
}
.rp-builder-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rp-spec {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
}
.rp-targets .rp-target-in {
  width: 118px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rp-targets .rp-target-in:focus {
  outline: 2px solid #0b5fb0;
  outline-offset: 1px;
}
.lv-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* ── The printable ten-page report document ────────────────────────────────── */
#report-doc {
  position: fixed;
  inset: 0;
  z-index: 400;
  overflow: auto;
  background: rgba(8, 14, 22, 0.86);
  padding: 0 0 60px;
}
.rpd-page {
  background: #fff;
  color: #1b2a3a;
  max-width: 940px;
  margin: 22px auto;
  padding: 34px 40px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.rpd-pagehead {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.rpd-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  margin-top: auto;
}
.rpd-h {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: #0b3a63;
}
.rpd-sub {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}
.rpd-note {
  font-size: 11px;
  color: #64748b;
  margin-top: 10px;
  line-height: 1.5;
}
.rpd-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
}
.rpd-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rpd-bn {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0b3a63;
}
.rpd-bs {
  font-size: 11px;
  color: #64748b;
}
.rpd-title h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b3a63;
}
.rpd-title h2 {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 700;
  color: #0b5fb0;
}
.rpd-title h3 {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 700;
  color: #64748b;
}
.rpd-slicers {
  display: flex;
  gap: 10px;
}
.rpd-slicers span {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  color: #0b3a63;
}
.rpd-divider {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpd-divider h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  color: #0b3a63;
  letter-spacing: -0.01em;
}
#report-doc .rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #1b2a3a;
}
#report-doc .rp-table th,
#report-doc .rp-table td {
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 8px;
}
#report-doc .rp-table thead th {
  background: #f1f5f9;
  color: #0b3a63;
  font-weight: 800;
  text-align: right;
}
#report-doc .rp-table thead th.rp-dim {
  text-align: left;
}
#report-doc .rp-table tr.rp-total td {
  background: #f8fafc;
}
#report-doc .table-scroll {
  overflow-x: auto;
}

@media print {
  #report-doc,
  #report-doc * {
    visibility: visible;
  }
  #report-doc {
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 0;
    overflow: visible;
  }
  .rpd-page {
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 20px;
    min-height: 0;
    page-break-after: always;
    break-after: page;
  }
  .rpd-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}

/* Row-dimension pill at the grouping cap: still clickable (so the toast
   can explain why), but visibly inert rather than falsely available. */
.rp-pill--full {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Builder help — a Power BI user's orientation. Collapsed by default so it
   never sits between them and the wells once they've read it once. */
.rp-help {
  margin: 0 0 14px;
  border: 1px solid var(--line, rgba(11, 95, 176, 0.18));
  border-radius: 10px;
  background: rgba(11, 95, 176, 0.04);
}
.rp-help > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: #0b5fb0;
  list-style: none;
}
.rp-help > summary::-webkit-details-marker {
  display: none;
}
.rp-help > summary::before {
  content: '▸ ';
}
.rp-help[open] > summary::before {
  content: '▾ ';
}
.rp-help-body {
  padding: 0 14px 14px;
  font-size: 13px;
  line-height: 1.55;
}
.rp-help-map {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.rp-help-map th,
.rp-help-map td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(12, 23, 34, 0.08);
  vertical-align: top;
}
.rp-help-map th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.rp-help-map td:first-child {
  width: 38%;
  opacity: 0.75;
}
.rp-help-note {
  margin: 8px 0 0;
  opacity: 0.85;
}

/* ── report drill-down ──────────────────────────────────────────────────
   A cell you can open. Kept deliberately quiet — a dotted underline and
   a pointer, not a button — so a fourteen-page pack does not turn into a
   wall of links. */
.rp-drillable {
  cursor: pointer;
  text-decoration: underline dotted rgba(11, 95, 176, 0.55);
  text-underline-offset: 3px;
}
.rp-drillable:hover,
.rp-drillable:focus-visible {
  background: rgba(11, 95, 176, 0.08);
  outline: none;
}
.rp-drill-host {
  margin: 0 0 18px;
}
.rp-drill-host[hidden] {
  display: none;
}
.rp-drill-host > * + * {
  margin-top: 12px;
}
.rp-drill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--panel);
}
.rp-drill-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
}
.rp-drill-kick {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rp-drill-sub {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  background: var(--panel);
  font-size: 13px;
  color: var(--muted);
}
.rp-drill-sub code {
  font-size: 12px;
}
.rp-drill-table {
  width: 100%;
}
.rp-drill-ln {
  color: var(--muted);
  font-size: 12px;
}