/* Self-hosted fonts (variable, latin) — no external font host: works behind
   the corporate firewall and removes the render-blocking Google @import. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/inter-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
}

:root {
  /* ─────────────────────────────────────────────────────────────
     Canonical design tokens — Savills Reporting (AUH)
     Theme: charcoal accent + Savills red kept for logo mark only.
     Consolidated 2026-05-11 from 7 previously-stacked :root blocks.
     Values below preserve the cascade-winning state of the prior
     stack, so this consolidation is a no-op visually.
     ───────────────────────────────────────────────────────────── */

  /* Brand mark (logo only) */
  --savills-red: #dc0714;
  --savills-red-dark: #a8050f;
  --savills-yellow: #ffe500;

  /* Neutrals */
  --canvas: #f7f7f6;
  --surface: #ffffff;
  --surface-muted: #fafaf9;
  --surface-hover: #f4f4f3;
  --border: #e6e7ea;             /* decorative dividers and card outlines */
  --border-strong: #d4d6db;      /* hover/emphasis borders on containers */
  --border-interactive: #95989f; /* required 3:1 boundary — use ONLY on input/select/button edges that lack a focus/hover indicator. WCAG 1.4.11 */
  --border-subtle: #f0f1f3;

  /* Text */
  --text: #0f1115;
  --text-secondary: #384048;
  --text-muted: #6b7280;
  --text-subtle: #6b7280; /* 4.69:1 on white — passes WCAG AA. Hierarchy now collapses subtle↔muted; consider deprecating one token. */

  /* Accent — charcoal */
  --accent: #1a1a1a;
  --accent-hover: #000000;
  --accent-on: #ffffff;
  --accent-soft: rgba(26, 26, 26, 0.06);
  --accent-ring: rgba(26, 26, 26, 0.18);

  /* Legacy prototype tokens, remapped onto charcoal so existing refs render neutral */
  --brand-blue: #1a1a1a;
  --brand-blue-2: #000000;
  --brand-blue-3: #2a2a2a;
  --focus-blue: rgba(26, 26, 26, 0.18);

  /* Statuses (muted variants from the prior cascade) */
  --success: #42775a;
  --success-bg: #e6f1ea;
  --warning: #735a2c;          /* darkened from #8a6f3d to pass WCAG 1.4.3 (4.57:1 on warning-bg) */
  --warning-bg: #f3ecdd;
  --danger: #99534f;
  --danger-bg: #f3e3e1;
  --info: #4d6387;
  --info-bg: #e7edf5;

  /* Radii */
  --radius-card: 12px;
  --radius-nested: 10px;
  --radius-pill: 999px;

  /* KPI pastel tints (warm-neutral, set by prior brown-theme cascade) */
  --kpi-tint-1: #f8f6f0;
  --kpi-tint-2: #f4efe5;
  --kpi-tint-3: #edf3ee;
  --kpi-tint-4: #e9eef1;

  /* Shadows */
  --shadow-pop: 0 1px 2px rgba(15, 17, 21, 0.04), 0 8px 28px rgba(15, 17, 21, 0.06);
  --shadow-chip: 0 1px 2px rgba(15, 17, 21, 0.06);
  --shadow-soft: 0 1px 2px rgba(15, 17, 21, 0.03), 0 6px 20px -14px rgba(15, 17, 21, 0.10);
  --shadow-elev: 0 8px 22px -18px rgba(32, 26, 22, 0.28);

  /* Background gradient (charcoal theme: no red glow) */
  --gradient-canvas: var(--canvas);

  /* Typography — "Dashboard Clean" design: Inter everywhere, JetBrains Mono
     for numbers. The serif display face (Fraunces) is retired. */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;

  /* Navigation surface tokens (sidebar / nav) */
  --nav-width: 220px;
  --nav-ink: #f8fafc;
  --nav-muted: rgba(248, 250, 252, 0.62);
  --nav-line: rgba(248, 250, 252, 0.11);

  /* Page-shell tokens */
  --page-shell: #f4f6f9;
  --page-card: #ffffff;
  --page-card-soft: #f8fafc;
  --page-border: #e3e8ef;
  --page-border-strong: #cdd5e1;
  --row-hover: #f2f5f9;

  /* Layout */
  --sidebar-width: var(--nav-width);

  /* Semantic aliases (previously undefined refs) */
  --accent-strong: var(--accent-hover);
  --line: var(--border);

  /* Type scale — 1.125 ratio, anchored at 14px body.
     Not yet migrated through the file; new code should use these. */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-display: 32px;

  /* Line-heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing scale — 4px base.
     Not yet migrated through the file; new code should use these. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-entrance: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 30;
  --z-overlay: 9000;
  --z-modal: 9100;
  --z-toast: 9200;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: var(--space-0);
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Tabular figures for anything numeric */
.kpi-card strong,
.summary-item span,
table,
.metric-number,
.num,
.pagination-summary {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  margin: var(--space-0);
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

p {
  margin: var(--space-0);
}

a {
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   Global focus-visible — keyboard focus indicator on all
   interactive elements that don't otherwise define one.
   Mouse clicks do NOT trigger this; only keyboard navigation.
   Form inputs keep their own :focus rules below (correct
   behavior for typing context).
   ───────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[role="combobox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* When the focused element is already in its active (dark-fill) state, the
   outer outline doubles up dark visual weight. Use an inset white ring instead
   so the focus is visible against the dark background without compounding. */
button.active:focus-visible,
.tab-button.active:focus-visible,
.sidebar-item.active:focus-visible,
[role="tab"][aria-selected="true"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-on);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="tab"]:focus:not(:focus-visible) {
  outline: none;
}

code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12.5px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text);
}

.hidden {
  display: none !important;
}

/* Skip-to-content link — visually hidden until keyboard focus, then revealed
   in the top-left. WCAG 2.4.1 (Bypass Blocks). */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 99999;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-on);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--font-size-base);
  transform: translateY(-200%);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent-on);
  outline-offset: 2px;
}

/* ---------- Login view ---------- */
.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--surface);
}

@media (max-width: 960px) {
  .login-view {
    grid-template-columns: 1fr;
  }
}

.login-form-pane {
  background: var(--surface);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: login-rise 620ms cubic-bezier(.22,.61,.36,1) both;
}

.login-card > * {
  animation: login-fade-up 560ms cubic-bezier(.22,.61,.36,1) both;
}

.login-card > *:nth-child(1) { animation-delay: 40ms; }
.login-card > *:nth-child(2) { animation-delay: 120ms; }
.login-card > *:nth-child(3) { animation-delay: 200ms; }
.login-card > *:nth-child(4) { animation-delay: 280ms; }
.login-card > *:nth-child(5) { animation-delay: 360ms; }

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-intro h2 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
  color: var(--text);
}

.login-card p.muted {
  color: var(--text-muted);
  font-size: var(--font-size-md);
  margin: var(--space-0);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-form .field > span,
.login-form .field > label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text);
}

.login-form .field input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: var(--font-size-md);
  color: var(--text);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.login-form .field input::placeholder {
  color: var(--text-muted);
}

.login-form .field input:hover {
  border-color: var(--border-strong, #c9cbd1);
}

.login-form .field input:focus {
  outline: none;
  border-color: var(--savills-red);
  box-shadow: 0 0 0 4px rgba(220, 7, 20, 0.12);
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  width: 100%;
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}

.password-toggle:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.password-toggle .eye-icon {
  width: 18px;
  height: 18px;
}

.password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.login-submit {
  position: relative;
  height: 46px;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease, background 160ms ease;
}

.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(220, 7, 20, 0.45);
}

.login-submit:active {
  transform: translateY(0);
}

.login-submit .btn-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms ease;
}

.login-submit.loading .btn-spinner {
  opacity: 1;
  animation: login-spin 720ms linear infinite;
}

.login-submit.loading .btn-label {
  opacity: 0.7;
}

.error-text:empty {
  display: none;
}

.demo-accounts {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: var(--space-0);
  overflow: hidden;
  transition: border-color 160ms ease;
}

.demo-accounts[open] {
  border-color: var(--border-strong, #d6d8de);
}

.demo-accounts summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-accounts summary::-webkit-details-marker {
  display: none;
}

.demo-accounts summary::after {
  content: "+";
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 200ms ease;
}

.demo-accounts[open] summary::after {
  transform: rotate(45deg);
}

.demo-accounts ul {
  list-style: none;
  padding: 0 14px 12px;
  margin: var(--space-0);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  animation: login-fade-up 280ms ease both;
}

.login-footnote {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: var(--space-0);
}

/* ---------- Hero pane ---------- */
.login-hero-pane {
  position: relative;
  overflow: hidden;
  background: var(--savills-yellow);
  color: var(--savills-red);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
}

@media (max-width: 960px) {
  .login-hero-pane {
    display: none;
  }
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.45;
  pointer-events: none;
  animation: hero-blob-float 14s ease-in-out infinite;
}

.hero-blob-a {
  width: 340px;
  height: 340px;
  background: #fff4a0;
  top: -80px;
  left: -60px;
}

.hero-blob-b {
  width: 280px;
  height: 280px;
  background: #ffd500;
  bottom: -70px;
  right: -40px;
  animation-delay: -7s;
  opacity: 0.6;
}

.hero-stage {
  position: relative;
  width: min(460px, 100%);
  height: 340px;
  display: block;
}

.hero-card {
  position: absolute;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 26px 60px -28px rgba(58, 0, 4, 0.45), 0 6px 18px -8px rgba(58, 0, 4, 0.18);
  padding: var(--space-5);
  animation: hero-float 8s ease-in-out infinite;
}

.hero-card-main {
  top: 20px;
  left: 0;
  width: 320px;
  animation-delay: -1.5s;
  animation-name: hero-float-a;
}

.hero-card-main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hero-card-main h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: #1a1d23;
  margin: var(--space-0);
}

.hero-card-trend {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--savills-red);
  background: rgba(220, 7, 20, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
}

.hero-chart {
  width: 100%;
  height: 110px;
  display: block;
}

.hero-chart-line {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: hero-draw 1800ms cubic-bezier(.22,.61,.36,1) 400ms forwards;
}

.hero-chart-line-faint {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: hero-draw 1800ms cubic-bezier(.22,.61,.36,1) 200ms forwards;
}

.hero-chart-area {
  opacity: 0;
  animation: hero-area-in 800ms ease 1200ms forwards;
}

.hero-card-main footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: #8a8f99;
  margin-top: 8px;
  letter-spacing: 0.02em;
}

.hero-card-ring {
  width: 220px;
  bottom: 10px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  animation-name: hero-float-b;
  animation-delay: -3.5s;
}

.ring-svg {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.ring-fill {
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: ring-draw 1400ms cubic-bezier(.22,.61,.36,1) forwards;
}

.ring-fill-outer { animation-delay: 600ms; --ring-final: 70; }
.ring-fill-mid { animation-delay: 800ms; --ring-final: 120; }
.ring-fill-inner { animation-delay: 1000ms; --ring-final: 200; }

.ring-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ring-label {
  font-size: var(--font-size-xs);
  color: #8a8f99;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ring-number {
  font-size: 22px;
  font-weight: 700;
  color: #1a1d23;
  letter-spacing: -0.02em;
}

.hero-caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  width: min(460px, 100%);
}

.hero-caption-slides {
  position: relative;
  min-height: 72px;
  width: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  transform: translateY(0);
}

.hero-slide h3 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--savills-red);
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.hero-slide p {
  font-size: var(--font-size-md);
  color: var(--savills-red-dark, #a00510);
  margin: var(--space-0);
}

.hero-dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(220, 7, 20, 0.25);
  cursor: pointer;
  padding: var(--space-0);
  transition: background 200ms ease, transform 200ms ease, width 200ms ease;
}

.hero-dot:hover {
  background: rgba(220, 7, 20, 0.5);
}

.hero-dot.active {
  background: var(--savills-red);
  width: 22px;
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

@keyframes hero-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-area-in {
  to { opacity: 1; }
}

@keyframes ring-draw {
  to { stroke-dashoffset: var(--ring-final, 120); }
}

@keyframes hero-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -16px) scale(1.08); }
}

@keyframes hero-float-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, -10px); }
}

@keyframes hero-float-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-card > *,
  .hero-chart-line,
  .hero-chart-line-faint,
  .hero-chart-area,
  .ring-fill,
  .hero-blob,
  .hero-card {
    animation: none !important;
  }
  .hero-chart-line,
  .hero-chart-line-faint { stroke-dashoffset: 0; }
  .hero-chart-area { opacity: 1; }
  .ring-fill-outer { stroke-dashoffset: 70; }
  .ring-fill-mid { stroke-dashoffset: 120; }
  .ring-fill-inner { stroke-dashoffset: 200; }
}

/* ---------- App shell ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.savills-logo {
  display: inline-block;
  object-fit: contain;
  border-radius: 4px;
}

.savills-logo-sm {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

.savills-logo-lg {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  box-shadow: 0 8px 20px -10px rgba(220, 7, 20, 0.35);
}

.sidebar-search {
  position: relative;
  padding: 0 4px;
}

.sidebar-search input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 36px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-nested);
  font-size: var(--font-size-base);
  color: var(--text);
}

.sidebar-search input::placeholder {
  color: var(--text-subtle);
}

.sidebar-search input:focus {
  outline: 2px solid var(--accent-ring);
  outline-offset: 1px;
  border-color: var(--border);
}

.sidebar-search .search-icon,
.sidebar-search .kbd {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.sidebar-search .search-icon {
  left: 14px;
  width: 14px;
  height: 14px;
}

.sidebar-search .kbd {
  right: 10px;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--surface);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 4px 12px 8px;
}

.sidebar-item,
.tab-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.sidebar-item .item-icon,
.tab-button .item-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sidebar-item:hover,
.tab-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sidebar-item.active,
.tab-button.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar-item.active .item-icon,
.tab-button.active .item-icon {
  color: var(--accent);
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-footer .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-footer .user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-footer .user-meta strong {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer .user-meta span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Main canvas ---------- */
.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(247, 247, 246, 0.9);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-topbar .page-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.app-topbar h1 {
  font-size: var(--font-size-2xl);
}

.app-topbar .scope-summary {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin: var(--space-0);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.sync-badge-live {
  background: var(--success-bg);
  color: var(--success);
}

.sync-badge-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.sync-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.sync-badge-warning::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}

.app-content {
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------- Panels / cards ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

.inset-panel {
  height: 100%;
}

.panel-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.panel-header.compact {
  margin-bottom: 12px;
}

.panel-header .section-kicker {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.panel-header h3 {
  font-size: var(--font-size-lg);
}

.panel-header p.scope-summary {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* ---------- Filter panel ---------- */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filter-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.filters-grid label {
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.filters-grid input,
.filters-grid select {
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}

.filters-grid select {
  padding-right: 26px;
  background-position: right 8px center;
  background-size: 10px 10px;
}

.filter-panel {
  padding: 14px 16px;
}

.filter-heading h3 {
  font-size: var(--font-size-md);
}

.filter-heading .section-kicker {
  font-size: var(--font-size-xs);
}

/* Form-field labels stack the visible text above the control. We scope this
   to the explicit `.field` pattern so it doesn't catch inline checkbox labels
   (`<label><input type="checkbox"> Text</label>`), which need a row layout. */
label.field,
.field > label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-nested);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--font-size-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Checkboxes and radios: native style, accent-coloured, sized sanely. */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

input::placeholder {
  color: var(--text-subtle);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---------- Buttons ---------- */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 140ms ease, color 140ms ease, transform 60ms ease;
}

button:active {
  transform: scale(0.99);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary-button,
.ghost-button {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-nested);
  font-size: var(--font-size-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.primary-button {
  background: var(--accent);
  color: var(--accent-on);
}

.primary-button:hover {
  background: var(--accent-hover);
}

.ghost-button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.ghost-button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* ---------- KPI (metric) cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-h-200 {
  height: 200px;
}

.chart-h-240 {
  height: 240px;
}

.chart-h-280 {
  height: 280px;
}

.chart-h-300 {
  height: 300px;
}

.chart-h-320 {
  height: 320px;
}

.agent-sort-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.agent-sort-pill {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.agent-sort-pill:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.agent-sort-pill.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

.agent-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.agent-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.agent-card-name {
  flex: 1;
  min-width: 0;
}

.agent-card-name strong {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-name span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.agent-card-rank {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.agent-score {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.agent-score-good {
  background: var(--success-bg);
  color: var(--success);
}

.agent-score-warn {
  background: var(--warning-bg);
  color: var(--warning);
}

.agent-score-bad {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Dashboard Clean agent card: grade badge + 6 flat stats + single score bar */
.agent-card-grade {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.agent-stats-6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}
.agent-stat6 {
  text-align: left;
}
.agent-stat6 strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.agent-stat6 span {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent-score-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agent-score-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.agent-score-row span:last-child {
  font-variant-numeric: tabular-nums;
}
.agent-score-line .agent-bar-track {
  height: 8px;
  background: #eef0f3;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.agent-score-line .agent-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.agent-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 10px;
  background: var(--surface-muted);
  border-radius: var(--radius-nested);
}

.agent-stats .stat {
  text-align: center;
}

.agent-stats .stat strong {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.agent-stats .stat strong.good {
  color: var(--success);
}

.agent-stats .stat strong.bad {
  color: var(--danger);
}

.agent-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--surface-muted);
  border-radius: 8px;
}

.agent-summary-cell {
  text-align: center;
  padding: 2px 0;
}

.agent-summary-cell strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.agent-summary-cell span {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
  display: block;
}

.agent-summary-cell strong.metric-tone-ic    { color: var(--info); }
.agent-summary-cell strong.metric-tone-qual  { color: var(--success); }
.agent-summary-cell strong.metric-tone-view  { color: #c4973a; }
.agent-summary-cell strong.metric-tone-na    { color: var(--warning); }
.agent-summary-cell strong.metric-tone-lost  { color: var(--danger); }
.agent-summary-cell strong.metric-tone-won   { color: var(--success); }
.agent-summary-cell strong.metric-tone-offer { color: var(--text-muted); }

.agent-card-footer {
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--surface-muted);
  border-radius: 6px;
  font-size: 10.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acf-lbl { color: var(--text-muted); }
.acf-val { font-weight: 600; }
.acf-fresh  { color: var(--success); }
.acf-recent { color: var(--warning); }
.acf-stale  { color: var(--danger); }

/* Compact supporting tables (qual speed / timeliness / spend per agent) */
.compact-table { width: 100%; border-collapse: collapse; }
.compact-table th,
.compact-table td {
  padding: 8px 12px;
  font-size: 12.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.compact-table th {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  background: var(--surface-muted);
}
.compact-table td.muted { color: var(--text-muted); font-size: 11.5px; }
.compact-table td.good { color: var(--success); font-weight: 600; }
.compact-table tr:hover td { background: var(--surface-hover); }

.badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.badge-good  { background: var(--success-bg); color: var(--success); }
.badge-warn  { background: var(--warning-bg); color: var(--warning); }
.badge-bad   { background: var(--danger-bg);  color: var(--danger); }
.badge-muted { background: var(--surface-muted); color: var(--text-muted); }

/* Non-color-only differentiation (WCAG 1.4.1). A small leading glyph appears
   before badge content so users who can't perceive color still get the state.
   The ::before is ::before of the badge, not a separate element, so it doesn't
   shift existing content much. */
.badge-good::before  { content: "● "; }
.badge-warn::before  { content: "▲ "; }
.badge-bad::before   { content: "✕ "; }
.badge-muted::before { content: "· "; }
.badge-info  { background: var(--info-bg); color: var(--info); }
.badge-info::before  { content: "● "; }

/* ── Integrations: professional grouped connection cards ── */
.int-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.int-summary-count { font-size: var(--font-size-base); color: var(--text-muted); }
.int-summary-count strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.int-group { margin-bottom: 20px; }
.int-group:last-child { margin-bottom: 0; }
.int-group-label {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 12px;
}
.int-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 8px 24px -16px rgba(15, 17, 21, 0.12);
  transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 180ms ease, border-color 180ms ease;
}
.int-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -20px rgba(15, 17, 21, 0.22), 0 2px 6px -2px rgba(15, 17, 21, 0.06);
  border-color: var(--border-strong);
}
.int-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.int-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: #1a1a1a;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.int-ico[data-k="meta"]           { background: #0866ff; }
.int-ico[data-k="googleAds"]      { background: #4285f4; }
.int-ico[data-k="tiktok"]         { background: #111111; }
.int-ico[data-k="goyzer"]         { background: #1a1a1a; }
.int-ico[data-k="propertyFinder"] { background: #d6002e; }
.int-ico[data-k="bayut"]          { background: #34a853; }
.int-ico[data-k="snapchat"]       { background: #f5c518; color: #1a1a1a; }
.int-ico[data-k="linkedin"]       { background: #0a66c2; }
.int-ico[data-k="googleAnalytics"] { background: #e8710a; }
.int-ico[data-k="dubizzle"]       { background: #e4002b; }
.int-ico svg { display: block; }
.int-badge { align-self: flex-start; }
.int-name {
  font-size: var(--font-size-lg);
  font-weight: 650;
  color: var(--text);
  margin: 2px 0 0;
  letter-spacing: -0.01em;
}
.int-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.int-detail {
  font-size: var(--font-size-xs);
  color: var(--text-subtle);
  margin: auto 0 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* Super-admin config: segmented tabs (Credentials / Spend / Uploads) so the
   three heavy panels show one at a time and the page stays short. */
.int-admin-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.int-admin-tab {
  border: 0;
  background: transparent;
  padding: 7px 16px;
  border-radius: 9px;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.int-admin-tab:hover { color: var(--text); }
.int-admin-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.08);
}
.int-tab-off { display: none !important; }

/* Zapier automation panel */
.zapier-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.zapier-url-field { max-width: 640px; }
.zapier-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.zapier-toggle input { margin-top: 2px; }
.zapier-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.zapier-last {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.zapier-last[data-tone="ok"] { color: var(--success); }
.zapier-last[data-tone="bad"] { color: var(--danger); }

/* Multi-line secret field (e.g. a pasted service-account JSON key) */
.admin-textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-nested);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.admin-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.grade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
}
.grade-good { color: var(--success); }
.grade-warn { color: var(--warning); }
.grade-bad  { color: var(--danger); }
.grade::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-fresh  { background: var(--success); }
.status-recent { background: var(--warning); }
.status-stale  { background: var(--danger); }

.panel-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Campaigns tab */
.campaigns-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.campaigns-status-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.campaigns-status-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #1877f2;
  letter-spacing: 0.2px;
}
.campaigns-status-period {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.meta-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 9px;
  border-radius: 999px;
}
.meta-status-live {
  background: var(--success-bg);
  color: var(--success);
}
.meta-status-off {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.meta-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.meta-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.meta-status-pill.pill-active {
  background: var(--success-bg);
  color: var(--success);
}
.meta-status-pill.pill-paused {
  background: var(--warning-bg);
  color: var(--warning);
}
.meta-status-pill.pill-review {
  background: var(--info-bg);
  color: var(--info);
}
.meta-status-pill.pill-issue {
  background: var(--danger-bg);
  color: var(--danger);
}
.meta-status-pill.pill-muted {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border);
}

.campaigns-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1100px) {
  .campaigns-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.camp-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  padding: 4px 0;
}
.camp-report-cell {
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: 8px;
  border-left: 3px solid var(--border);
}
.camp-report-cell.tone-good { border-left-color: var(--success); }
.camp-report-cell.tone-bad  { border-left-color: var(--danger); }
.camp-report-kicker {
  margin: var(--space-0);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.camp-report-value {
  margin: 4px 0 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
@media (max-width: 900px) {
  .camp-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .camp-report-grid { grid-template-columns: 1fr; }
}

/* Meta snapshot card on Overview */
.meta-snapshot-panel {
  padding: 16px 20px;
}
.meta-snapshot-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.meta-snapshot-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1877f2;
}
.meta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1877f2;
  display: inline-block;
}
.meta-snapshot-period {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.meta-snapshot-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.meta-source-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.meta-source-stat-val {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.meta-source-stat-accent { color: #1877f2; }
.meta-source-stat-gold   { color: #c4973a; }
.meta-snapshot-foot {
  margin: 12px 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 720px) {
  .meta-snapshot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Agent × stage matrix column tints */
.stage-tone-ic    { color: var(--info); }
.stage-tone-qual  { color: var(--success); font-weight: 600; }
.stage-tone-view  { color: #c4973a; font-weight: 600; }
.stage-tone-na    { color: var(--warning); font-weight: 600; }
.stage-tone-offer { color: var(--text-muted); }
.stage-tone-won   { color: var(--success); font-weight: 700; }
.stage-tone-lost  { color: var(--danger); font-weight: 600; }

.agent-stats .stat span {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.agent-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agent-bar .agent-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.agent-bar .agent-bar-track {
  height: 5px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.agent-bar .agent-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

/* Insights cards */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.insight-card.good { border-left-color: var(--success); }
.insight-card.warn { border-left-color: var(--warning); }
.insight-card.bad  { border-left-color: var(--danger); }
.insight-card.info { border-left-color: var(--accent); }

.insight-card .insight-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-card .insight-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.insight-card.good .insight-value { color: var(--success); }
.insight-card.warn .insight-value { color: var(--warning); }
.insight-card.bad  .insight-value { color: var(--danger); }
.insight-card.info .insight-value { color: var(--accent); }

.insight-card .insight-body {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* All leads toolbar */
.all-leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 14px;
}

.all-leads-search {
  flex: 1 1 280px;
  max-width: 420px;
}

.all-leads-search input {
  height: 36px;
  padding: 0 12px;
  width: 100%;
}

.all-leads-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.all-leads-pill {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.all-leads-pill:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.all-leads-pill.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

.all-leads-breakdown {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-nested);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.all-leads-breakdown .breakdown-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.all-leads-breakdown .breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.all-leads-breakdown .breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: var(--font-size-sm);
}

.all-leads-breakdown .breakdown-row span:first-child {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-leads-breakdown .breakdown-row span:last-child {
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  min-width: 28px;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--space-0);
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Transfer routes */
.transfer-route-row {
  cursor: pointer;
}

.transfer-route-row.active td {
  background: var(--accent-soft);
}

/* Spend admin */
.spend-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0 16px;
}

.spend-upload-row .admin-feedback {
  margin-left: auto;
}

.spend-table input {
  height: 34px;
  padding: 0 10px;
}

.spend-table td {
  vertical-align: middle;
}

.spend-row-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.spend-row-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.spend-row-remove:hover {
  background: var(--danger-bg);
  border-color: var(--danger-bg);
}

/* Data uploads admin */
.uploads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.upload-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.upload-card h4 {
  margin: var(--space-0);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.upload-status {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
}

.upload-status[data-tone="ok"] {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-bg);
}

.upload-help {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-0);
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.upload-mode {
  height: 36px;
  border-radius: var(--radius-nested);
  border: 1px solid var(--border);
  padding: 0 12px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.chart-canvas-hidden {
  display: none !important;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 92px;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
}

.kpi-grid > .kpi-card:nth-child(4n+1),
.kpi-grid > .kpi-card:nth-child(4n+2),
.kpi-grid > .kpi-card:nth-child(4n+3),
.kpi-grid > .kpi-card:nth-child(4n) {
  background: var(--surface);
}

.kpi-card span {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-card strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-sub {
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Stage KPI colored tops (Overview) — clean white card with colored accent */
.kpi-grid > .kpi-card.kpi-card-new,
.kpi-card.kpi-card-new {
  border-top: 3px solid #9e9e9e;
}
.kpi-grid > .kpi-card.kpi-card-new strong { color: var(--text-secondary); }

.kpi-grid > .kpi-card.kpi-card-ic,
.kpi-card.kpi-card-ic {
  border-top: 3px solid var(--info);
}
.kpi-grid > .kpi-card.kpi-card-ic strong { color: var(--info); }

.kpi-grid > .kpi-card.kpi-card-qual,
.kpi-card.kpi-card-qual {
  border-top: 3px solid var(--success);
}
.kpi-grid > .kpi-card.kpi-card-qual strong { color: var(--success); }

.kpi-grid > .kpi-card.kpi-card-view,
.kpi-card.kpi-card-view {
  border-top: 3px solid #c4973a;
}
.kpi-grid > .kpi-card.kpi-card-view strong { color: #c4973a; }

.kpi-grid > .kpi-card.kpi-card-na,
.kpi-card.kpi-card-na {
  border-top: 3px solid var(--warning);
}
.kpi-grid > .kpi-card.kpi-card-na strong { color: var(--warning); }
.kpi-grid > .kpi-card.kpi-card-cpql,
.kpi-card.kpi-card-cpql {
  border-top: 3px solid var(--info);
  background: var(--info-bg);
}
.kpi-grid > .kpi-card.kpi-card-cpl,
.kpi-card.kpi-card-cpl {
  border-top: 3px solid var(--accent);
}
.kpi-grid > .kpi-card.kpi-card-cpl strong { color: var(--accent); }

.kpi-grid > .kpi-card.kpi-card-cpql strong { color: var(--info); }

/* Overview KPI cards match Dashboard Clean exactly: flat white cards with a
   uniform thin border (no coloured top stripe), black values, and only a few
   accent cues — amber No-Answer, green-dot Closed Won, red Closed Lost / NA. */
#kpiGrid .kpi-card { background: var(--surface); border-top: 1px solid var(--border); }
#kpiGrid .kpi-card strong { color: var(--text); }
#kpiGrid .kpi-card.kpi-card-lost strong { color: var(--danger); }
#kpiGrid .kpi-card-na .kpi-sub { color: var(--warning); }
#kpiGrid .kpi-card-na .kpi-sub::before { content: "\25B2\00A0"; }
#kpiGrid .kpi-card-won .kpi-sub::before { content: "\25CF\00A0"; color: var(--success); }
#kpiGrid .kpi-card-lost .kpi-sub { color: var(--danger); }

/* ---------- Overview hero ---------- */
.overview-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
}

.overview-hero-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 20px;
}

.overview-hero-head h2 {
  margin: var(--space-0);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text);
}

.overview-hero-loc {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.overview-hero-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}

.ohm {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

.overview-hero-metric-val {
  order: 1;
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.overview-hero-metric-lbl {
  order: 2;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-muted);
  margin-top: 4px;
}

.overview-hero-metric-sub {
  order: 3;
  font-size: 10.5px;
  color: var(--text-subtle);
  margin-top: 1px;
}

.overview-hero-metric-accent { color: var(--info); }
.overview-hero-metric-good   { color: var(--success); }
.overview-hero-metric-bad    { color: var(--danger); }
.overview-hero-metric-gold   { color: #c4973a; }

/* Overview section kicker above each block */
.overview-section-kicker {
  margin: 4px 2px -4px;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Cost Efficiency row */
.cost-efficiency-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.cost-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
}

.cost-card .cost-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.cost-card .cost-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.cost-card .cost-sub {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.cost-card .cost-foot {
  font-size: 10.5px;
  color: var(--text-subtle);
  font-style: italic;
  margin-top: 4px;
}

.cost-card.ce-cpl   { border-top: 3px solid var(--accent); }
.cost-card.ce-cpl   .cost-val { color: var(--accent); }
.cost-card.ce-cpql  { border-top: 3px solid var(--danger); }
.cost-card.ce-cpql  .cost-val { color: var(--danger); }
.cost-card.ce-best  { border-top: 3px solid var(--success); }
.cost-card.ce-best  .cost-val { color: var(--success); font-size: var(--font-size-2xl); }
.cost-card.ce-worst { border-top: 3px solid var(--warning); }
.cost-card.ce-worst .cost-val { color: var(--warning); font-size: var(--font-size-2xl); }

@media (max-width: 1100px) {
  .cost-efficiency-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pipeline Stage Overview — compact 8 cards */
.pipeline-overview-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-stage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 72px;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
}

.pipeline-stage-card .pipeline-stage-card-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline-stage-card .pipeline-stage-card-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.pipeline-stage-card .pipeline-stage-card-sub {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
}

.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-val { color: var(--text); }
.pipeline-stage-card.pipeline-stage-lost  .pipeline-stage-card-val { color: var(--danger); }
.pipeline-stage-card.pipeline-stage-ic    .pipeline-stage-card-val { color: var(--info); }
.pipeline-stage-card.pipeline-stage-qual  .pipeline-stage-card-val { color: var(--success); }
.pipeline-stage-card.pipeline-stage-view  .pipeline-stage-card-val { color: #c4973a; }
.pipeline-stage-card.pipeline-stage-na    .pipeline-stage-card-val { color: var(--warning); }
.pipeline-stage-card.pipeline-stage-future .pipeline-stage-card-val { color: var(--info); }
.pipeline-stage-card.pipeline-stage-new   .pipeline-stage-card-val { color: var(--text-secondary); }

@media (max-width: 1200px) {
  .pipeline-overview-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pipeline-overview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .overview-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .overview-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Overview / split grids ---------- */
.overview-split,
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.campaign-grid.integration-table-panel {
  margin-top: 16px;
}

/* ---------- Summary lists ---------- */
.summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-nested);
  transition: background 120ms ease;
}

.summary-item:hover {
  background: var(--surface-muted);
}

.summary-item strong {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.summary-item p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: var(--space-0);
}

.summary-item span {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

/* ---------- Report comparisons ---------- */
.comparison-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comparison-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comparison-kpis,
.comparison-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.comparison-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.comparison-kpi-card {
  min-height: 0;
}

.comparison-table td,
.comparison-table th {
  white-space: nowrap;
}

.comparison-issues {
  margin: var(--space-0);
  padding-left: 18px;
  color: var(--text);
  display: grid;
  gap: var(--space-2);
}

.comparison-issues li {
  color: var(--text-muted);
  line-height: 1.5;
}

.comparison-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.comparison-delta.positive {
  background: rgba(173, 123, 66, 0.16);
  color: var(--accent-strong);
}

.comparison-delta.negative {
  background: rgba(180, 83, 53, 0.12);
  color: var(--danger);
}

.comparison-delta.neutral {
  background: var(--surface-muted);
  color: var(--text-muted);
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}

tbody tr:hover td {
  background: var(--surface-muted);
}

tbody tr:last-child td {
  border-bottom: none;
}

.empty-table {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-nested);
}

/* ---------- Pagination ---------- */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.pagination-summary {
  font-size: 12.5px;
  color: var(--text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pagination-nav,
.pagination-page {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.pagination-nav:hover:not(:disabled),
.pagination-page:hover:not(.active) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.pagination-page.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-ellipsis {
  color: var(--text-subtle);
  padding: 0 4px;
  font-size: var(--font-size-base);
}

.pagination-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  flex-direction: row;
}

.pagination-size span {
  white-space: nowrap;
}

.pagination-size select {
  height: 32px;
  font-size: 12.5px;
  padding: 0 28px 0 10px;
  border-radius: 6px;
  width: auto;
  min-width: 64px;
}

/* ---------- Funnel ---------- */
.funnel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.funnel-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-nested);
  font-size: 13.5px;
}

/* Separator between the customer-journey stages and exits/dead-ends. */
.funnel-divider {
  margin-top: var(--space-3);
  padding: 6px 2px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
}

.funnel-row .funnel-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.funnel-row .funnel-label strong {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text);
}

.funnel-row .funnel-label span {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.funnel-row .funnel-bar {
  height: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.funnel-row .funnel-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 320ms ease-out;
}

/* ---------- Warning / alert badges ---------- */
.warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 12.5px;
  font-weight: 500;
}

.warning-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}

/* ---------- Sync summary (compact, in topbar) ---------- */
.sync-summary {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

.sync-summary:empty {
  display: none;
}

@media (max-width: 1100px) {
  .sync-summary { display: none; }
}

.workspace-panel {
  padding: 16px 20px;
}

.workspace-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 12px;
}

.workspace-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.workspace-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.workspace-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(220, 7, 20, 0.24);
  box-shadow: 0 12px 30px rgba(15, 17, 21, 0.06);
}

.workspace-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.workspace-chip:disabled {
  opacity: 0.72;
  cursor: default;
}

/* ---------- Admin integration cards ---------- */
.admin-integration-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.admin-integration-skeleton {
  opacity: 0.7;
}

.skeleton-field {
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--surface-muted) 0%,
    var(--surface-hover) 50%,
    var(--surface-muted) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.admin-integration-empty {
  grid-column: 1 / -1;
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--font-size-base);
}

.admin-integration-empty p {
  margin: var(--space-0);
}

.admin-integration-empty p + p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.admin-integration-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.admin-integration-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.admin-integration-card h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-0);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.admin-status.status-on {
  background: var(--success-bg);
  color: var(--success);
}

.admin-status.status-off {
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.admin-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.admin-note {
  margin: var(--space-0);
  padding: 8px 10px;
  border-radius: var(--radius-nested);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 12.5px;
  line-height: 1.4;
}

.admin-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.admin-field input {
  height: 36px;
  font-size: var(--font-size-base);
}

.admin-field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.admin-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.admin-actions button {
  height: 34px;
  padding: 0 14px;
  font-size: var(--font-size-base);
  border-radius: var(--radius-nested);
}

.admin-feedback {
  margin: var(--space-0);
  min-height: 1.1em;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.admin-feedback[data-tone="ok"] {
  color: var(--success);
}

.admin-feedback[data-tone="error"] {
  color: var(--danger);
}

.admin-feedback[data-tone="info"] {
  color: var(--text-muted);
}

/* ---------- Error text / misc ---------- */
.error-text {
  color: var(--danger);
  font-size: var(--font-size-base);
  min-height: 1.1em;
  margin: var(--space-0);
}

/* ---------- View panels ---------- */
.view-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.view-panel.active {
  display: flex;
  animation: view-enter 340ms cubic-bezier(.22,.61,.36,1);
}

.view-panel.active .panel {
  animation: panel-rise 460ms cubic-bezier(.22,.61,.36,1) both;
}

.view-panel.active .panel:nth-child(1) { animation-delay: 40ms; }
.view-panel.active .panel:nth-child(2) { animation-delay: 100ms; }
.view-panel.active .panel:nth-child(3) { animation-delay: 160ms; }
.view-panel.active .panel:nth-child(4) { animation-delay: 220ms; }
.view-panel.active .panel:nth-child(n+5) { animation-delay: 280ms; }

.view-panel.active .overview-split > .panel:nth-child(1),
.view-panel.active .campaign-grid > .panel:nth-child(1) { animation-delay: 60ms; }
.view-panel.active .overview-split > .panel:nth-child(2),
.view-panel.active .campaign-grid > .panel:nth-child(2) { animation-delay: 140ms; }

.view-panel.active .kpi-card {
  animation: kpi-rise 520ms cubic-bezier(.22,.61,.36,1) both;
}

/* Card hover lift for inset panels */
.panel.inset-panel {
  transition:
    transform 220ms cubic-bezier(.22,.61,.36,1),
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform;
}

.panel.inset-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -20px rgba(26, 29, 35, 0.22), 0 2px 6px -2px rgba(26, 29, 35, 0.06);
}

.kpi-card {
  transition:
    transform 220ms cubic-bezier(.22,.61,.36,1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(15, 17, 21, 0.22), 0 2px 6px -2px rgba(26, 29, 35, 0.06);
  border-color: var(--border-strong);
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes panel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kpi-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .comparison-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .overview-split,
  .campaign-grid,
  .comparison-layout,
  .comparison-kpis {
    grid-template-columns: 1fr;
  }
  .login-view {
    grid-template-columns: 1fr;
  }
  .login-brand-pane {
    padding: 32px 24px;
  }
  .login-form-pane {
    padding: 32px 24px;
  }
}

@media (max-width: 720px) {
  .filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-topbar {
    padding: 12px 20px;
  }
  .app-content {
    padding: 16px 20px 32px;
  }
}

.owner-builder-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  max-width: none;
}

/* Children that should span the full form width. Without this, the integration
   chips grid + submit button would awkwardly occupy a single column. */
.owner-builder-form > .owner-builder-grid,
.owner-builder-form > button[type="submit"],
.owner-builder-form > .admin-feedback,
.owner-builder-form > .field:has(textarea),
.owner-builder-form > .field:has([name="description"]) {
  grid-column: 1 / -1;
}

/* On narrow viewports, collapse to single column. */
@media (max-width: 720px) {
  .owner-builder-form {
    grid-template-columns: 1fr;
  }
}

.owner-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-nested);
  background: var(--surface-muted);
}

.owner-builder-grid label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-weight: 600;
}

.login-brand-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text);
}

.login-support {
  margin-top: 4px;
}

.owner-settings-subhead {
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.listings-kpi-grid {
  margin-top: 16px;
}

.field-label-inline {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 700;
}

.owner-toggle {
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-muted);
  border: 1px solid transparent;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.owner-toggle:hover {
  background: var(--surface-hover);
}
.owner-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* =====================================================
   Modern UI v2 — refined sidebar, topbar, filters,
   settings & owner-builder. Appended overrides.
   ===================================================== */

body { background: var(--gradient-canvas); }

/* ---- Sidebar: refined ---- */
.sidebar {
  padding: 18px 14px 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  border-right: 1px solid var(--border-subtle);
}

.sidebar-brand {
  position: relative;
  padding: 6px 10px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-3);
}

.sidebar-brand::after {
  content: "Savills";
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(calc(-50% - 7px));
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.sidebar-brand .savills-logo-sm {
  box-shadow: 0 6px 16px -10px rgba(220, 7, 20, 0.4);
}

.sidebar-search input {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-chip);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.sidebar-search input:hover {
  background: var(--surface-muted);
}

.sidebar-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.sidebar-group { gap: 1px; }

.sidebar-group-label {
  padding: 10px 12px 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.tab-button {
  position: relative;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
}

.tab-button::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background 160ms ease;
}

.tab-button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.tab-button.active {
  background: linear-gradient(90deg, rgba(220, 7, 20, 0.10), rgba(220, 7, 20, 0.02));
  color: var(--accent);
  font-weight: 600;
}

.tab-button.active::before {
  background: var(--accent);
}

.tab-button .item-icon {
  width: 17px;
  height: 17px;
}

.sidebar-footer {
  margin-top: 8px;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-chip);
}

.sidebar-footer .user-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(220, 7, 20, 0.6);
}

#logoutButton.ghost-button {
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

#logoutButton.ghost-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---- Topbar: refined ---- */
.app-topbar {
  padding: 18px 32px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(15, 17, 21, 0.02);
}

.app-topbar h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.user-badge {
  height: 34px;
  padding: 0 14px;
  background: var(--surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-chip);
  font-weight: 500;
}

/* ---- Panels: subtle elevation ---- */
.panel {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.panel.inset-panel:hover {
  box-shadow: var(--shadow-elev);
  border-color: var(--border);
}

/* ---- Filter bar: clean horizontal chip row ---- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-0);
  background: transparent;
  border: none;
  box-shadow: none;
  flex-wrap: wrap;
}

.filter-bar-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.filter-bar-icon svg {
  width: 14px;
  height: 14px;
}

.filter-bar .filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* "Dashboard Clean": filters are pill-shaped dropdown buttons with a visible
   interactive border (label muted, value bold). */
.filter-bar .filters-grid label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: var(--space-0);
  padding: 0 6px 0 12px;
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: none;
  font-size: 12px;
  color: var(--text-secondary);
  transition: border-color 140ms ease, background 140ms ease;
  cursor: pointer;
}
.filter-bar .filters-grid label:hover {
  background: var(--surface-hover);
}

.filter-bar .filters-grid label:hover {
  border-color: var(--border-strong);
}

.filter-bar .filters-grid label > span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  margin: var(--space-0);
}

.filter-bar .filters-grid label > span::after {
  content: "";
}

.filter-bar .filters-grid select,
.filter-bar .filters-grid input {
  height: 28px;
  padding: 0 22px 0 4px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
  max-width: 160px;
  cursor: pointer;
}

/* Active-filter chips: a plain-language readout of the backend-applied filters. */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}
.active-filters.hidden { display: none; }
.active-filters-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.active-filters-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.filter-chip:hover { background: var(--surface-hover); }
/* Scope-forced filters: informational only — no ✕, no pointer affordance. */
.filter-chip-locked,
.filter-chip-locked:hover {
  cursor: default;
  background: var(--surface-muted);
  border-style: dashed;
}
.filter-chip-k { font-weight: 600; color: var(--text-muted); }
.filter-chip-x { font-size: 11px; color: var(--text-muted); }
.active-filters-clear {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.active-filters-clear:hover { background: var(--surface-hover); }
.active-filters-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

.filter-bar .filters-grid select {
  background-position: right 6px center;
  background-size: 10px 10px;
}

.filter-bar .filters-grid input:focus,
.filter-bar .filters-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.filter-bar .filters-grid label:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.filter-bar .filters-grid label.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.filter-bar .filters-grid label.active > span {
  color: var(--accent);
}

.filter-bar .filters-grid label.active select,
.filter-bar .filters-grid label.active input {
  color: var(--accent);
}

.filter-bar .warning-badge {
  margin-left: auto;
}

.visually-hidden-filter {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---- Multi-select pill (Business Unit / Project) ---- */
.multiselect {
  position: relative;
  display: inline-flex;
}

.multiselect.hidden { display: none; }

.multiselect-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-chip);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.multiselect-button:hover { border-color: var(--border-strong); }

.multiselect-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.multiselect-button[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.multiselect-prefix {
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.multiselect-summary {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect-caret {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  margin-left: 2px;
  transition: transform 200ms ease;
}

.multiselect-button[aria-expanded="true"] .multiselect-caret {
  transform: rotate(180deg);
}

.multiselect.active .multiselect-button {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.multiselect.active .multiselect-prefix,
.multiselect.active .multiselect-summary,
.multiselect.active .multiselect-caret {
  color: var(--accent);
}

.multiselect-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-elev);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.multiselect-list {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.multiselect-empty {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

.multiselect-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: var(--space-0);
}

.multiselect-option:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.multiselect-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: var(--space-0);
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.multiselect-option:has(input:checked) {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ---- Date range button + preset popover ---- */
.date-range {
  position: relative;
  display: inline-flex;
}

.date-range-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-chip);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.date-range-button svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  color: var(--text-muted);
}

.date-range-button .date-range-caret {
  width: 12px !important;
  height: 12px !important;
  transition: transform 200ms ease;
}

.date-range-button:hover {
  border-color: var(--border-strong);
}

.date-range-button[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.date-range-button[aria-expanded="true"] .date-range-caret {
  transform: rotate(180deg);
}

.date-range-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.date-range-button.active svg { color: var(--accent); }

.date-range-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-elev);
  padding: 6px;
}

.date-range-presets {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.date-range-presets li { margin: var(--space-0); }

.date-range-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 4px;
}

.date-range-presets button {
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.date-range-presets button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.date-range-presets button.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.date-range-custom {
  margin-top: 6px;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date-range-custom label {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.date-range-custom input[type="date"] {
  height: 34px;
  padding: 0 10px;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
}

.date-range-custom input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.date-range-custom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.date-range-custom-actions .ghost-button,
.date-range-custom-actions .primary-button {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 7px;
}

@media (max-width: 720px) {
  .filter-bar .filters-grid label {
    flex: 1 1 calc(50% - 6px);
  }
}

.filters-grid label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.filters-grid input,
.filters-grid select {
  height: 36px;
  padding: 0 12px;
  font-size: var(--font-size-base);
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-chip);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.filters-grid input:hover,
.filters-grid select:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.filters-grid input:focus,
.filters-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--surface);
}

.filters-grid select {
  padding-right: 30px;
  background-position: right 10px center;
  background-size: 11px 11px;
}

/* ---- Section kicker: accented dot ---- */
.panel-header .section-kicker,
.overview-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

/* Dashboard Clean has no dot before section eyebrows. */
.panel-header .section-kicker::before,
.overview-section-kicker::before {
  display: none;
}

/* ---- Settings: integrations & uploads ---- */
.admin-integration-list,
.uploads-grid {
  gap: var(--space-4);
}

.admin-integration-card,
.upload-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease, border-color 220ms ease;
}

.admin-integration-card:hover,
.upload-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--border);
}

.admin-integration-card h4,
.upload-card h4 {
  font-size: 14.5px;
  letter-spacing: -0.005em;
}

.upload-status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.spend-upload-row {
  padding: 12px 14px;
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.spend-table input {
  height: 32px;
  border-radius: 8px;
  font-size: var(--font-size-base);
}

/* ---- Owner builder ---- */
.owner-builder-form {
  max-width: none;
  gap: var(--space-4) var(--space-5);
}

.owner-builder-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.owner-builder-form .field > span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.owner-builder-form input:not([type="checkbox"]):not([type="radio"]),
.owner-builder-form select {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  box-shadow: var(--shadow-chip);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.owner-builder-form input:focus,
.owner-builder-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.owner-builder-grid {
  padding: 14px 16px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  gap: 8px 14px;
}

.owner-builder-grid label {
  /* Override the global `label { flex-direction: column }` so the checkbox
     sits beside the text, not above it. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.owner-builder-grid label:hover {
  border-color: var(--border);
  background: var(--surface);
}

.owner-builder-grid label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.owner-toggle {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-chip);
  width: fit-content;
}

.field-label-inline {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Settings page (Untitled UI style) ---- */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.settings-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-page-head h2 {
  margin: var(--space-0);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.settings-page-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 60ch;
}

.settings-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.settings-page-actions .ghost-button,
.settings-page-actions .primary-button {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
  border-radius: 10px;
}

.settings-tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-1);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  width: fit-content;
}

.settings-tab {
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-chip);
  font-weight: 600;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 4px 24px;
  box-shadow: var(--shadow-soft);
}

.settings-section-head {
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-section-head h3 {
  margin: var(--space-0);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.settings-section-head p {
  margin: 4px 0 0;
  font-size: var(--font-size-base);
  color: var(--text-muted);
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--space-7);
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-label label {
  display: block;
  margin: var(--space-0);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.settings-row-label p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-row-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 520px;
}

.settings-row-control input[type="text"],
.settings-row-control input[type="email"],
.settings-row-control input[type="number"],
.settings-row-control input:not([type]),
.settings-row-control select,
.settings-row-control textarea {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-chip);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.settings-row-control input:focus,
.settings-row-control select:focus,
.settings-row-control textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  width: fit-content;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.settings-toggle:hover {
  background: var(--surface-hover);
}

.settings-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: var(--space-0);
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 720px) {
  .settings-page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .settings-tabs {
    width: 100%;
    overflow-x: auto;
  }
}

/* ---- Sidebar: dashboards (workspaces) group ---- */
.sidebar-workspaces {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tab-button.workspace-tab .item-icon {
  color: var(--text-subtle);
}

.tab-button.workspace-tab.active .item-icon {
  color: var(--accent);
}

.tab-button.workspace-tab[disabled] {
  cursor: default;
}

.tab-button.workspace-tab[disabled]:not(.active) {
  opacity: 0.55;
}

/* ---- Collapsible sidebar groups (chevron) ---- */
.sidebar-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  margin: var(--space-0);
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease;
}

.sidebar-group-label:hover {
  color: var(--text-secondary);
  background: var(--surface-hover);
}

.sidebar-group-label::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transform-origin: center;
  transition: transform 180ms ease;
  opacity: 0.7;
}

.sidebar-group.collapsed .sidebar-group-label::after {
  transform: rotate(-45deg) translate(0px, 0px);
}

.sidebar-group.collapsed > nav,
.sidebar-group.collapsed > .sidebar-workspaces,
.sidebar-group.collapsed > .tab-button {
  display: none;
}

/* Hide direct tab-button children when collapsed (nav groups have buttons as siblings of label) */
.sidebar-group.collapsed .tab-button,
.sidebar-group.collapsed .sidebar-workspaces {
  display: none;
}

/* ---- Sidebar footer: name + email layout ---- */
.sidebar-footer .user-meta strong {
  font-size: 13.5px;
  font-weight: 600;
}

.sidebar-footer .user-meta span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Mobile sidebar tweaks ---- */
@media (max-width: 900px) {
  .sidebar {
    padding: 14px 14px 12px;
  }
  .sidebar-brand::after { display: none; }
  .filter-panel { padding: var(--space-4); }
}

/* ============================================================
   v2 upgrades — toasts, command palette, drawer, skeletons,
   exports menu, keyboard hints
   ============================================================ */

/* ---- Toast notifications ---- */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 40px));
}
.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--text);
  animation: toastIn 200ms ease-out both;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }
.toast.toast-info { border-left-color: var(--info); }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-title { font-weight: 600; margin-bottom: 2px; }
.toast .toast-msg { color: var(--text-muted); word-wrap: break-word; }
.toast .toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-subtle);
  padding: 2px;
  line-height: 1;
  font-size: var(--font-size-lg);
}
.toast .toast-close:hover { color: var(--text); }
.toast.toast-leave { animation: toastOut 180ms ease-in both; }
@keyframes toastIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(20px); opacity: 0; }
}

/* ---- Command palette / global search overlay ---- */
.command-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.command-overlay.hidden { display: none; }
.command-panel {
  width: min(620px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.command-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.command-input-wrap:focus-within {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.command-input-wrap svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.command-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
.command-input::placeholder { color: var(--text-subtle); }
.command-kbd {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.command-results {
  list-style: none;
  margin: var(--space-0);
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.command-section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  padding: 10px 10px 4px;
}
.command-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
}
.command-result:hover, .command-result.active { background: var(--accent-soft); }
.command-result-meta { color: var(--text-muted); font-size: var(--font-size-sm); margin-left: auto; }
.command-result-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.command-result-icon svg { width: 14px; height: 14px; color: var(--text-muted); }
.command-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}
.command-footer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--text-subtle);
  display: flex;
  gap: 14px;
}
.command-footer .command-kbd { font-size: var(--font-size-2xs); }

/* ---- Lead detail side drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.4);
  z-index: 9050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(15, 17, 21, 0.08);
  z-index: 9060;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-header h3 { margin: var(--space-0); font-size: var(--font-size-lg); }
.drawer-close {
  border: none;
  background: var(--surface-muted);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.drawer-close:hover { background: var(--surface-hover); color: var(--text); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}
.drawer-section {
  margin-bottom: 22px;
}
.drawer-section h4 {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 8px 0;
}
.drawer-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  font-size: var(--font-size-base);
}
.drawer-grid dt { color: var(--text-muted); font-weight: 500; }
.drawer-grid dd { margin: var(--space-0); color: var(--text); word-break: break-word; }
.drawer-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}
.lead-row-link { cursor: pointer; }
.lead-row-link:hover td { background: var(--accent-soft); }

/* ---- Skeleton loaders ---- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-muted) 25%,
    var(--surface-hover) 37%,
    var(--surface-muted) 63%
  );
  background-size: 400% 100%;
  border-radius: 6px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }

/* ---- Export dropdown menu ---- */
.export-menu {
  position: relative;
  display: inline-block;
}
.export-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  height: 30px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
}
.export-trigger:hover { background: var(--surface-hover); color: var(--text); }
.export-trigger svg { width: 14px; height: 14px; }
.export-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 30;
}
.export-popover.hidden { display: none; }
.export-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-base);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.export-option:hover { background: var(--accent-soft); }
.export-option .opt-sub { color: var(--text-muted); font-size: var(--font-size-xs); display: block; margin-top: 1px; }

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ---- Sync health diagnostic chip ---- */
.sync-health-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  margin-left: 8px;
}
.sync-health-chip.ok { background: var(--success-bg); color: var(--success); }
.sync-health-chip.warn { background: var(--warning-bg); color: var(--warning); }
.sync-health-chip.bad { background: var(--danger-bg); color: var(--danger); }
.sync-health-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Help shortcuts modal (?) ---- */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.5);
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.shortcuts-overlay.hidden { display: none; }
.shortcuts-panel {
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--shadow-pop);
}
.shortcuts-panel h3 { margin: 0 0 14px; font-size: var(--font-size-lg); }
.shortcuts-list {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
.shortcuts-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  padding: 4px 0;
}
.shortcuts-list .keys {
  display: inline-flex;
  gap: var(--space-1);
}
.shortcuts-list kbd {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
  min-width: 20px;
  text-align: center;
}
@media (max-width: 600px) {
  .shortcuts-list { grid-template-columns: 1fr; }
}

/* Tighten the sidebar footer to fit the new theme toggle button */
.sidebar-footer { gap: var(--space-2); }
.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================
   Neutral redesign layer - calm reporting workspace
   ===================================================== */

* {
  letter-spacing: 0 !important;
}

body {
  background: var(--canvas);
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  font-weight: 650;
}

a {
  color: var(--accent);
}

code {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* Login */
.login-view {
  background: var(--canvas);
  grid-template-columns: minmax(360px, 0.82fr) minmax(480px, 1.18fr);
}

.login-form-pane {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 48px;
}

.login-card {
  max-width: 390px;
  gap: 22px;
}

.login-brand-name {
  color: var(--text);
  font-weight: 700;
}

.login-intro h2 {
  font-size: 26px;
  font-weight: 650;
}

.section-kicker,
.panel-header .section-kicker,
.overview-section-kicker,
.sidebar-group-label,
.kpi-card span,
.cost-card .cost-lbl,
.pipeline-stage-card .pipeline-stage-card-lbl {
  font-weight: 650;
  color: var(--text-muted);
}

.login-form .field input,
input,
select,
textarea {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 8px;
}

.login-form .field input:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

.login-form .field input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.login-submit:hover {
  box-shadow: none;
}

.demo-accounts,
.demo-accounts[open] {
  background: var(--surface-muted);
  border-color: var(--border);
}

.login-hero-pane {
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.36), rgba(255, 254, 251, 0)),
    #ede7dc;
  color: var(--text);
  gap: 26px;
}

.hero-blob {
  display: none;
}

.hero-stage {
  height: 318px;
}

.hero-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 42px -34px rgba(32, 26, 22, 0.38);
  background: var(--surface);
}

.hero-card-main h4,
.ring-number {
  color: var(--text);
}

.hero-card-trend {
  color: var(--success);
  background: var(--success-bg);
}

#heroChartFill stop:first-child {
  stop-color: var(--accent);
  stop-opacity: 0.18;
}

#heroChartFill stop:last-child {
  stop-color: var(--accent);
  stop-opacity: 0;
}

.hero-chart-line {
  stroke: var(--accent) !important;
}

.hero-chart-line-faint {
  stroke: #8d8274 !important;
}

.ring-track {
  stroke: var(--border-strong) !important;
}

.ring-fill-outer {
  stroke: var(--accent) !important;
}

.ring-fill-mid {
  stroke: var(--success) !important;
}

.ring-fill-inner {
  stroke: var(--info) !important;
}

.ring-label,
.hero-card-main footer,
.hero-slide p {
  color: var(--text-muted);
}

.hero-slide h3 {
  color: var(--text);
  font-weight: 650;
}

.hero-dot {
  background: rgba(124, 95, 70, 0.22);
}

.hero-dot:hover {
  background: rgba(124, 95, 70, 0.4);
}

.hero-dot.active {
  background: var(--accent);
}

/* Shell */
.app-shell {
  background: var(--canvas);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  gap: 14px;
  box-shadow: none;
}

.sidebar-brand {
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.savills-logo-sm,
.savills-logo-lg {
  box-shadow: none;
}

.sidebar-search {
  padding: var(--space-0);
}

.sidebar-search input {
  height: 32px;
  border-radius: 7px;
  background: var(--surface-muted);
  border-color: var(--border);
  font-size: 12.5px;
}

.sidebar-search .kbd {
  background: var(--surface);
  border-color: var(--border);
}

.sidebar-group {
  gap: 1px;
}

.sidebar-group-label {
  padding: 6px 10px;
  font-size: 10.5px;
}

.sidebar-item,
.tab-button {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.sidebar-item .item-icon,
.tab-button .item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
}

.sidebar-item:hover,
.tab-button:hover,
.sidebar-group-label:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sidebar-item.active,
.tab-button.active {
  background: var(--surface-muted);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-item.active .item-icon,
.tab-button.active .item-icon,
.tab-button.workspace-tab.active .item-icon {
  color: var(--accent);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 8px 0;
}

.sidebar-footer .user-avatar,
.agent-avatar {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

#logoutButton.ghost-button:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.app-topbar {
  padding: 12px 24px;
  background: rgba(244, 241, 234, 0.92);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.app-topbar h1 {
  font-size: var(--font-size-2xl);
  font-weight: 650;
}

.app-topbar .scope-summary {
  color: var(--text-muted);
}

.user-badge,
.sync-badge,
.sync-health-chip {
  border: 1px solid var(--border);
  box-shadow: none;
}

.app-content {
  padding: 20px 24px 42px;
  gap: 18px;
}

/* Surfaces */
.panel,
.overview-hero,
.kpi-card,
.cost-card,
.pipeline-stage-card,
.agent-card,
.insight-card,
.upload-card,
.admin-integration-card,
.integration-card,
.listing-card,
.owner-card,
.workspace-panel,
.metric-card,
.summary-card,
.lead-detail-card,
.campaign-card,
.camp-report-card,
.drawer,
.shortcuts-panel,
.command-panel,
.export-popover,
.modal,
.empty-state,
.all-leads-breakdown,
.agent-stats,
.agent-stage-grid,
.agent-card-footer,
.camp-report-cell {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: none;
}

.panel {
  padding: 18px;
  border-color: var(--border);
}

.panel.inset-panel:hover,
.admin-integration-card:hover,
.upload-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}

.panel-header {
  margin-bottom: 12px;
}

.panel-header h3 {
  font-size: 15px;
  font-weight: 650;
}

.panel-header p.scope-summary,
.panel-sub,
.scope-summary {
  color: var(--text-muted);
}

.filter-panel {
  padding: 12px 14px;
}

.filter-bar-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.filters-grid {
  gap: 8px 10px;
}

.filters-grid input,
.filters-grid select {
  height: 32px;
}

.primary-button,
.ghost-button,
.export-trigger,
.agent-sort-pill,
.all-leads-pill {
  border-radius: 7px;
  box-shadow: none;
}

.primary-button {
  background: var(--accent);
  color: var(--accent-on);
}

.primary-button:hover {
  background: var(--accent-hover);
}

.ghost-button,
.export-trigger,
.agent-sort-pill,
.all-leads-pill {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}

.ghost-button:hover,
.export-trigger:hover,
.agent-sort-pill:hover,
.all-leads-pill:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.agent-sort-pill.active,
.all-leads-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* Metrics */
.kpi-grid {
  gap: 10px;
}

.kpi-card {
  min-height: 86px;
  padding: 12px 14px;
  border-top: 3px solid var(--border-strong);
}

.kpi-card strong,
.cost-card .cost-val,
.pipeline-stage-card .pipeline-stage-card-val,
.insight-card .insight-value,
.meta-source-stat-val {
  font-weight: 750;
  color: var(--text);
}

.kpi-card strong {
  font-size: var(--font-size-3xl);
}

.kpi-card .kpi-sub,
.cost-card .cost-sub,
.cost-card .cost-foot,
.pipeline-stage-card .pipeline-stage-card-sub {
  color: var(--text-muted);
}

.kpi-grid > .kpi-card.kpi-card-new,
.kpi-card.kpi-card-new {
  border-top-color: #8d8274;
}
.kpi-grid > .kpi-card.kpi-card-new strong { color: var(--text-secondary); }

.kpi-grid > .kpi-card.kpi-card-ic,
.kpi-card.kpi-card-ic {
  border-top-color: var(--info);
}
.kpi-grid > .kpi-card.kpi-card-ic strong { color: var(--info); }

.kpi-grid > .kpi-card.kpi-card-qual,
.kpi-card.kpi-card-qual {
  border-top-color: var(--success);
}
.kpi-grid > .kpi-card.kpi-card-qual strong { color: var(--success); }

.kpi-grid > .kpi-card.kpi-card-view,
.kpi-card.kpi-card-view {
  border-top-color: var(--warning);
}
.kpi-grid > .kpi-card.kpi-card-view strong { color: var(--warning); }

.kpi-grid > .kpi-card.kpi-card-na,
.kpi-card.kpi-card-na {
  border-top-color: #8d8274;
}
.kpi-grid > .kpi-card.kpi-card-na strong { color: #8d8274; }

.kpi-grid > .kpi-card.kpi-card-cpql,
.kpi-card.kpi-card-cpql {
  background: var(--surface);
  border-top-color: var(--info);
}
.kpi-grid > .kpi-card.kpi-card-cpql strong { color: var(--info); }

.kpi-grid > .kpi-card.kpi-card-cpl,
.kpi-card.kpi-card-cpl {
  border-top-color: var(--accent);
}
.kpi-grid > .kpi-card.kpi-card-cpl strong { color: var(--accent); }

.overview-hero {
  border-left: 0;
  padding: 18px 20px;
}

.overview-hero-loc {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--accent);
}

.overview-hero-metrics .overview-hero-metric-card,
.overview-hero-metric-card {
  background: var(--surface-muted);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: none;
}

.overview-hero-metric-card .overview-hero-metric-val,
.overview-hero-metric-accent,
.overview-hero-metric-gold {
  color: var(--accent);
}

.cost-card.ce-cpl,
.cost-card.ce-cpql,
.cost-card.ce-best,
.cost-card.ce-worst {
  background: var(--surface);
}

.cost-card.ce-cpl { border-top-color: var(--accent); }
.cost-card.ce-cpl .cost-val { color: var(--accent); }
.cost-card.ce-cpql { border-top-color: var(--info); }
.cost-card.ce-cpql .cost-val { color: var(--info); }
.cost-card.ce-best { border-top-color: var(--success); }
.cost-card.ce-best .cost-val { color: var(--success); }
.cost-card.ce-worst { border-top-color: var(--warning); }
.cost-card.ce-worst .cost-val { color: var(--warning); }

.pipeline-overview-row {
  gap: var(--space-2);
}

.pipeline-stage-card {
  min-height: 68px;
  padding: 10px 11px;
}

.pipeline-stage-card.pipeline-stage-lost .pipeline-stage-card-val,
.agent-summary-cell strong.metric-tone-lost,
.stage-tone-lost,
.agent-stats .stat strong.bad,
.acf-stale {
  color: var(--danger);
}

.pipeline-stage-card.pipeline-stage-ic .pipeline-stage-card-val,
.pipeline-stage-card.pipeline-stage-future .pipeline-stage-card-val,
.agent-summary-cell strong.metric-tone-ic,
.stage-tone-ic {
  color: var(--info);
}

.pipeline-stage-card.pipeline-stage-qual .pipeline-stage-card-val,
.agent-summary-cell strong.metric-tone-qual,
.agent-summary-cell strong.metric-tone-won,
.stage-tone-qual,
.stage-tone-won,
.agent-stats .stat strong.good,
.acf-fresh {
  color: var(--success);
}

.pipeline-stage-card.pipeline-stage-view .pipeline-stage-card-val,
.pipeline-stage-card.pipeline-stage-na .pipeline-stage-card-val,
.agent-summary-cell strong.metric-tone-view,
.agent-summary-cell strong.metric-tone-na,
.stage-tone-view,
.stage-tone-na,
.acf-recent,
.meta-source-stat-gold {
  color: var(--warning);
}

.pipeline-stage-card.pipeline-stage-new .pipeline-stage-card-val {
  color: var(--text-secondary);
}

/* Tables and lists */
.table-wrap {
  margin: 0 -18px;
  padding: 0 18px;
}

table,
.compact-table {
  font-size: 12.5px;
}

thead th,
.compact-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-bottom-color: var(--border);
  padding: 8px 10px;
  font-weight: 650;
}

tbody td,
.compact-table td {
  padding: 10px;
  border-bottom-color: var(--border-subtle);
}

tbody tr:hover td,
.compact-table tr:hover td,
.lead-row-link:hover td,
.transfer-route-row.active td {
  background: var(--surface-hover);
}

.empty-table,
.empty-state,
.chart-empty {
  color: var(--text-muted);
}

/* Statuses */
.badge,
.agent-score,
.meta-status,
.meta-status-pill,
.sync-badge,
.sync-health-chip,
.upload-status,
.drawer-pill {
  border-radius: 999px;
}

.badge-good,
.agent-score-good,
.meta-status-live,
.meta-status-pill.pill-active,
.sync-badge-live,
.sync-health-chip.ok,
.upload-status[data-tone="ok"] {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warn,
.grade-warn,
.agent-score-warn,
.meta-status-pill.pill-paused,
.sync-badge-warning,
.sync-health-chip.warn {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-bad,
.grade-bad,
.agent-score-bad,
.meta-status-pill.pill-issue,
.sync-health-chip.bad {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-muted,
.meta-status-off,
.meta-status-pill.pill-muted,
.upload-status {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border);
}

.grade-good,
.compact-table td.good {
  color: var(--success);
}

.grade-warn {
  color: var(--warning);
}

.grade-bad {
  color: var(--danger);
}

.status-fresh { background: var(--success); }
.status-recent { background: var(--warning); }
.status-stale { background: var(--danger); }

.insight-card.good { border-left-color: var(--success); }
.insight-card.warn { border-left-color: var(--warning); }
.insight-card.bad { border-left-color: var(--danger); }
.insight-card.info { border-left-color: var(--info); }
.insight-card.good .insight-value { color: var(--success); }
.insight-card.warn .insight-value { color: var(--warning); }
.insight-card.bad .insight-value { color: var(--danger); }
.insight-card.info .insight-value { color: var(--info); }

.campaigns-status-kicker,
.meta-snapshot-kicker,
.meta-source-stat-accent {
  color: var(--info);
}

.meta-dot {
  background: var(--info);
}

.camp-report-cell.tone-good { border-left-color: var(--success); }
.camp-report-cell.tone-bad { border-left-color: var(--danger); }

.all-leads-breakdown {
  background: var(--surface-muted);
}

.all-leads-breakdown .breakdown-row {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 7px;
}

.all-leads-breakdown .breakdown-row span:last-child {
  background: var(--accent-soft);
  color: var(--accent);
}

.drawer-backdrop,
.shortcuts-overlay {
  background: rgba(32, 26, 22, 0.38);
}

.drawer-close,
.shortcuts-list kbd,
.command-result-icon,
.command-footer,
.export-option:hover {
  background: var(--surface-muted);
}

.command-result.active {
  background: var(--surface-hover);
}

.view-panel.active .panel,
.view-panel.active .kpi-card,
.login-card,
.login-card > * {
  animation: none;
}

button:active {
  transform: none;
}

@media (max-width: 960px) {
  .login-view {
    grid-template-columns: 1fr;
  }

  .login-form-pane {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --sidebar-width: 100%;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .app-topbar,
  .app-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =====================================================
   Prototype layout pass - blue SaaS dashboard
   ===================================================== */

body {
  background: var(--canvas);
}

.login-view {
  background: var(--canvas);
}

.login-hero-pane {
  background: var(--brand-blue);
  color: var(--accent-on);
}

.login-hero-pane .hero-slide h3,
.login-hero-pane .hero-slide p {
  color: var(--accent-on);
}

.hero-card-trend {
  color: var(--brand-blue);
  background: rgba(37, 39, 58, 0.08);
}

/* App shell and tabs */
.app-shell {
  background: var(--canvas);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  background: var(--brand-blue);
  border-right: 0;
  color: var(--accent-on);
  padding: 14px 12px;
  gap: 14px;
}

.sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  min-height: 48px;
}

.sidebar-brand::after {
  content: "Reporting";
  color: var(--accent-on);
  font-size: var(--font-size-md);
  font-weight: 650;
}

.sidebar .savills-logo-sm {
  background: #ffffff;
  padding: 3px;
  border-radius: 8px;
}

.sidebar-search input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--accent-on);
}

.sidebar-search input::placeholder,
.sidebar-search .search-icon,
.sidebar-search .kbd,
.sidebar-group-label,
.sidebar .user-meta span {
  color: rgba(255, 255, 255, 0.58);
}

.sidebar-search .kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-search input:focus {
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.sidebar-group {
  gap: 2px;
}

.sidebar-group-label {
  padding: 9px 10px 5px;
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
}

.sidebar-group-label:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

.tab-button,
.sidebar-item {
  height: 32px;
  color: rgba(255, 255, 255, 0.74);
  border-radius: 7px;
}

.tab-button .item-icon,
.sidebar-item .item-icon,
.tab-button.workspace-tab .item-icon {
  color: rgba(255, 255, 255, 0.5);
}

.tab-button:hover,
.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-on);
}

.tab-button:hover .item-icon,
.sidebar-item:hover .item-icon {
  color: var(--accent-on);
}

.tab-button.active,
.sidebar-item.active {
  background: #ffffff;
  color: var(--brand-blue);
  box-shadow: none;
}

.tab-button.active .item-icon,
.sidebar-item.active .item-icon,
.tab-button.workspace-tab.active .item-icon {
  color: var(--brand-blue);
}

.tab-button[data-view="overview"].active {
  box-shadow: inset 0 0 0 1px rgba(37, 39, 58, 0.08);
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-footer .user-avatar {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-on);
}

.sidebar-footer .user-meta strong {
  color: var(--accent-on);
}

#logoutButton.ghost-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}

#logoutButton.ghost-button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--accent-on);
}

.app-main {
  background: var(--canvas);
}

.app-topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border);
  padding: 11px 22px;
  min-height: 58px;
}

.app-topbar h1 {
  font-size: var(--font-size-xl);
}

.user-badge,
.sync-badge {
  height: 28px;
  border-radius: 7px;
  background: var(--surface);
}

.app-content {
  padding: 14px 18px 32px;
  gap: var(--space-3);
}

.workspace-panel {
  padding: 12px 14px;
}

/* Filter toolbar like the prototype command/filter row */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-2);
  box-shadow: none;
}

.filter-bar-icon {
  background: var(--brand-blue);
  color: var(--accent-on);
  border-radius: 7px;
}

.filter-bar .filters-grid label,
.multiselect-button,
.date-range-button {
  height: 30px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}

.filter-bar .filters-grid label:hover,
.multiselect-button:hover,
.date-range-button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.filter-bar .filters-grid label:focus-within,
.multiselect-button[aria-expanded="true"],
.date-range-button[aria-expanded="true"],
.date-range-button.active,
.multiselect.active .multiselect-button {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(37, 39, 58, 0.1);
}

.filter-bar .filters-grid label.active,
.multiselect.active .multiselect-button,
.date-range-button.active {
  background: rgba(37, 39, 58, 0.06);
}

.filter-bar .filters-grid label.active > span,
.filter-bar .filters-grid label.active select,
.filter-bar .filters-grid label.active input,
.multiselect.active .multiselect-prefix,
.multiselect.active .multiselect-summary,
.multiselect.active .multiselect-caret,
.date-range-button.active svg {
  color: var(--brand-blue);
}

/* Overview page: prototype-style dense grid */
#overviewView.active {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

#overviewView > * {
  min-width: 0;
}

#overviewView .overview-section-kicker {
  display: none;
}

/* Earlier theme attempts left rules that collapsed the kpi-grid container to
   a ~10px clipped strip even when full of 94px-tall .kpi-card children. Force
   it to fit content explicitly. */
#overviewView #kpiGrid {
  min-height: 0;
  height: auto !important;
}
#overviewView #kpiGrid:empty {
  display: none;
}

#overviewView .overview-hero,
#overviewView #kpiGrid,
#overviewView .overview-portal-panel,
#overviewView .cost-efficiency-row,
#overviewView .pipeline-overview-row,
#overviewView .overview-split,
#overviewView #topListsGroup,
#overviewView #metaSnapshotPanel {
  grid-column: 1 / -1;
}

#overviewView .overview-hero {
  background: var(--brand-blue);
  border: 0;
  border-radius: 12px;
  color: var(--accent-on);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-3);
  overflow: hidden;
  position: relative;
}

#overviewView .overview-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

#overviewView .overview-hero-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-0);
  min-height: 132px;
  position: relative;
  z-index: 1;
}

#overviewView .overview-hero-head::before {
  content: "Overview";
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--font-size-xs);
  font-weight: 650;
  text-transform: uppercase;
}

#overviewView .overview-hero-head h2 {
  color: var(--accent-on);
  font-size: 30px;
  line-height: 1.04;
  max-width: 220px;
}

#overviewView .overview-hero-loc {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent-on);
  border-radius: 999px;
}

#overviewView .overview-hero-metrics {
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

#overviewView .ohm {
  align-items: flex-start;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  padding: 13px 12px;
  min-height: 112px;
  justify-content: space-between;
}

#overviewView .overview-hero-metric-val,
#overviewView .overview-hero-metric-accent,
#overviewView .overview-hero-metric-good,
#overviewView .overview-hero-metric-bad,
#overviewView .overview-hero-metric-gold {
  color: var(--accent-on);
  font-size: 26px;
}

#overviewView .overview-hero-metric-lbl {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-size-2xs);
}

#overviewView .overview-hero-metric-sub {
  color: rgba(255, 255, 255, 0.48);
}

#overviewView #kpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

#overviewView #kpiGrid .kpi-card {
  border: 0;
  border-radius: 0;
  min-height: 94px;
  padding: 13px 14px;
  background: var(--surface);
}

#overviewView #kpiGrid .kpi-card strong {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--brand-blue);
  letter-spacing: -0.02em;
}
/* CPL / CPQL carry the longest strings ("AED 1,104"); shrink just those so the
   narrow 8-across cards don't ellipsize them. */
#overviewView #kpiGrid .kpi-card-cpl strong,
#overviewView #kpiGrid .kpi-card-cpql strong { font-size: clamp(15px, 1.15vw, 17px); }
/* Closed Lost / NA flagged red (design). Matches 6277's specificity so it wins. */
#overviewView #kpiGrid .kpi-card.kpi-card-lost strong { color: var(--danger); }

#overviewView #kpiGrid .kpi-card span,
#overviewView .cost-card .cost-lbl,
#overviewView .pipeline-stage-card .pipeline-stage-card-lbl {
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
}

#overviewView .cost-efficiency-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

#overviewView .cost-card {
  border-radius: 10px;
  padding: 14px;
  min-height: 130px;
}

#overviewView .cost-card .cost-val {
  font-size: 22px;
  color: var(--brand-blue);
}

#overviewView .pipeline-overview-row {
  grid-template-columns: repeat(9, minmax(108px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

#overviewView .pipeline-stage-card {
  border: 0;
  border-radius: 0;
  min-height: 78px;
  background: var(--surface);
}

#overviewView .pipeline-stage-card .pipeline-stage-card-val {
  font-size: 21px;
}

#overviewView .overview-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

#overviewView .overview-split > .panel {
  grid-column: span 6;
}

#overviewView .overview-split:first-of-type > .panel:first-child,
#overviewView .overview-split:nth-of-type(2) > .panel:first-child {
  grid-column: span 7;
}

#overviewView .overview-split:first-of-type > .panel:last-child,
#overviewView .overview-split:nth-of-type(2) > .panel:last-child {
  grid-column: span 5;
}

#overviewView .panel,
#overviewView .cost-card,
#overviewView .meta-snapshot-panel {
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: none;
}

#overviewView .panel-header {
  align-items: center;
}

#overviewView .panel-header h3 {
  font-size: var(--font-size-md);
}

#overviewView .chart-h-240 {
  height: 260px;
}

#overviewView .chart-h-300 {
  height: 280px;
}

#overviewView #topListsGroup:not(.hidden) {
  display: block;
}

#overviewView .meta-snapshot-panel {
  background: var(--surface);
}

#overviewView .meta-snapshot-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

#overviewView .mss {
  background: var(--surface-muted);
  padding: var(--space-3);
}

#overviewView .meta-source-stat-val,
#overviewView .meta-source-stat-accent,
#overviewView .meta-source-stat-gold {
  color: var(--brand-blue);
}

/* Shared panels after the shell change */
.panel,
.kpi-card,
.cost-card,
.pipeline-stage-card,
.agent-card,
.insight-card,
.upload-card,
.admin-integration-card,
.integration-card,
.listing-card,
.owner-card,
.workspace-panel,
.metric-card,
.summary-card,
.lead-detail-card,
.campaign-card,
.camp-report-card,
.drawer,
.shortcuts-panel,
.command-panel,
.export-popover {
  border-radius: 10px;
  border-color: var(--border);
  box-shadow: none;
}

.primary-button {
  background: var(--brand-blue);
}

.primary-button:hover {
  background: var(--accent-hover);
}

.agent-sort-pill.active,
.all-leads-pill.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.overview-hero-metric-accent,
.overview-hero-metric-gold,
.meta-source-stat-accent,
.meta-source-stat-gold,
.all-leads-breakdown .breakdown-row span:last-child {
  color: var(--brand-blue);
}

.all-leads-breakdown .breakdown-row span:last-child,
.drawer-pill {
  background: var(--accent-soft);
}

@media (max-width: 1180px) {
  #overviewView .overview-hero {
    grid-template-columns: 1fr;
  }

  #overviewView .overview-hero-head {
    min-height: auto;
  }

  #overviewView .overview-hero-head h2 {
    max-width: none;
  }

  #overviewView .overview-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #overviewView .cost-efficiency-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #overviewView .pipeline-overview-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-bottom: 0;
  }

  #overviewView .overview-split > .panel,
  #overviewView .overview-split:first-of-type > .panel:first-child,
  #overviewView .overview-split:first-of-type > .panel:last-child,
  #overviewView .overview-split:nth-of-type(2) > .panel:first-child,
  #overviewView .overview-split:nth-of-type(2) > .panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .app-content {
    padding: var(--space-3);
  }

  #overviewView .overview-hero-metrics,
  #overviewView .cost-efficiency-row,
  #overviewView .pipeline-overview-row,
  #overviewView .meta-snapshot-metrics {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Overview command center v2 - richer prototype page
   ===================================================== */

/* (removed gap override; canonical 20px gap is set at line ~5975) */

#overviewView .overview-hero,
#overviewView .overview-studio-row,
#overviewView .overview-analytics-grid {
  grid-column: 1 / -1;
}

#overviewView .overview-hero {
  grid-template-columns: minmax(250px, 0.74fr) minmax(340px, 1fr) minmax(430px, 1.22fr);
  min-height: 250px;
  padding: 18px;
  background:
    linear-gradient(135deg, #25273a 0%, #30334c 54%, #202235 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#overviewView .overview-hero::after {
  display: none;
}

.overview-hero-eyebrow {
  margin: var(--space-0);
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

#overviewView .overview-hero-head::before {
  display: none;
}

#overviewView .overview-hero-head {
  min-height: 214px;
  justify-content: flex-start;
  gap: var(--space-3);
}

#overviewView .overview-hero-head h2 {
  font-size: 34px;
  max-width: 260px;
}

.overview-hero-copy {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--font-size-base);
  line-height: 1.5;
  max-width: 250px;
}

#overviewView .overview-hero-loc {
  margin-top: auto;
}

.overview-hero-chart,
#overviewView .overview-hero-metrics {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.overview-hero-chart {
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 214px;
  overflow: hidden;
}

.overview-hero-chart .chart-wrap {
  height: 172px;
  margin-top: auto;
}

.overview-panel-headline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.overview-panel-headline span {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
}

.overview-panel-headline strong {
  color: var(--accent-on);
  font-size: var(--font-size-sm);
  font-weight: 650;
}

#overviewView .overview-hero-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

#overviewView .ohm {
  min-height: 106px;
  background: rgba(255, 255, 255, 0.055);
  transition: background 180ms ease, transform 180ms ease;
}

#overviewView .ohm:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.overview-studio-row {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(260px, 0.9fr) minmax(360px, 1.22fr);
  gap: 14px;
}

.overview-analytics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.overview-span-7 { grid-column: span 7; }
.overview-span-6 { grid-column: span 6; }
.overview-span-5 { grid-column: span 5; }

.overview-pro-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  min-width: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 0 rgba(37, 39, 58, 0.04);
  animation: overview-panel-in 520ms cubic-bezier(.22,.61,.36,1) both;
}

.overview-pro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 3px solid rgba(37, 39, 58, 0.88);
  pointer-events: none;
}

.overview-pro-panel:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  transition: border-color 180ms ease, transform 180ms ease;
}

.overview-goal-panel { animation-delay: 40ms; }
.overview-pulse-panel { animation-delay: 100ms; }
.overview-source-quality { animation-delay: 160ms; }
.overview-analytics-grid .overview-pro-panel:nth-child(1) { animation-delay: 220ms; }
.overview-analytics-grid .overview-pro-panel:nth-child(2) { animation-delay: 280ms; }
.overview-analytics-grid .overview-pro-panel:nth-child(3) { animation-delay: 340ms; }
.overview-analytics-grid .overview-pro-panel:nth-child(4) { animation-delay: 400ms; }

.overview-mini-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--font-size-xs);
  font-weight: 650;
}

.overview-mini-badge.good {
  background: var(--success-bg);
  color: var(--success);
}

.overview-radial-wrap {
  display: grid;
  place-items: center;
  padding: 6px 0 14px;
}

.overview-radial {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(var(--brand-blue) var(--gauge, 0%), #e7eaf0 0);
  animation: overview-gauge-pop 760ms cubic-bezier(.22,.61,.36,1) both;
}

.overview-radial::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.overview-radial strong,
.overview-radial span {
  position: relative;
  z-index: 1;
}

.overview-radial strong {
  font-size: 30px;
  color: var(--brand-blue);
  line-height: 1;
}

.overview-radial span {
  margin-top: 42px;
  position: absolute;
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
}

.overview-goal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.overview-goal-stats div {
  background: var(--surface-muted);
  padding: 10px;
}

.overview-goal-stats span {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
}

.overview-goal-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: var(--font-size-lg);
}

.overview-pulse-list {
  display: grid;
  gap: var(--space-2);
}

.overview-pulse-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 11px;
  background: var(--surface-muted);
  animation: overview-row-in 480ms cubic-bezier(.22,.61,.36,1) both;
}

.overview-pulse-item span {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
}

.overview-pulse-item strong {
  display: block;
  margin-top: 3px;
  color: var(--brand-blue);
  font-size: 15px;
}

.overview-pulse-item p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.overview-pulse-item.tone-green strong { color: var(--success); }
.overview-pulse-item.tone-gold strong { color: var(--warning); }
.overview-pulse-item.tone-slate strong { color: var(--info); }

.chart-h-220 { height: 220px; }

.overview-dow-heat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.overview-heat-cell {
  min-height: 168px;
  border-radius: 10px;
  padding: 12px 10px;
  background: rgba(37, 39, 58, var(--heat-alpha, 0.08));
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: bottom;
  animation: overview-heat-in 560ms cubic-bezier(.22,.61,.36,1) both;
}

.overview-heat-cell span {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(37, 39, 58, 0.66);
}

.overview-heat-cell strong {
  color: var(--brand-blue);
  font-size: var(--font-size-3xl);
}

.overview-heat-cell em {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-style: normal;
}

.overview-leader-list {
  display: grid;
  gap: 9px;
}

.overview-leader-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  overflow: hidden;
}

.overview-leader-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, rgba(37, 39, 58, 0.12), rgba(37, 39, 58, 0.02));
  animation: overview-bar-sweep 780ms cubic-bezier(.22,.61,.36,1) both;
}

.overview-leader-row > * {
  position: relative;
  z-index: 1;
}

.overview-leader-rank {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--brand-blue);
  color: var(--accent-on);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.overview-leader-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--font-size-base);
}

.overview-leader-row span:not(.overview-leader-rank) {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.overview-leader-row em {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-style: normal;
  text-align: right;
}

#overviewView .overview-split {
  grid-column: 1 / -1;
}

#overviewView .overview-split > .panel,
#overviewView .overview-split:first-of-type > .panel:first-child,
#overviewView .overview-split:first-of-type > .panel:last-child,
#overviewView .overview-split:nth-of-type(2) > .panel:first-child,
#overviewView .overview-split:nth-of-type(2) > .panel:last-child {
  grid-column: span 6;
}

#overviewView .cost-efficiency-row,
#overviewView .pipeline-overview-row {
  margin-top: 2px;
}

@keyframes overview-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes overview-row-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes overview-gauge-pop {
  from {
    opacity: 0;
    transform: scale(0.88) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes overview-heat-in {
  from {
    opacity: 0;
    transform: scaleY(0.7);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes overview-bar-sweep {
  from { width: 0; }
  to { width: var(--bar, 0%); }
}

@media (max-width: 1320px) {
  #overviewView .overview-hero {
    grid-template-columns: minmax(230px, 0.75fr) minmax(300px, 1fr);
  }

  #overviewView .overview-hero-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .overview-studio-row {
    grid-template-columns: 1fr 1fr;
  }

  .overview-source-quality {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  #overviewView .overview-hero,
  .overview-studio-row,
  .overview-analytics-grid {
    grid-template-columns: 1fr;
  }

  #overviewView .overview-hero-chart,
  #overviewView .overview-hero-metrics,
  .overview-span-7,
  .overview-span-5 {
    grid-column: 1 / -1;
  }

  #overviewView .overview-hero-metrics,
  .overview-dow-heat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #overviewView .overview-split > .panel,
  #overviewView .overview-split:first-of-type > .panel:first-child,
  #overviewView .overview-split:first-of-type > .panel:last-child,
  #overviewView .overview-split:nth-of-type(2) > .panel:first-child,
  #overviewView .overview-split:nth-of-type(2) > .panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  #overviewView .overview-hero-metrics,
  .overview-dow-heat,
  .overview-goal-stats {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Full app polish - navigation and secondary pages
   ===================================================== */

.app-shell {
  background: var(--page-shell);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    #25273a;
  padding: 16px 12px 14px;
  gap: var(--space-3);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.sidebar-brand {
  min-height: 58px;
  padding: 10px 10px 14px;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--nav-line);
}

.sidebar-brand::after {
  content: "Savills Reporting";
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: 0 !important;
}

.sidebar .savills-logo-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.45);
}

.sidebar-search {
  padding: 0 2px;
}

.sidebar-search input {
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--nav-ink);
}

.sidebar-search input:hover,
.sidebar-search input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}

.sidebar-search .search-icon {
  left: 15px;
}

.sidebar-search .kbd {
  right: 11px;
  border-radius: 6px;
  color: rgba(248, 250, 252, 0.64);
}

.sidebar-group {
  gap: 3px;
  padding: var(--space-1);
  border-radius: 14px;
}

.sidebar-group-label {
  min-height: 26px;
  padding: 7px 8px 4px;
  color: rgba(248, 250, 252, 0.5);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.sidebar-group-label::after {
  opacity: 0.5;
}

.tab-button,
.sidebar-item {
  height: 36px;
  padding: 0 9px;
  border-radius: 10px;
  gap: 10px;
  color: rgba(248, 250, 252, 0.74);
  position: relative;
}

.tab-button .item-icon,
.sidebar-item .item-icon {
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 7px;
  color: rgba(248, 250, 252, 0.58);
  background: rgba(255, 255, 255, 0.055);
}

.tab-button span,
.sidebar-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-button:hover,
.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--nav-ink);
}

.tab-button:hover .item-icon,
.sidebar-item:hover .item-icon {
  color: var(--accent-on);
  background: rgba(255, 255, 255, 0.12);
}

.tab-button.active,
.sidebar-item.active {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: none;
}

.tab-button.active::after,
.sidebar-item.active::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-blue);
}

.tab-button.active .item-icon,
.sidebar-item.active .item-icon {
  background: var(--brand-blue);
  color: var(--accent-on);
}

.sidebar-workspaces {
  gap: var(--space-1);
}

.tab-button.workspace-tab {
  height: 34px;
}

.tab-button.workspace-tab.active {
  background: rgba(255, 255, 255, 0.92);
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px 0;
  border-top: 1px solid var(--nav-line);
}

.sidebar-footer .user-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--accent-on);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.app-topbar {
  min-height: 64px;
  padding: 12px 24px;
  background: rgba(244, 246, 249, 0.88);
  border-bottom: 1px solid var(--page-border);
  backdrop-filter: blur(14px) saturate(1.2);
}

.app-topbar h1 {
  font-size: 19px;
  font-weight: 750;
}

.topbar-actions {
  gap: var(--space-2);
}

.sync-summary {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.user-badge,
.sync-badge,
.sync-health-chip {
  border-radius: 999px;
  border: 1px solid var(--page-border);
  background: #ffffff;
}

.app-content {
  padding: 16px 20px 36px;
  gap: 14px;
}

.view-panel:not(#overviewView).active {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.view-panel:not(#overviewView).active > .panel,
.view-panel:not(#overviewView).active > .agent-controls-row,
.view-panel:not(#overviewView).active > .agent-cards-grid,
.view-panel:not(#overviewView).active > .overview-split,
.view-panel:not(#overviewView).active > .campaign-grid,
.view-panel:not(#overviewView).active > .campaigns-kpi-row,
.view-panel:not(#overviewView).active > .listings-kpi-grid,
.view-panel:not(#overviewView).active > .kpi-grid,
.view-panel:not(#overviewView).active > .insights-grid,
.view-panel:not(#overviewView).active > .settings-page,
.view-panel:not(#overviewView).active > div[style] {
  grid-column: 1 / -1;
  min-width: 0;
}

.view-panel:not(#overviewView) .overview-split,
.campaign-grid,
.comparison-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.view-panel:not(#overviewView) .overview-split > .panel,
.campaign-grid > .panel,
.comparison-layout > * {
  grid-column: span 6;
}

.panel,
.workspace-panel,
.settings-page,
.comparison-card,
.admin-integration-card,
.upload-card,
.agent-card,
.insight-card,
.cost-card,
.kpi-card,
.summary-item {
  background: var(--page-card);
  border: 1px solid var(--page-border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(37, 39, 58, 0.035);
}

.panel {
  padding: var(--space-4);
}

.panel.inset-panel:hover,
.agent-card:hover,
.upload-card:hover,
.admin-integration-card:hover,
.summary-item:hover {
  border-color: var(--page-border-strong);
  box-shadow: 0 18px 36px -32px rgba(37, 39, 58, 0.36);
}

.panel-header {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--page-border);
}

.panel-header.compact {
  margin-bottom: 14px;
}

.panel-header h3,
.settings-page-head h2 {
  color: var(--text);
  font-weight: 750;
}

.panel-header .section-kicker,
.overview-section-kicker,
.section-kicker {
  color: var(--brand-blue);
  font-weight: 800;
}

.scope-summary,
.panel-sub {
  color: var(--text-muted);
}

.filter-bar {
  border-radius: 14px;
  padding: 9px;
  background: #ffffff;
  border-color: var(--page-border);
}

.filter-bar-icon {
  background: var(--brand-blue);
}

.filter-bar .filters-grid label,
.multiselect-button,
.date-range-button,
.all-leads-pill,
.agent-sort-pill,
.export-trigger {
  border-radius: 9px;
  background: var(--page-card-soft);
  border-color: var(--page-border);
}

.filter-bar .filters-grid label:hover,
.multiselect-button:hover,
.date-range-button:hover,
.all-leads-pill:hover,
.agent-sort-pill:hover,
.export-trigger:hover {
  background: var(--row-hover);
  border-color: var(--page-border-strong);
}

.primary-button,
.ghost-button {
  border-radius: 9px;
}

.primary-button {
  background: var(--brand-blue);
}

.ghost-button {
  border-color: var(--page-border);
  background: #ffffff;
}

.table-wrap {
  margin: 0 -16px -8px;
  padding: 0 16px 8px;
}

table,
.compact-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

thead th,
.compact-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--page-card-soft);
  color: var(--text-muted);
  font-weight: 800;
  border-bottom: 1px solid var(--page-border);
}

tbody td,
.compact-table td {
  border-bottom: 1px solid var(--page-border);
  color: var(--text-secondary);
}

tbody tr:hover td,
.compact-table tr:hover td {
  background: var(--row-hover);
}

.table-pagination {
  margin-top: 12px;
}

.pagination-page.active,
.pagination-nav:hover {
  background: var(--brand-blue);
  color: var(--accent-on);
  border-color: var(--brand-blue);
}

.kpi-grid,
.campaigns-kpi-row,
.listings-kpi-grid {
  gap: 10px;
}

.kpi-card {
  border-top: 0;
  min-height: 104px;
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-blue);
}

.kpi-card strong {
  color: var(--brand-blue);
}

.listings-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.summary-list {
  gap: 9px;
}

.summary-item {
  padding: 12px 14px;
  background:
    linear-gradient(90deg, rgba(37, 39, 58, 0.035), rgba(37, 39, 58, 0)),
    #ffffff;
}

.summary-item span {
  color: var(--brand-blue);
  background: rgba(37, 39, 58, 0.08);
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 700;
}

/* Leads / All Leads */
#leadsView .panel,
#allleadsView .panel,
#listingsView > .panel:last-child {
  overflow: hidden;
}

.all-leads-toolbar {
  padding: 10px;
  background: var(--page-card-soft);
  border: 1px solid var(--page-border);
  border-radius: 12px;
}

.all-leads-search input {
  height: 36px;
  border-radius: 9px;
}

.all-leads-pill.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.all-leads-breakdown {
  border-radius: 12px;
  background: var(--page-card-soft);
}

/* Funnel */
.funnel-list {
  gap: 10px;
}

/* Dashboard Clean: flat funnel rows (no card box) with a thin light track. */
.funnel-row {
  border: none;
  border-radius: 0;
  padding: 9px 0;
  background: transparent;
}

.funnel-row + .funnel-row {
  border-top: 1px solid var(--border-subtle);
}

.funnel-row .funnel-bar {
  height: 8px;
  background: #eef0f3;
  border: none;
}

.funnel-row .funnel-fill {
  background: var(--accent);
}

.funnel-offline {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-muted);
}

/* Agents */
.agent-sort-bar {
  justify-content: flex-end;
}

/* Dashboard Clean: sort as a labelled dropdown (was segmented pills) */
.agent-sort-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.agent-sort-select select {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border-interactive);
  border-radius: 10px;
  background-color: #fff;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.agent-cards-count {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.agent-sort-pill.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--accent-on);
}

.agent-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.agent-card {
  padding: var(--space-4);
}

.agent-avatar {
  background: var(--brand-blue);
  color: var(--accent-on);
  border-radius: 10px;
}

.agent-stats,
.agent-stage-grid,
.agent-card-footer {
  background: var(--page-card-soft);
  border: 1px solid var(--page-border);
}

.agent-score {
  border: 1px solid currentColor;
}

/* Heatmaps / transfers / insights */
.insights-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.insight-card {
  border-left-width: 3px;
  min-height: 148px;
}

.transfer-route-row.active td {
  background: rgba(37, 39, 58, 0.08);
}

/* Campaigns */
.campaigns-status-bar {
  background:
    linear-gradient(135deg, rgba(37, 39, 58, 0.98), rgba(49, 54, 82, 0.98));
  border: 0;
  color: var(--accent-on);
  border-radius: 14px;
}

.campaigns-status-kicker,
.campaigns-status-period {
  color: rgba(255, 255, 255, 0.78);
}

.campaigns-status-bar .meta-dot {
  background: #ffffff;
}

.campaigns-status-bar .meta-status {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-on);
}

.campaigns-kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.camp-report-card,
.camp-report-cell {
  border-radius: 11px;
  border: 1px solid var(--page-border);
}

.meta-status-pill {
  border: 1px solid transparent;
}

/* Integrations / uploads / owner builder */
.admin-integration-list,
.uploads-grid,
.owner-builder-grid {
  gap: var(--space-3);
}

.admin-integration-card,
.upload-card {
  border-radius: 12px;
  background: #ffffff;
}

.upload-card header,
.admin-integration-card header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--page-border);
}

.upload-actions,
.spend-upload-row {
  padding: 10px;
  background: var(--page-card-soft);
  border-radius: 10px;
  border: 1px solid var(--page-border);
}

.owner-builder-form {
  border-radius: 12px;
  border: 1px solid var(--page-border);
  background: #ffffff;
}

.owner-builder-grid label,
.owner-toggle,
.settings-toggle {
  border-radius: 10px;
  border-color: var(--page-border);
}

.owner-builder-grid label:hover,
.owner-toggle:hover,
.settings-toggle:hover {
  border-color: var(--page-border-strong);
  background: var(--row-hover);
}

/* Comparisons */
.comparison-stack {
  gap: 14px;
}

.comparison-card {
  padding: var(--space-4);
}

.comparison-kpis {
  gap: 10px;
}

.comparison-kpi-card {
  border-radius: 11px;
  background: var(--page-card-soft);
  border: 1px solid var(--page-border);
}

/* Settings */
.settings-page {
  padding: 18px;
  background: #ffffff;
  border-radius: 14px;
}

.settings-page-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--page-border);
}

.settings-tabs {
  background: var(--page-card-soft);
  border: 1px solid var(--page-border);
  border-radius: 12px;
  padding: var(--space-1);
}

.settings-tab {
  border-radius: 9px;
}

.settings-tab.active {
  background: var(--brand-blue);
  color: var(--accent-on);
  border-color: var(--brand-blue);
}

.settings-section {
  border-radius: 12px;
  border-color: var(--page-border);
}

.settings-section-head,
.settings-row {
  border-color: var(--page-border);
}

.settings-row-control input[type="text"],
.settings-row-control input[type="email"],
.settings-row-control input[type="number"],
.settings-row-control input:not([type]),
.settings-row-control select,
.settings-row-control textarea,
.owner-builder-form input,
.owner-builder-form select,
.spend-table input,
.upload-mode {
  border-radius: 9px;
  border-color: var(--page-border);
}

.settings-row-control input:focus,
.settings-row-control select:focus,
.settings-row-control textarea:focus,
.owner-builder-form input:focus,
.owner-builder-form select:focus,
.spend-table input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--focus-blue);
}

.command-panel,
.drawer,
.export-popover,
.shortcuts-panel {
  border-color: var(--page-border);
  border-radius: 14px;
}

@media (max-width: 1120px) {
  .view-panel:not(#overviewView) .overview-split > .panel,
  .campaign-grid > .panel,
  .comparison-layout > * {
    grid-column: 1 / -1;
  }

  .agent-sort-bar {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-width: 100%;
  }

  .sidebar {
    border-radius: 0;
  }

  .sidebar-group {
    padding: 2px;
  }

  .tab-button,
  .sidebar-item {
    width: 100%;
  }

  .app-topbar {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 680px) {
  .app-content {
    padding: var(--space-3);
  }

  .panel,
  .settings-page {
    padding: 14px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ================================================================
   v3 — Refined Savills editorial refresh
   Ports the V1 prototype design language onto the existing app.
   Targeted overrides; structural CSS above is preserved.
   ================================================================ */

/* Body — warmer cream, smoothing */
body {
  background: var(--canvas);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}

/* ──── Editorial typography ─────────────────────────────────────── */

/* Page-level + panel headings → Fraunces display */
h1,
h2,
.dashboard-title,
.panel-header h3,
.overview-hero h2,
#overviewHeroTitle,
.settings-page-head h2,
.shortcuts-panel h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}

#dashboardTitle {
  font-size: 24px;
  font-weight: 600;
}

.panel-header h3,
.panel-header.compact h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

/* Section kickers — small uppercase, design-blue (#4d6387) */
.section-kicker,
.kicker {
  font-size: var(--font-size-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--info) !important;
  margin: 0 0 8px;
}

/* Numbers — JetBrains Mono for every large numeric display ("Dashboard
   Clean": UI text is Inter, values are mono). */
.kpi-card strong,
.overview-hero-metric-val,
.cost-val,
.metric-number,
.pipeline-stage-card-val {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Table cells, sparkline values, monospace inline numerics */
table,
.pagination-summary,
.kbd,
.spend-row-total,
[data-num],
.num,
code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

table { font-size: 12.5px; }

/* ──── Sidebar ──────────────────────────────────────────────────── */

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding-top: 18px;
}

.sidebar-brand {
  padding: 0 8px 18px;
  border-bottom: 1px solid var(--border);
  margin: 0 8px 14px;
}

/* Search field — refined with border + kbd shortcut */
.sidebar-search {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  margin: 0 8px 14px;
  transition: background 120ms ease, border-color 120ms ease;
}
.sidebar-search:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.sidebar-search input {
  font-size: 12.5px;
  color: var(--text);
}
.sidebar-search input::placeholder { color: var(--text-muted); }
.sidebar-search .kbd {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}

/* Group labels — uppercase tracking-wide */
.sidebar-group-label {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-subtle) !important;
  padding: 14px 10px 6px !important;
  margin: var(--space-0);
}

/* Tab buttons — left-rail editorial */
.tab-button {
  font-size: var(--font-size-base);
  padding: 7px 10px;
  border-radius: 8px;
  margin: 0 8px;
  transition: background 120ms ease, color 120ms ease;
  border-left: 2px solid transparent;
  margin-left: 6px;
  padding-left: 8px;
}
.tab-button:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.tab-button.active {
  background: var(--surface-muted);
  color: var(--text);
  font-weight: 500;
  border-left-color: var(--accent);
}
.tab-button.active .item-icon {
  color: var(--accent);
}
.tab-button .item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Sidebar footer — name + role + logout */
.sidebar-footer {
  margin: auto 8px 0;
  padding: 14px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.user-avatar {
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ──── Top bar ──────────────────────────────────────────────────── */

.app-topbar {
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.page-title #dashboardTitle {
  margin: 4px 0 0;
}
/* "Dashboard Clean": the page kicker is a small green uppercase label. */
.page-title::before {
  content: attr(data-kicker, "Live pipeline · 30 days");
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
}
.scope-summary {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-top: 4px;
  max-width: 640px;
  line-height: 1.55;
}

.user-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 500;
}

/* Sync badge — smaller pill, brand colors */
.sync-badge {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.sync-badge-live {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-bg);
}
.sync-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-bg);
}

/* ──── Filter bar — pill-based ──────────────────────────────────── */

.filter-bar,
#filterPanel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  margin-bottom: 18px;
}

.filters-grid label,
.filters-grid select,
.filters-grid .multiselect-button,
.filters-grid .date-range-button {
  font-size: var(--font-size-sm);
}

.filters-grid label {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.filters-grid label:hover,
.filters-grid label.active {
  border-color: var(--border-strong);
  background: var(--surface);
}
.filters-grid label > span:first-child {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.filters-grid select {
  border: none;
  background: transparent;
  font-weight: 500;
  color: var(--text);
  padding: var(--space-0);
  cursor: pointer;
}

/* Multi-select buttons match pill aesthetic */
.multiselect-button,
.date-range-button {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.multiselect-button:hover,
.date-range-button:hover,
.multiselect.active .multiselect-button,
.date-range-button.active {
  background: var(--surface);
  border-color: var(--border-strong);
}
.multiselect-prefix {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 6px;
}

/* ──── KPI cards — editorial format ─────────────────────────────── */

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 108px;
  position: relative;
  transition: border-color 120ms ease, transform 120ms ease;
}
.kpi-card:hover {
  border-color: var(--border-strong);
}
.kpi-card span:first-child,
.kpi-card > span {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-card strong {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-sub,
.kpi-card em {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: normal;
  margin-top: auto;
  font-family: var(--font-mono);
}

/* Coloured top-edge accent for KPI category differentiation */
.kpi-card.kpi-card-new::before,
.kpi-card.kpi-card-ic::before,
.kpi-card.kpi-card-qual::before,
.kpi-card.kpi-card-view::before,
.kpi-card.kpi-card-na::before,
.kpi-card.kpi-card-cpql::before,
.kpi-card.kpi-card-cpl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  opacity: 0.4;
}
.kpi-card.kpi-card-qual::before { background: var(--success); }
.kpi-card.kpi-card-view::before { background: var(--warning); }
.kpi-card.kpi-card-na::before   { background: var(--danger); }
.kpi-card.kpi-card-ic::before   { background: var(--info); }

/* ──── Overview hero — editorial display ─────────────────────────── */

.overview-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 32px;
}
.overview-hero-eyebrow {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
#overviewHeroTitle {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.overview-hero-copy {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  max-width: 540px;
  line-height: 1.55;
}
.overview-hero-loc {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.overview-hero-metrics .ohm {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.overview-hero-metrics .overview-hero-metric-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.overview-hero-metrics .overview-hero-metric-val.overview-hero-metric-accent { color: var(--accent); }
.overview-hero-metrics .overview-hero-metric-val.overview-hero-metric-good   { color: var(--success); }
.overview-hero-metrics .overview-hero-metric-val.overview-hero-metric-bad    { color: var(--danger); }
.overview-hero-metrics .overview-hero-metric-val.overview-hero-metric-gold   { color: var(--warning); }
.overview-hero-metrics .overview-hero-metric-lbl {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.overview-hero-metrics .overview-hero-metric-sub {
  font-size: var(--font-size-xs);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ──── Cost-efficiency row ───────────────────────────────────────── */

.cost-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
}
.cost-card .cost-lbl {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cost-card .cost-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cost-card .cost-sub,
.cost-card .cost-foot {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.cost-card.ce-best .cost-val { color: var(--success); }
.cost-card.ce-worst .cost-val { color: var(--danger); }

/* ──── Panels ────────────────────────────────────────────────────── */

.panel,
.inset-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: none;
}
.panel-header.compact {
  margin-bottom: 14px;
  align-items: baseline;
  border-bottom: none;
  padding-bottom: 0;
}
.panel-header h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Tighter inset panels (nested cards) */
.overview-pro-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: none;
}

/* ──── Tables — editorial ───────────────────────────────────────── */

.table-wrap table thead th {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px;
  text-align: left;
}

.table-wrap table tbody td {
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.table-wrap table tbody tr:hover td {
  background: var(--surface-muted);
}
.table-wrap table tbody tr.lead-row-link:hover td {
  background: var(--accent-soft);
  cursor: pointer;
}
.table-wrap table tbody td strong {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-sans);
}
.table-wrap table tbody td:first-child {
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

/* ──── Pipeline stage overview row ──────────────────────────────── */

.pipeline-stage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.pipeline-stage-card .pipeline-stage-card-lbl {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pipeline-stage-card .pipeline-stage-card-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
  margin-top: 4px;
}
.pipeline-stage-card .pipeline-stage-card-sub {
  font-size: var(--font-size-xs);
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.pipeline-stage-card.pipeline-stage-total { background: var(--accent); border-color: var(--accent); }
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-lbl,
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-val,
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-sub { color: #fff; opacity: 0.92; }

/* ──── Buttons ──────────────────────────────────────────────────── */

.primary-button {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
}
.ghost-button {
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
}
.ghost-button:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
  color: var(--text);
}

/* Pagination — softer */
.pagination-page {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.pagination-page.active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.pagination-nav {
  font-size: var(--font-size-xs);
  border-radius: 6px;
}

/* ──── Stage chips — editorial colour map ───────────────────────── */

.badge,
.stage-chip,
.meta-status-pill {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ──── Login screen — refined Savills hero ───────────────────────── */

.login-view {
  background: var(--surface);
}
.login-card {
  background: var(--surface);
}
.login-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#loginIntroHeading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.login-portal-notice,
#loginPortalNotice {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.field input {
  font-family: var(--font-sans);
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Login hero pane — editorial */
.login-hero-pane {
  background: var(--accent);
  color: var(--accent-on);
}
.hero-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}
.hero-card h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: 0;
}
.ring-number {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero-slide h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ──── Refresh chip + sync health ────────────────────────────────── */

.sync-summary {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0;
}
.sync-health-chip {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* ──── KPI grid spacing ──────────────────────────────────────────── */

.kpi-grid {
  gap: var(--space-3);
}

/* ──── Overview studio + analytics grid spacing ──────────────────── */

.overview-studio-row,
.overview-analytics-grid,
.overview-split,
.cost-efficiency-row,
.pipeline-overview-row {
  gap: 14px;
}

/* ──── Form inputs in admin/owner panels ─────────────────────────── */

.field input,
.field select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="month"],
select {
  font-family: var(--font-sans);
}

/* ──── Toast / drawer / overlays — minor V1 polish ──────────────── */

.toast {
  border-radius: var(--radius-card);
}
.toast .toast-title {
  font-family: var(--font-sans);
  font-weight: 600;
}

.drawer-header h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.drawer-section h4 {
  font-family: var(--font-sans);
}

.command-input {
  font-family: var(--font-sans);
}
.command-result-meta {
  font-family: var(--font-mono);
}

/* Settings page heading */
.settings-page-head h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ──── Empty / placeholder text ─────────────────────────────────── */

.empty-state,
.empty-table {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

/* ──── Funnel + summary lists ───────────────────────────────────── */

.funnel-row .funnel-label strong {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
}
.funnel-row .funnel-label span {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.funnel-fill {
  background: var(--accent);
  opacity: 0.85;
}

/* Clean row list: items live inside their parent card without their own
   card/pill background. Subtle dividers between rows; hover reveals soft
   highlight without changing layout. */
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}
.summary-list > .summary-item:last-child { border-bottom-color: transparent; }
.summary-item:hover {
  background: var(--surface-muted);
  border-color: transparent;
  box-shadow: none;
}
.summary-item strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
  font-size: var(--font-size-md);
}
.summary-item p {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0;
}
.summary-item span {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-weight: 500;
  background: transparent;
  padding: 0;
}
.summary-list {
  gap: 0;
}

/* Manual refresh button in the topbar. Subtle icon-only button that becomes
   slightly more prominent on hover. Spins while a refresh is in flight. */
.manual-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.manual-refresh-button:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
}
.manual-refresh-button svg {
  width: 14px;
  height: 14px;
}
.manual-refresh-button.is-refreshing svg {
  animation: refresh-spin 800ms linear infinite;
}
@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

/* Filter count in panel headers (e.g. "471 listings"). Light text, no pill
   chrome — sits inline with the section title without competing for attention. */
.filter-count {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 500;
  padding: 0;
  background: transparent;
  border: none;
  white-space: nowrap;
}

/* ──── App-content padding tightened to V1 ──────────────────────── */

.app-content {
  padding: 22px 32px 56px;
}

/* ──── Subtle reveal animation on hero ──────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .overview-hero,
  .kpi-card {
    animation: editorialFadeIn 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
}
@keyframes editorialFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──── End v3 Refined Savills refresh ──────────────────────────── */

/* ================================================================
   v3 fix-up — repair regressions from the editorial refresh
   1. KPI display numbers were 30px flat and overflowed compact rows
      (Campaigns/Listings/Transfers KPI rows had cards visually colliding).
   2. The bare `table` selector forced JetBrains Mono on every <td>,
      making agent names / source names / stage labels render as monospace.
   ================================================================ */

/* (1) Tables: keep tabular numerics for column alignment, but inherit
   the sans-serif body font so text columns read normally. */
table {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.table-wrap table tbody td {
  font-family: var(--font-sans);
}
/* Cells explicitly marked `.num` (or that hold codes/IDs) stay mono. */
.table-wrap table tbody td.num,
.table-wrap table tbody td .num,
.spend-row-total,
[data-num],
.num,
.kbd,
code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* (2) KPI cards: responsive display number + overflow handling.
   Overview hero (`.kpi-grid`, `.ohm`, `.cost-card`) keeps its larger
   editorial size; the compact 4-up rows on Campaigns/Listings/Transfers
   shrink so the number fits its card. */
.kpi-card {
  min-height: auto;
  overflow: hidden;
}
.kpi-card strong {
  font-size: clamp(18px, 2vw, 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  display: block;
}

/* Overview KPI grid (the main hero KPI block) is wide enough for the
   bigger size — keep the editorial impact there. */
#kpiGrid.kpi-grid > .kpi-card strong {
  font-size: clamp(20px, 2.2vw, 28px);
}

/* Compact KPI rows: campaigns / listings / transfers / generic 4-ups
   shrink the number so AED-prefixed values like "AED 642,847" don't
   overflow. */
.campaigns-kpi-row .kpi-card strong,
.listings-kpi-grid .kpi-card strong,
#transfersKpiRow .kpi-card strong,
.comparison-kpi-card strong {
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: -0.01em;
}

/* The "kpi-sub" subtitle line stays at the bottom of the card */
.kpi-card .kpi-sub,
.kpi-card em {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Overview hero metric numbers — clamp so they don't overflow tight
   columns on narrower viewports. */
.overview-hero-metrics .overview-hero-metric-val {
  font-size: clamp(20px, 2.2vw, 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cost-efficiency cards stay readable but don't break out */
.cost-card .cost-val {
  font-size: clamp(20px, 1.9vw, 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pipeline-stage row cards same treatment */
.pipeline-stage-card .pipeline-stage-card-val {
  font-size: clamp(18px, 1.8vw, 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ──── End v3 fix-up ─────────────────────────────────────────── */


/* ================================================================
   v4 contrast + palette fix
   ----------------------------------------------------------------
   Three earlier prototype themes were left layered in this file:
     - "Neutral redesign"      (line ~4680) → made --savills-red brown
     - "Prototype blue SaaS"   (line ~5547) → made --accent navy,
                                              sidebar dark blue with
                                              white text, KPI strips
                                              navy, login hero navy
     - "V1 Refined Savills"    (line ~7637) → reset sidebar bg back
                                              to white but did NOT
                                              reset text colour, so
                                              the white text now
                                              renders on white bg.
   This block runs last and:
     1. Restores the Savills red brand and neutral text scale.
     2. Remaps the orphan --brand-blue token to red so the 40+
        rules that reference it become brand-correct without edits.
     3. Forces sidebar + tab-button text dark on the white sidebar.
     4. Forces login-hero pane text white on red (no dark-grey
        chips on the brand background).
     5. Rebuilds Campaigns tab KPI row layout so 4 cards fit
        without numbers overlapping.
   ================================================================ */

body {
  background: var(--canvas);
  color: var(--text);
}

/* ──── Sidebar text contrast (was white-on-white) ─────────────── */

.sidebar {
  background: var(--surface);
  color: var(--text);
  border-right: 1px solid var(--border);
}
.sidebar-brand::after {
  color: var(--text);
}
/* Default — calm muted text + lighter icon */
.tab-button,
.sidebar-item {
  color: var(--text-secondary);
  border-left-color: transparent !important;
}
.tab-button .item-icon,
.sidebar-item .item-icon {
  color: var(--text-subtle);
  transition: color 140ms ease;
}

/* Hover — bg lifts, icon goes from light gray → dark */
.tab-button:hover,
.sidebar-item:hover {
  background: #eeeeec;
  color: var(--text);
}
.tab-button:hover .item-icon,
.sidebar-item:hover .item-icon {
  color: var(--text);
}

/* Active — solid charcoal pill with white icon + label */
.tab-button.active,
.sidebar-item.active {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  font-weight: 600;
  border-left-color: transparent !important;
}
.tab-button.active:hover,
.sidebar-item.active:hover {
  background: var(--accent-hover) !important;
  color: var(--accent-on) !important;
}
.tab-button.active .item-icon,
.sidebar-item.active .item-icon,
.tab-button.active:hover .item-icon,
.sidebar-item.active:hover .item-icon {
  color: var(--accent-on) !important;
}

/* Kill the leftover ::before vertical accent strips so the
   active fill is the only highlight. */
.tab-button::before,
.sidebar-item::before {
  display: none !important;
}

.sidebar-search input {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
}
.sidebar-search input::placeholder {
  color: var(--text-muted);
}
.sidebar-search .search-icon,
.sidebar-search .kbd {
  color: var(--text-muted);
}
.sidebar-search .kbd {
  background: var(--surface);
  border: 1px solid var(--border);
}
.sidebar-group-label {
  color: var(--text-subtle) !important;
}

.sidebar-footer {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.sidebar-footer .user-meta strong {
  color: var(--text);
}
.sidebar-footer .user-meta span {
  color: var(--text-muted);
}
.sidebar-footer .user-avatar {
  background: linear-gradient(135deg, #2b2b2b, #0f0f0f);
  color: var(--accent-on);
}
#logoutButton.ghost-button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
#logoutButton.ghost-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ──── Login hero pane (red bg + readable white text) ─────────── */

.login-hero-pane {
  background:
    linear-gradient(160deg, #2b2b2b 0%, #0f0f0f 100%);
  color: var(--accent-on);
}
.login-hero-pane h3,
.login-hero-pane h4,
.login-hero-pane p,
.login-hero-pane span,
.login-hero-pane strong,
.login-hero-pane .hero-slide h3,
.login-hero-pane .hero-slide p,
.login-hero-pane .hero-card h4,
.login-hero-pane .hero-card-main header,
.login-hero-pane .hero-card-main footer,
.login-hero-pane .ring-number {
  color: var(--accent-on);
}
.login-hero-pane .hero-slide p,
.login-hero-pane .hero-card-main footer {
  color: rgba(255, 255, 255, 0.84);
}
.login-hero-pane .hero-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}
.login-hero-pane .hero-card-trend {
  background: rgba(255, 255, 255, 0.20);
  color: var(--accent-on);
}

/* ──── KPI cards: charcoal accent strip + dark numbers ────────── */

.kpi-card::before {
  background: var(--accent) !important;
  opacity: 0.85;
  height: 2px;
}
.kpi-card.kpi-card-qual::before { background: var(--success) !important; opacity: 0.85; }
.kpi-card.kpi-card-view::before { background: var(--warning) !important; opacity: 0.85; }
.kpi-card.kpi-card-na::before   { background: var(--danger)  !important; opacity: 0.85; }
.kpi-card.kpi-card-ic::before   { background: var(--info)    !important; opacity: 0.85; }

.kpi-card strong {
  color: var(--text);
}

/* ──── Campaigns tab KPI row — fits 4 cards cleanly ───────────── */

.campaigns-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: 12px;
}
@media (max-width: 1180px) {
  .campaigns-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .campaigns-kpi-row {
    grid-template-columns: 1fr;
  }
}
.campaigns-kpi-row .kpi-card {
  padding: 14px 16px;
  min-height: 100px;
  gap: 6px;
}
.campaigns-kpi-row .kpi-card > span:first-child {
  font-size: var(--font-size-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campaigns-kpi-row .kpi-card strong {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}
.campaigns-kpi-row .kpi-card .kpi-sub,
.campaigns-kpi-row .kpi-card em {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-style: normal;
}

/* ──── Pipeline pipeline-stage-total card (red bg + white text) ──────────── */

.pipeline-stage-card.pipeline-stage-total {
  background: var(--accent);
  border-color: var(--accent);
}
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-lbl,
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-val,
.pipeline-stage-card.pipeline-stage-total .pipeline-stage-card-sub {
  color: var(--accent-on);
}

/* ──── Pagination + agent pills + status bar (red on white) ─── */

.pagination-page.active,
.pagination-nav:hover,
.all-leads-pill.active,
.agent-sort-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.agent-avatar {
  background: linear-gradient(135deg, #2b2b2b, #0f0f0f);
  color: var(--accent-on);
}
.campaigns-status-bar {
  background: linear-gradient(135deg, #2b2b2b, #0f0f0f);
  border: 0;
  color: var(--accent-on);
}
.campaigns-status-bar *,
.campaigns-status-bar h2,
.campaigns-status-bar h3 {
  color: var(--accent-on);
}
.campaigns-status-kicker,
.campaigns-status-period {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ──── Settings tab active (was navy, now red) ───────────────── */

.settings-tab.active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

/* ──── End v4 contrast + palette fix ─────────────────────────── */


/* ================================================================
   v5 overview tightening + modern panel polish
   ----------------------------------------------------------------
   - Pulls vertical rhythm tighter (less wasted whitespace).
   - Hero is more compact, KPI rows denser, section kickers
     smaller, cost-efficiency + pipeline rows tighter.
   - Panels get a subtle gradient + cleaner borders.
   - Charts get tighter wrappers with crisper backdrop.
   ================================================================ */

/* Tighter outer canvas */
.app-content {
  padding: 16px 24px 40px;
  gap: var(--space-3);
}
.app-topbar {
  padding: 14px 24px 12px;
}
.page-title #dashboardTitle,
.app-topbar h1 {
  font-size: 24px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.scope-summary {
  font-size: var(--font-size-sm);
  margin-top: 2px;
}

/* Filter bar — denser */
.filter-bar,
#filterPanel {
  padding: 8px 10px;
  margin-bottom: 12px;
}
.filters-grid label,
.filters-grid select,
.filters-grid .multiselect-button,
.filters-grid .date-range-button {
  font-size: 11.5px;
}

/* Section kickers — smaller, tighter */
.section-kicker,
.kicker,
.overview-section-kicker {
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 4px !important;
}

/* Grid rows — tighter gaps */
.view-panel:not(#overviewView).active,
.kpi-grid,
.campaigns-kpi-row,
.listings-kpi-grid,
.overview-studio-row,
.overview-analytics-grid,
.overview-split,
.cost-efficiency-row,
.pipeline-overview-row,
.campaign-grid,
.comparison-layout {
  gap: 10px !important;
}

/* Removed conflicting display: flex; gap: 10px override. The canonical grid
   layout is defined at line ~5975 (12-column grid, 20px gap). */

/* Hero — more compact */
.overview-hero {
  padding: 18px 22px;
  gap: 18px;
}
#overviewHeroTitle {
  font-size: var(--font-size-4xl) !important;
  letter-spacing: -0.02em;
  margin: 0 0 4px !important;
}
.overview-hero-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  margin: 0 0 6px;
}
.overview-hero-copy {
  font-size: 12.5px;
  max-width: 460px;
  line-height: 1.45;
}
.overview-hero-loc {
  font-size: var(--font-size-2xs);
  margin-top: 8px;
}
.overview-hero-metrics .overview-hero-metric-val {
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1;
}
.overview-hero-metrics .ohm {
  padding-top: 8px;
}
.overview-hero-metrics .overview-hero-metric-lbl {
  font-size: 9.5px;
  margin-top: 4px;
}
.overview-hero-metrics .overview-hero-metric-sub {
  font-size: var(--font-size-2xs);
  margin-top: 1px;
}
.overview-panel-headline span {
  font-size: 9.5px;
  letter-spacing: 0.12em;
}
.overview-panel-headline strong {
  font-size: var(--font-size-base);
}

/* KPI cards — denser */
.kpi-card {
  padding: 12px 14px !important;
  min-height: 86px !important;
  gap: var(--space-1);
}
.kpi-card span:first-child,
.kpi-card > span {
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.kpi-card strong {
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.1;
}
.kpi-card .kpi-sub,
.kpi-card em {
  font-size: var(--font-size-2xs);
  margin-top: auto;
}

/* Cost-efficiency cards */
.cost-card {
  padding: 14px 16px;
  border-radius: 10px;
}
.cost-card .cost-lbl {
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.cost-card .cost-val {
  font-size: clamp(20px, 1.9vw, 26px);
  margin-top: 4px;
}
.cost-card .cost-sub,
.cost-card .cost-foot {
  font-size: 10.5px;
}

/* Pipeline-stage cards — tight pill row */
.pipeline-stage-card {
  padding: 10px 12px;
  border-radius: 10px;
}
.pipeline-stage-card .pipeline-stage-card-lbl {
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.pipeline-stage-card .pipeline-stage-card-val {
  font-size: clamp(18px, 1.5vw, 22px);
  margin-top: 2px;
}
.pipeline-stage-card .pipeline-stage-card-sub {
  font-size: var(--font-size-2xs);
}

/* Panels — modern soft gradient + cleaner borders.
   .campaigns-status-bar is excluded: it keeps its own dark gradient, and this
   !important white background was painting white-on-white (invisible bar). */
.panel:not(.campaigns-status-bar),
.inset-panel:not(.campaigns-status-bar),
.overview-pro-panel {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 8px 24px -16px rgba(15, 17, 21, 0.12) !important;
}
.panel-header.compact {
  margin-bottom: 8px !important;
}
.panel-header h3 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  font-family: var(--font-sans) !important;
}

/* Chart wraps — modern, slightly smaller */
.chart-wrap {
  position: relative;
}
.chart-h-220 { height: 200px !important; }
.chart-h-240 { height: 220px !important; }
.chart-h-280 { height: 250px !important; }
.chart-h-300 { height: 270px !important; }
.chart-h-320 { height: 290px !important; }

/* Hero chart shorter */
.overview-hero-chart .chart-wrap {
  height: 160px !important;
}

/* Radial gauge — tighter */
.overview-radial-wrap {
  padding: 8px 0;
}

/* Pulse list items denser */
.overview-pulse-list {
  gap: var(--space-2);
}
.overview-pulse-list > * {
  padding: 8px 10px;
}

/* Property leaderboard items denser */
.overview-leader-list {
  gap: 6px;
}
.overview-leader-list > * {
  padding: 8px 10px;
}

/* DOW heat strip cells smaller */
#overviewDowHeat .dow-cell strong,
.overview-dow-heat .dow-cell strong {
  font-size: clamp(18px, 1.6vw, 22px);
}

/* Buttons + ghost — tighter */
.primary-button,
.ghost-button {
  height: 32px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
}
.user-badge {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
}
.sync-badge {
  font-size: 10.5px;
  padding: 2px 8px;
}

/* Tables — tighter row height */
.table-wrap table tbody td {
  padding: 8px 12px !important;
  font-size: var(--font-size-sm) !important;
}
.table-wrap table thead th {
  padding: 8px 12px !important;
  font-size: 9.5px !important;
}

/* Sidebar denser */
.sidebar {
  padding: 14px 10px !important;
  gap: 12px !important;
}
.sidebar-brand {
  padding-bottom: 12px !important;
  margin-bottom: 4px !important;
}
.tab-button {
  height: 32px !important;
  font-size: 12.5px !important;
  padding: 0 10px !important;
}
.sidebar-group-label {
  padding: 8px 10px 4px !important;
  font-size: 9px !important;
}

/* ──── End v5 overview tightening ────────────────────────────── */


/* ================================================================
   v6 overview hero + card-stretch fix
   ----------------------------------------------------------------
   Three issues from screenshot:
     1. Hero used dark charcoal bg from a prototype layer, but the
        eyebrow uses var(--accent) (also charcoal) → invisible text.
        Copy/loc used --text-secondary/--text-muted (dark grays) on
        the dark bg → unreadable.
     2. Studio + Analytics grids force equal-height rows. When one
        sibling (e.g. Today's Pulse list) is tall, the other cards
        (Target Attainment, Source Quality, Cadence) stretched with
        empty space below their content.
     3. Cadence day cells used a gray gradient that drowned the
        numbers.
   This block re-skins the hero to a light surface, sets the grid
   rows to `align-items: start` so cards size to content, and
   refreshes the cadence cells.
   ================================================================ */

/* Hero — light surface, readable text */
#overviewView .overview-hero,
.overview-hero {
  background:
    linear-gradient(180deg, #ffffff 0%, #f9f8f5 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-subtle) !important;
}
#overviewView .overview-hero::after {
  background: rgba(15, 17, 21, 0.025) !important;
}
.overview-hero-eyebrow,
#overviewView .overview-hero-head::before {
  color: var(--text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.14em;
}
#overviewView .overview-hero-head h2,
#overviewHeroTitle {
  color: var(--text) !important;
}
.overview-hero-copy {
  color: var(--text-secondary) !important;
}
.overview-hero-loc,
#overviewView .overview-hero-loc {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
#overviewView .overview-hero-metrics {
  background: var(--border-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
}
#overviewView .overview-hero-metrics .ohm {
  background: #ffffff;
  border-top: 0;
}
.overview-hero-metrics .overview-hero-metric-val,
#overviewView .overview-hero-metrics .overview-hero-metric-val {
  color: var(--text) !important;
}
.overview-hero-metrics .overview-hero-metric-lbl {
  color: var(--text-muted) !important;
}
.overview-hero-metrics .overview-hero-metric-sub {
  color: var(--text-subtle) !important;
}
.overview-panel-headline span {
  color: var(--text-muted) !important;
}
.overview-panel-headline strong {
  color: var(--text) !important;
}

/* Cards size to content — kill stretched empty space below */
.overview-studio-row,
.overview-analytics-grid,
.overview-split,
.cost-efficiency-row,
.pipeline-overview-row,
.campaign-grid,
.comparison-layout {
  align-items: start !important;
}
.overview-pro-panel,
.panel.inset-panel {
  align-self: start !important;
}

/* Cadence heat strip cells — lighter tint, clearer numbers */
#overviewDowHeat,
.overview-dow-heat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.overview-dow-heat .dow-cell,
#overviewDowHeat .dow-cell {
  background: linear-gradient(180deg, #f7f7f6 0%, #efeeec 100%) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px;
  padding: 10px 10px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
}
.overview-dow-heat .dow-cell .dow-name,
#overviewDowHeat .dow-cell .dow-name {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.overview-dow-heat .dow-cell strong,
#overviewDowHeat .dow-cell strong {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.overview-dow-heat .dow-cell .dow-pct,
#overviewDowHeat .dow-cell .dow-pct {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
/* Heat-intensity overlay (when JS sets a --heat var) */
.overview-dow-heat .dow-cell {
  position: relative;
  overflow: hidden;
}
.overview-dow-heat .dow-cell::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, #1a1a1a, #4a4a4a);
  opacity: var(--heat, 0.4);
}

/* Target attainment + Quality + Cadence panels — collapse to
   their natural content height */
.overview-pro-panel.overview-goal-panel,
.overview-pro-panel.overview-pulse-panel,
.overview-pro-panel.overview-source-quality {
  height: auto !important;
}

/* ──── End v6 overview hero + card-stretch fix ───────────────── */


/* ================================================================
   v7 cadence + analytics row polish
   ----------------------------------------------------------------
   - The actual heat-strip cell class is `.overview-heat-cell`
     (not `.dow-cell`); v6 targeted the wrong selector so the
     gray min-height:168px style still rendered. Re-skin properly.
   - Force the analytics row to two equal columns instead of
     12-col span 5/7, which avoids the off-balance look.
   - Make Cadence + Market Focus visually balanced by stretching
     cadence cells to fill the card height.
   - Stage Movement + Top Score Momentum cards: aligned heights.
   - Hero embedded chart container: matched height to right column.
   ================================================================ */

/* Heat-strip cells — heat tint visible, charcoal numbers, intensity bar at bottom */
.overview-heat-cell {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  min-height: 0 !important;
  height: 100%;
  padding: 12px 12px 14px !important;
  border-radius: 10px;
  /* Heat tint layered under a soft white wash so light cells stay airy
     while busy cells show clear intensity. --heat-alpha is set inline by JS. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 100%),
    rgba(26, 26, 26, var(--heat-alpha, 0.08)) !important;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  animation: overview-heat-in 360ms cubic-bezier(.22,.61,.36,1) both;
}
.overview-heat-cell::after {
  content: "";
  position: absolute;
  inset: auto 10px 8px 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--heat, 0.4));
  opacity: 0.9;
}
.overview-heat-cell span {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
.overview-heat-cell strong {
  font-size: clamp(20px, 1.7vw, 26px) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1;
  letter-spacing: -0.01em;
}
.overview-heat-cell em {
  color: var(--text-muted) !important;
  font-style: normal !important;
  font-size: var(--font-size-2xs) !important;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* Cadence container fills the card vertically */
#overviewDowHeat,
.overview-dow-heat {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  flex: 1;
  min-height: 168px;
}
.overview-pro-panel:has(.overview-dow-heat),
.overview-pro-panel.overview-pulse-panel,
.overview-pro-panel:has(.overview-leader-list) {
  display: flex;
  flex-direction: column;
}

/* Analytics grid — switch to 2 equal columns so Cadence and
   Market Focus have matched widths and heights */
.overview-analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
.overview-span-7,
.overview-span-5 {
  grid-column: auto !important;
}
.overview-analytics-grid .overview-pro-panel {
  align-self: stretch !important;
}

/* Studio row — make panels stretch so donut + pulse + quality
   share the same height */
.overview-studio-row {
  align-items: stretch !important;
}
.overview-studio-row .overview-pro-panel {
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
}
.overview-pulse-list {
  flex: 1;
}

/* Property leaderboard rows — refresh */
.overview-leader-list {
  gap: 6px;
  flex: 1;
}
.overview-leader-row {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-subtle) !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
}
.overview-leader-row::before {
  background: linear-gradient(90deg, rgba(15, 17, 21, 0.06), rgba(15, 17, 21, 0.01)) !important;
}
.overview-leader-rank {
  background: var(--accent);
  color: var(--accent-on);
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.overview-leader-row strong {
  font-size: 12.5px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}
.overview-leader-row span:not(.overview-leader-rank) {
  font-size: 10.5px !important;
  color: var(--text-muted) !important;
}
.overview-leader-row em {
  font-size: var(--font-size-xs) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* Hero embedded chart wrap — slightly taller for clearer line */
.overview-hero-chart {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-hero-chart .chart-wrap {
  height: 180px !important;
}

/* Velocity chart label cleaner */
.overview-panel-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.overview-panel-headline span {
  font-size: 9.5px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.overview-panel-headline strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* "Watch" / mini badge polish */
.overview-mini-badge {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-2xs) !important;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ──── End v7 cadence + analytics polish ─────────────────────── */


/* ================================================================
   v8 listings filter bar + table polish
   ================================================================ */

.listings-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin: 12px 0 12px;
}

.listings-filter-bar .lfb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 220px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 32px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.listings-filter-bar .lfb-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.listings-filter-bar .lfb-search svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.listings-filter-bar .lfb-search input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  font-size: 12.5px;
  color: var(--text);
  font-family: var(--font-sans);
  min-width: 0;
}
.listings-filter-bar .lfb-search input::placeholder {
  color: var(--text-muted);
}

.listings-filter-bar .lfb-select {
  height: 32px;
  padding: 0 26px 0 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 140ms ease;
  min-width: 120px;
  max-width: 180px;
}
.listings-filter-bar .lfb-select:hover {
  border-color: var(--border-strong);
}
.listings-filter-bar .lfb-select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.listings-filter-bar .lfb-price {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.listings-filter-bar .lfb-price input {
  height: 32px;
  width: 96px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.listings-filter-bar .lfb-price input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.listings-filter-bar .lfb-price span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.listings-filter-bar .ghost-button {
  height: 32px;
  padding: 0 14px;
  font-size: var(--font-size-sm);
  border-radius: 8px;
}

#listingsView .table-wrap table tbody td .cell-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Listing status pills — semantic colors */
.listing-status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Portal verification badges (Verified = Property Finder, TruCheck = Bayut) */
.listing-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.listing-badge-yes { background: var(--success-bg); color: var(--success); }
.listing-badge-no { background: var(--surface-muted); color: var(--text-soft, #8a8d96); }
.listing-badge-awaiting {
  background: var(--surface-muted);
  color: var(--text-soft, #8a8d96);
  font-weight: 500;
  font-style: italic;
}
.listing-status-available {
  background: var(--success-bg);
  color: var(--success);
}
.listing-status-reserved,
.listing-status-on-hold,
.listing-status-pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.listing-status-sold,
.listing-status-leased,
.listing-status-rented {
  background: var(--info-bg);
  color: var(--info);
}
.listing-status-blocked,
.listing-status-cancelled,
.listing-status-withdrawn {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Listings inventory table — denser, monospace numbers */
#listingsView .table-wrap table {
  width: 100%;
  font-size: var(--font-size-sm);
}
#listingsView .table-wrap table thead th {
  white-space: nowrap;
  background: var(--surface-muted);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 1;
}
#listingsView .table-wrap table tbody td {
  vertical-align: top;
  padding: 9px 12px !important;
}
#listingsView .table-wrap table tbody td:nth-child(1),
#listingsView .table-wrap table tbody td:nth-child(2),
#listingsView .table-wrap table tbody td:nth-child(3),
#listingsView .table-wrap table tbody td:nth-child(7),
#listingsView .table-wrap table tbody td:nth-child(8),
#listingsView .table-wrap table tbody td:nth-child(11) {
  font-variant-numeric: tabular-nums;
}
#listingsView .table-wrap table tbody td:nth-child(2) strong {
  color: var(--text);
  font-weight: 600;
}
#listingsView .table-wrap {
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

/* ──── End v8 listings filters ───────────────────────────────── */


/* ================================================================
   v9 overview layout reset — fixes "cards behind"
   ----------------------------------------------------------------
   8 stacked theme passes left conflicting align-items / animation-
   translateY / grid-template rules. On some viewports cards end up
   overlapping each other. This block:
     - Forces every overview row to a normal flow with start-aligned,
       content-sized cards
     - Resets any residual `transform: translateY(...)` from animations
     - Adds `min-width: 0` everywhere a grid/flex child sits, so wide
       content can't push siblings out of place
     - Ensures z-index is `auto` on every overview surface
     - Adds responsive breakpoints so cards collapse cleanly instead
       of overlapping at narrow widths
   ================================================================ */

#overviewView.active {
  /* The earlier `display: flex !important` with a 12px gap fought the canonical
     12-column grid + 20px gap defined at line ~5975. Removed — the grid rule
     wins via ID specificity now. */
  position: relative;
  z-index: auto;
}

#overviewView.active > * {
  min-width: 0;
  z-index: auto;
  position: relative;
}

/* Reset any stuck transform — animations were running translateY on load,
   on certain timing the value never clears */
#overviewView .overview-pro-panel,
#overviewView .panel,
#overviewView .inset-panel,
#overviewView .kpi-card,
#overviewView .cost-card,
#overviewView .pipeline-stage-card,
#overviewView .overview-heat-cell,
#overviewView .overview-leader-row {
  transform: none !important;
  animation: none !important;
  z-index: auto;
}

/* Hero — strict 3-col grid with overflow tolerance */
#overviewView .overview-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
  gap: 18px !important;
  align-items: stretch;
  overflow: hidden;
}
#overviewView .overview-hero > * {
  min-width: 0;
}

/* Studio row — 3 cards, content-sized, no overflow */
.overview-studio-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.overview-studio-row > * {
  min-width: 0;
  align-self: stretch !important;
}

/* Analytics grid — 2x2, content-sized */
.overview-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.overview-analytics-grid > * {
  min-width: 0;
  grid-column: auto !important;
  align-self: stretch !important;
}

/* KPI / cost / pipeline rows */
#overviewView #kpiGrid.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
.cost-efficiency-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.pipeline-overview-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
}
#overviewView .overview-split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
#overviewView .overview-split > * {
  min-width: 0;
  align-self: stretch !important;
}

/* Defensive: kill any pseudo-overlay that could draw OVER siblings */
#overviewView .overview-pro-panel::before {
  pointer-events: none;
  z-index: 0;
}
#overviewView .overview-pro-panel > * {
  position: relative;
  z-index: 1;
}

/* Responsive collapse — cards stack cleanly instead of overlapping */
@media (max-width: 1280px) {
  #overviewView .overview-hero {
    grid-template-columns: 1fr 1fr !important;
  }
  #overviewView .overview-hero-chart {
    grid-column: 1 / -1;
    order: 3;
  }
  .overview-studio-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .overview-studio-row > :nth-child(3) {
    grid-column: 1 / -1;
  }
  .cost-efficiency-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 880px) {
  #overviewView .overview-hero,
  .overview-studio-row,
  .overview-analytics-grid,
  .cost-efficiency-row,
  #overviewView .overview-split {
    grid-template-columns: 1fr !important;
  }
  #overviewView .overview-hero-chart {
    order: initial;
  }
}

/* ──── End v9 overview layout reset ──────────────────────────── */


/* ================================================================
   v10 remove KPI top accent strips
   ----------------------------------------------------------------
   The colored stripes on top of each KPI card (kpi-card-new=charcoal,
   kpi-card-qual=green, kpi-card-view=gold, kpi-card-na=red, kpi-card-ic=blue, kpi-card-cpl=accent)
   lined up across the page to look like a multi-color band below
   the hero. User asked to remove it.
   ================================================================ */

.kpi-card::before,
.kpi-card.kpi-card-new::before,
.kpi-card.kpi-card-ic::before,
.kpi-card.kpi-card-qual::before,
.kpi-card.kpi-card-view::before,
.kpi-card.kpi-card-na::before,
.kpi-card.kpi-card-cpql::before,
.kpi-card.kpi-card-cpl::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* ──── End v10 ───────────────────────────────────────────────── */

/* ============================================================================
   Agent Performance module
   ========================================================================== */
.ap-ai-status { display: flex; align-items: center; }
.ap-source-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
}
.ap-pill-ok { background: rgba(66, 119, 90, 0.1); color: var(--success); border-color: rgba(66, 119, 90, 0.25); }
.ap-pill-warn { background: rgba(115, 90, 44, 0.1); color: var(--warning); border-color: rgba(115, 90, 44, 0.25); }
.ap-pill-low { background: rgba(153, 83, 79, 0.1); color: var(--danger); border-color: rgba(153, 83, 79, 0.25); }
.ap-pill-muted { background: var(--surface-muted); color: var(--text-soft, #6b6e76); }

/* SuperAgent badge (scorecard focus pillar) */
.ap-sa-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ap-sa-yes { background: rgba(176, 137, 44, 0.16); color: #8a6f3d; border: 1px solid rgba(176, 137, 44, 0.35); }
.ap-sa-no { background: var(--surface-muted); color: var(--text-soft, #8a8d96); }

/* Overview: Portal performance strip (Property Finder · Bayut) */
.ov-portal-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ov-portal-card {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-nested); background: var(--surface);
}
.ov-portal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft, #6b6e76); }
.ov-portal-val { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ov-portal-sub { font-size: 11px; color: var(--text-soft, #8a8d96); }
.ov-portal-awaiting { border-left-color: var(--border); }
.ov-portal-awaiting .ov-portal-val { font-size: 14px; font-style: italic; font-weight: 600; color: var(--text-soft, #8a8d96); }

.ap-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 4px; }
.ap-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ap-filter span { color: var(--text-soft, #6b6e76); font-weight: 600; }
.ap-filter select, .ap-filter input {
  padding: 6px 8px; border: 1px solid var(--border-interactive);
  border-radius: var(--radius-nested); background: var(--surface); font-size: 13px; min-width: 130px;
}

.ap-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 14px;
}
.ap-kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-nested); background: var(--surface-muted);
}
.ap-kpi-label { font-size: 12px; color: var(--text-soft, #6b6e76); font-weight: 600; }
.ap-kpi-value { font-size: 22px; font-weight: 700; color: var(--accent); }

.ap-table-scroll { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-table th, .ap-table td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.ap-table thead th {
  position: sticky; top: 0; background: var(--surface);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft, #6b6e76);
}
.ap-row { cursor: pointer; }
.ap-row:hover { background: var(--surface-hover); }
.ap-agent-name { font-weight: 600; color: var(--accent); }

.ap-awaiting { color: var(--text-soft, #9a9da4); font-style: italic; font-size: 12px; }
.ap-yes { color: var(--success); font-weight: 600; }
.ap-no { color: var(--danger); }

.ap-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 13px;
}
.ap-score-ok { background: rgba(66, 119, 90, 0.12); color: var(--success); }
.ap-score-warn { background: rgba(115, 90, 44, 0.12); color: var(--warning); }
.ap-score-low { background: rgba(153, 83, 79, 0.12); color: var(--danger); }
.ap-partial { opacity: 0.7; }

.ap-ai-btn {
  padding: 5px 12px; border: 1px solid var(--border-interactive);
  border-radius: var(--radius-pill); background: var(--surface);
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--accent);
}
.ap-ai-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.ap-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.drawer-wide { width: min(640px, 96vw); }
.ap-drawer-score { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ap-drawer-score .ap-score { font-size: 16px; min-width: 48px; padding: 4px 12px; }
.ap-action-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ap-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ap-ai-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ap-ai-toprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ap-ai-card {
  border: 1px solid var(--border); border-radius: var(--radius-nested);
  background: var(--surface-muted); padding: 12px 14px;
}
.ap-ai-card h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft, #6b6e76); }
.ap-ai-card p { margin: 0; font-size: 13px; line-height: 1.5; }
.ap-ai-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ap-ai-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-ai-next { border-color: var(--accent); background: var(--accent-soft); }

.ap-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 4px 2px; }
.ap-pager-info { font-size: 12px; color: var(--text-soft, #6b6e76); }
.ap-pager-btn {
  padding: 4px 12px; border: 1px solid var(--border-interactive);
  border-radius: var(--radius-pill); background: var(--surface);
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--accent);
}
.ap-pager-btn:hover:not(:disabled) { background: var(--surface-hover); }
.ap-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* SuperAgent 2.0 breakdown + eligibility (agent drawer) */
.ap-sa-h {
  margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-soft, #6b6e76); display: flex; justify-content: space-between; align-items: baseline;
}
.ap-sa-total { font-size: 14px; font-weight: 700; color: var(--accent); text-transform: none; letter-spacing: 0; }
.ap-elig-list, .ap-breakdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-elig, .ap-breakdown-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-nested);
  background: var(--surface-muted); font-size: 13px;
}
.ap-elig.ok { border-color: rgba(66, 119, 90, 0.35); }
.ap-elig.no { border-color: rgba(153, 83, 79, 0.35); }
.ap-elig.ok > span:first-child { color: var(--success); font-weight: 600; }
.ap-elig.no > span:first-child { color: var(--danger); font-weight: 600; }
.ap-elig-detail { color: var(--text-soft, #6b6e76); font-size: 12px; }
.ap-breakdown-list em { color: var(--text-soft, #6b6e76); font-style: normal; font-size: 12px; }
.ap-pts { font-weight: 700; color: var(--accent); white-space: nowrap; }
.ap-sa-missing { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--warning); }
.ap-sa-ok { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--success); }

/* Agent Performance charts */
.ap-charts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 12px;
}
.ap-chart-card {
  border: 1px solid var(--border); border-radius: var(--radius-nested);
  background: var(--surface-muted); padding: 14px 16px;
}
.ap-chart-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--accent); }
.ap-chart-wrap { position: relative; height: 264px; }

/* ---- Benchmark view: RAG KPI tiles (PF / Bayut split) + trends ------------ */
.ap-bm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; margin-top: 14px;
}
.ap-bm-group { display: flex; flex-direction: column; gap: 10px; }
.ap-bm-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-bm-group-title { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.01em; }
.ap-bm-group-meta { font-size: 11px; color: var(--text-soft, #6b6e76); }
.ap-bm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-bm-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 13px; border: 1px solid var(--border);
  border-left-width: 4px; border-radius: var(--radius-nested); background: var(--surface);
  min-height: 96px;
}
.ap-bm-card-top { display: flex; align-items: center; justify-content: space-between; }
.ap-bm-portal {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft, #6b6e76);
}
.ap-bm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-interactive); }
.ap-bm-label { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--text-soft, #6b6e76); }
.ap-bm-value { margin: 0; font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1.15; }
.ap-bm-sub { margin: 0; font-size: 11px; color: var(--text-soft, #6b6e76); }
.ap-bm-awaiting .ap-bm-value { font-size: 14px; color: var(--text-soft, #8a8d96); font-weight: 600; }

/* RAG colour coding — left border + dot */
.ap-bm-rag-green { border-left-color: var(--success, #42775a); }
.ap-bm-rag-green .ap-bm-dot { background: var(--success, #42775a); }
.ap-bm-rag-amber { border-left-color: var(--warning, #8a6f3d); }
.ap-bm-rag-amber .ap-bm-dot { background: var(--warning, #8a6f3d); }
.ap-bm-rag-red { border-left-color: var(--danger, #99534f); }
.ap-bm-rag-red .ap-bm-dot { background: var(--danger, #99534f); }
.ap-bm-rag-na { border-left-color: var(--border); }
.ap-bm-rag-na .ap-bm-dot { background: var(--border-interactive); }

.ap-bm-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-bm-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-soft, #6b6e76); }
.ap-bm-legend .ap-bm-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.ap-bm-legend .ap-bm-key:first-child { margin-left: 0; }
.ap-bm-key.ap-bm-rag-green { background: var(--success, #42775a); }
.ap-bm-key.ap-bm-rag-amber { background: var(--warning, #8a6f3d); }
.ap-bm-key.ap-bm-rag-red { background: var(--danger, #99534f); }
.ap-bm-empty { font-size: 13px; color: var(--text-soft, #6b6e76); padding: 12px 2px; }
.ap-trend-grid { margin-top: 18px; }

/* ---- Community Leaderboard ------------------------------------------------ */
.ap-lb-controls { display: inline-flex; gap: 6px; }
.ap-lb-toggle {
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-interactive); border-radius: 999px;
  background: var(--surface); color: var(--text-soft, #6b6e76);
}
.ap-lb-toggle.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.ap-lb-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-top: 14px;
}
.ap-lb-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-nested); background: var(--surface-muted);
}
.ap-lb-kpi-label { font-size: 11px; font-weight: 600; color: var(--text-soft, #6b6e76); text-transform: uppercase; letter-spacing: 0.03em; }
.ap-lb-kpi-value { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.ap-lb-kpi-sub { font-size: 11px; color: var(--text-soft, #8a8d96); }

.ap-lb-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.ap-lb-card {
  border: 1px solid var(--border); border-radius: var(--radius-nested);
  background: var(--surface); padding: 14px 16px;
}
.ap-lb-card-full { margin-top: 16px; }
.ap-lb-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--accent); }
.ap-lb-table-wrap { overflow-x: auto; }
.ap-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-lb-table th, .ap-lb-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.ap-lb-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft, #6b6e76); font-weight: 700;
}
.ap-lb-table tbody tr:last-child td { border-bottom: none; }
.ap-lb-pos { color: var(--text-soft, #8a8d96); font-weight: 600; width: 28px; }

.ap-rank-badge {
  display: inline-block; min-width: 30px; text-align: center; padding: 2px 8px;
  font-size: 12px; font-weight: 700; border-radius: 999px; border: 1px solid transparent;
}
.ap-rank-gold { background: rgba(176, 137, 44, 0.16); color: #8a6f3d; border-color: rgba(176, 137, 44, 0.35); }
.ap-rank-top3 { background: rgba(66, 119, 90, 0.14); color: var(--success, #42775a); border-color: rgba(66, 119, 90, 0.3); }
.ap-rank-top10 { background: rgba(77, 99, 135, 0.14); color: #4d6387; border-color: rgba(77, 99, 135, 0.3); }
.ap-rank-rest { background: var(--surface-muted); color: var(--text-soft, #6b6e76); border-color: var(--border); }

.ap-move { font-size: 12px; font-weight: 600; }
.ap-move-up { color: var(--success, #42775a); }
.ap-move-down { color: var(--danger, #99534f); }
.ap-move-flat { color: var(--text-soft, #8a8d96); }

.ap-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-lb-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-nested); background: var(--surface-muted);
}
.ap-lb-list-main { font-size: 13px; font-weight: 600; color: var(--accent); }
.ap-lb-list-sub { font-size: 12px; color: var(--text-soft, #6b6e76); }

@media (max-width: 860px) {
  .ap-lb-cols { grid-template-columns: 1fr; }
}

/* ---- Full-page agent detail --------------------------------------------- */
.ap-detail-bar { margin-bottom: 4px; }
.ap-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-interactive); border-radius: 999px;
  background: var(--surface); color: var(--accent);
}
.ap-back-btn:hover { background: var(--surface-muted); }

/* The active view is a 12-column grid (see .view-panel:not(#overviewView).active).
   Make the detail bar and content span all 12 columns so they're full-width,
   then lay the panels out as plain full-width blocks inside. */
#agentDetailView.active > .ap-detail-bar,
#agentDetailView.active > #apDetailContent {
  grid-column: 1 / -1;
  min-width: 0;
}
#apDetailContent { display: block; width: 100%; }
.ap-page { display: block; width: 100%; }
.ap-page > * { width: 100%; box-sizing: border-box; margin: 0 0 var(--space-4); }
.ap-page > *:last-child { margin-bottom: 0; }
.ap-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ap-page-name { margin: 2px 0 2px; font-size: 24px; font-weight: 700; color: var(--accent); }
.ap-page-sub { margin: 0; font-size: 13px; color: var(--text-soft, #6b6e76); }
.ap-detail-score { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--text-soft, #6b6e76); }
.ap-page-kpis { margin-top: 16px; }
.ap-page-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4); }
.ap-page-more { margin: 8px 2px 0; font-size: 12px; color: var(--text-soft, #8a8d96); }

@media (max-width: 980px) {
  .ap-page-cols { grid-template-columns: 1fr; }
}

/* ---- Agent page: pillar cards (SuperAgent / Verified / TruCheck …) -------- */
.ap-hero-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-gauge-wrap { position: relative; width: 132px; height: 132px; }
.ap-gauge-cap { font-size: 11px; color: var(--text-soft, #6b6e76); font-weight: 600; text-align: center; }

.ap-pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 18px;
}
.ap-pillar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  position: relative; overflow: hidden;
}
.ap-pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border-interactive); }
.ap-pillar-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--surface-muted); color: var(--accent);
}
.ap-pillar-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-pillar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft, #6b6e76); }
.ap-pillar-value { font-size: 19px; font-weight: 700; color: var(--accent); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-pillar-sub { font-size: 11px; color: var(--text-soft, #8a8d96); }

.ap-pillar-gold::before { background: #b0892c; }
.ap-pillar-gold .ap-pillar-icon { background: rgba(176, 137, 44, 0.16); color: #8a6f3d; }
.ap-pillar-green::before { background: var(--success, #42775a); }
.ap-pillar-green .ap-pillar-icon { background: rgba(66, 119, 90, 0.14); color: var(--success, #42775a); }
.ap-pillar-blue::before { background: #4d6387; }
.ap-pillar-blue .ap-pillar-icon { background: rgba(77, 99, 135, 0.16); color: #4d6387; }
.ap-pillar-purple::before { background: #6b5d95; }
.ap-pillar-purple .ap-pillar-icon { background: rgba(107, 93, 149, 0.16); color: #6b5d95; }
.ap-pillar-teal::before { background: #2f7971; }
.ap-pillar-teal .ap-pillar-icon { background: rgba(47, 121, 113, 0.16); color: #2f7971; }
.ap-pillar-warn::before { background: var(--warning, #8a6f3d); }
.ap-pillar-warn .ap-pillar-icon { background: rgba(138, 111, 61, 0.16); color: var(--warning, #8a6f3d); }
.ap-pillar-red::before { background: var(--danger, #9e4a44); }
.ap-pillar-red .ap-pillar-icon { background: rgba(158, 74, 68, 0.16); color: var(--danger, #9e4a44); }
.ap-pillar-awaiting { background: var(--surface-muted); }
/* Per-listing PF quality RAG dot */
.ap-q-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ap-q-green { background: var(--success, #42775a); }
.ap-q-amber, .ap-q-warn { background: var(--warning, #b0892c); }
.ap-q-red { background: var(--danger, #9e4a44); }
/* Week-over-week trend chip on listings KPI cards */
.kpi-trend { font-size: 11px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.kpi-trend-up { color: var(--success, #42775a); }
.kpi-trend-down { color: var(--danger, #9e4a44); }
.kpi-awaiting { font-size: 13px; font-style: italic; font-weight: 600; color: var(--text-soft, #8a8d96); }

/* PF agent-verification chip next to the agent name */
.ap-verified-chip { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.ap-verified-yes { background: rgba(66, 119, 90, 0.14); color: var(--success, #42775a); }
.ap-verified-no { background: var(--surface-muted, #f0f0f0); color: var(--text-soft, #8a8d96); }
.ap-pillar-awaiting .ap-pillar-value { font-size: 13px; font-style: italic; color: var(--text-soft, #8a8d96); font-weight: 600; }
.ap-pillar-awaiting::before { background: var(--border); }

/* Rank summary chips (community standings) */
.ap-rank-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.ap-rank-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-muted);
}
.ap-rank-chip-val { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.ap-rank-chip-label { font-size: 11px; font-weight: 600; color: var(--text-soft, #6b6e76); text-transform: uppercase; letter-spacing: 0.03em; }
.ap-rank-chip-gold { border-color: rgba(176, 137, 44, 0.4); }
.ap-rank-chip-gold .ap-rank-chip-val { color: #8a6f3d; }
.ap-rank-chip-green { border-color: rgba(66, 119, 90, 0.35); }
.ap-rank-chip-blue { border-color: rgba(77, 99, 135, 0.35); }

/* Listings reconciliation (CRM vs Property Finder) */
.ap-recon-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.ap-recon-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.ap-recon-val { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.ap-recon-label { font-size: 11px; font-weight: 600; color: var(--text-soft, #6b6e76); text-transform: uppercase; letter-spacing: 0.03em; }
.ap-recon-note { margin: 0 0 14px; }
.ap-recon-kicker { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft, #6b6e76); }

/* ---- Team performance ---------------------------------------------------- */
.ap-team-charts { margin: 14px 0; }
.ap-team-row { cursor: pointer; transition: background 120ms ease; }
.ap-team-row:hover { background: var(--surface-muted); }
.ap-team-row.is-active { background: var(--accent-soft, rgba(37, 39, 58, 0.08)); }
.ap-team-row.is-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ap-team-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px;
  padding: 6px 12px; font-size: 12.5px; border-radius: 999px;
  background: var(--surface-muted); color: var(--text-soft, #6b6e76);
}
.ap-team-chip strong { color: var(--accent); }
.ap-team-chip button {
  border: none; background: transparent; cursor: pointer; font-weight: 600;
  font-size: 12px; color: var(--danger, #99534f); padding: 0;
}

@media (max-width: 640px) {
  .ap-bm-cards { grid-template-columns: 1fr; }
}

/* Progressive-sync chip: "loading full history…" */
.sync-backfill-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  color: var(--warning); background: rgba(115, 90, 44, 0.1);
  border: 1px solid rgba(115, 90, 44, 0.25); white-space: nowrap;
}
.sync-backfill-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warning); animation: ap-pulse 1.2s ease-in-out infinite;
}
@keyframes ap-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sync-backfill-chip::before { animation: none; } }


/* ==========================================================================
   Mobile navigation — off-canvas sidebar (≤920px)
   ========================================================================== */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.mobile-nav-toggle svg { width: 20px; height: 20px; }
.sidebar-backdrop { display: none; }

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    z-index: 400;
    transform: translateX(-105%);
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
    box-shadow: 0 24px 60px rgba(15, 17, 21, 0.25);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-nav-toggle { display: inline-flex; }
  .sidebar-backdrop.visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 390;
    background: rgba(15, 17, 21, 0.4);
  }
  .app-topbar { flex-wrap: wrap; gap: 8px; }
}

/* Login hero: keep month labels clear of the overlapping ring card. */
.hero-card-main footer { padding-right: 88px; }

/* 220px sidebar ("Dashboard Clean"): keep the footer identity compact so
   "Savills Reporting" fits beside the logout button. */
#sidebarUserRole { font-size: 10.5px; letter-spacing: 0; }
#sidebarUserName { font-size: 12px; }

/* "Dashboard Clean": report/marketing nav items use a light active state
   (dark text on #f4f4f3); the solid black pill is reserved for the
   workspace (Dashboards) switcher, matching the design mock. */
.tab-button.active,
.sidebar-item.active {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
  font-weight: 600;
}
.tab-button.active:hover,
.sidebar-item.active:hover {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}
.tab-button.active .item-icon,
.sidebar-item.active .item-icon,
.tab-button.active:hover .item-icon,
.sidebar-item.active:hover .item-icon {
  color: var(--text) !important;
}
.tab-button.workspace-tab.active,
.tab-button.workspace-tab.active:hover {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
}
.tab-button.workspace-tab.active .item-icon {
  color: var(--accent-on) !important;
}

/* ── Dashboard Clean overview rebuild ─────────────────────────────── */

/* Volume row: mock uses 3fr:2fr (the late zone forces other rows to 50/50) */
#overviewView .overview-analytics-grid.ov-row-volume {
  grid-template-columns: 3fr 2fr !important;
}
@media (max-width: 920px) {
  #overviewView .overview-analytics-grid.ov-row-volume {
    grid-template-columns: 1fr !important;
  }
}

/* Right-aligned meta note in a panel header ("5,020 leads · 284 qualified") */
.panel-header-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: baseline;
}

/* Qualification rate by source — bar rows per the mock */
.ov-quality-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.ov-quality-row {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.ov-quality-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-quality-track {
  height: 8px;
  background: var(--surface-muted, #f0f1f3);
  border-radius: 999px;
  overflow: hidden;
}
.ov-quality-fill {
  height: 100%;
  border-radius: 999px;
  transform-origin: left;
  animation: growX 0.9s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes growX { from { transform: scaleX(0); } }
.ov-quality-pct {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ov-quality-foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

/* Portal performance — slim single-row strip per the mock */
#overviewPortalPanel {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
#overviewPortalPanel .panel-header { margin: 0; }
#overviewPortalPanel .panel-header h3 { font-size: 14px; }
#overviewPortalPanel .ov-portal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
#overviewPortalPanel .ov-portal-card {
  background: none !important;
  border: none !important;
  border-left: 1px solid var(--border-subtle, #f0f1f3) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 20px !important;
  box-shadow: none !important;
}
@media (max-width: 920px) {
  #overviewPortalPanel { grid-template-columns: 1fr; gap: 12px; }
  #overviewPortalPanel .ov-portal-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #overviewPortalPanel .ov-portal-card { border-left: none !important; padding-left: 0 !important; }
}

/* KPI card tones for the new cards (won green, lost red) */
.kpi-grid > .kpi-card.kpi-card-won strong { color: var(--success); }
.kpi-grid > .kpi-card.kpi-card-lost strong { color: var(--danger); }

/* ── Clean-bars restyle per the Dashboard Clean mock ──────────────── */

/* Flat white cards: no dark top stripe, no hover lift */
.overview-pro-panel::before { display: none !important; }
.overview-pro-panel:hover { transform: none; border-color: var(--border); }

.ov-bars-panel { padding-top: 6px; }
.ov-quality-row.ov-bar-wide { grid-template-columns: minmax(0, 220px) 1fr 52px; }

/* Source donut (CSS conic-gradient, like the mock) */
.ov-donut-wrap { display: flex; align-items: center; gap: 24px; padding: 8px 0; }
.ov-donut { position: relative; width: 150px; height: 150px; flex: none; }
.ov-donut-ring {
  width: 150px;
  height: 150px;
  border-radius: 999px;
  -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px);
  mask: radial-gradient(circle, transparent 44px, #000 45px);
}
.ov-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ov-donut-center strong { font-family: var(--font-mono); font-size: 18px; font-weight: 600; display: block; }
.ov-donut-center span { font-size: 10px; color: var(--text-muted); }
.ov-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ov-donut-li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ov-donut-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ov-donut-name { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lead source distribution — plain-number layout (Dashboard Clean) */
.ov-source-split { display: flex; align-items: flex-start; gap: 28px; }
.ov-source-total { flex: none; text-align: left; padding-top: 4px; }
.ov-source-total strong { font-family: var(--font-mono); font-size: 34px; font-weight: 600; display: block; line-height: 1; letter-spacing: -0.02em; }
.ov-source-total span { font-size: 11px; color: var(--text-muted); }
.ov-source-list { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ov-source-li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.ov-source-name { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aggregate note under a bar chart (e.g. Downstream distribution win-rate) */
.ov-bar-note { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); }

/* Weekday column tiles */
.overview-dow-heat { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 8px !important; }
.ov-dow-col { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ov-dow-day { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-muted); }
.ov-dow-track {
  height: 120px;
  background: var(--surface-muted, #f0f1f3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.ov-dow-fill { border-radius: 8px 8px 0 0; }
.ov-dow-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

/* Property demand leaderboard rows */
.overview-leader-list { display: flex; flex-direction: column; gap: 9px; }
.ov-leader-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 150px) 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.ov-leader-rank {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface-muted, #f0f1f3);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
.ov-leader-name { overflow: hidden; }
.ov-leader-name strong { display: block; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-leader-name span { font-size: 10px; color: var(--text-muted); }

/* KPI values were ellipsized ("AED 1,1…") — slightly smaller mono + wider cards */
#kpiGrid.kpi-grid > .kpi-card strong { font-size: clamp(17px, 1.5vw, 20px); }
/* Dashboard Clean lays the 11 KPIs out 8-across (row 1 ends at Closed Won,
   row 2 = Closed Lost / CPL / CPQL). Lock 8 columns at desktop, wrap below. */
#overviewView #kpiGrid.kpi-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
@media (max-width: 1180px) { #overviewView #kpiGrid.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { #overviewView #kpiGrid.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Dashboard Clean's KPIs sit on a white page; the app page is warm-grey, so the
   empty tail of row 2 (after CPQL) reads as a grey block. Fill the KPI zone white
   so those empty tracks disappear exactly like the design. */
#overviewView #kpiGrid.kpi-grid { background: var(--surface); border-radius: 12px; }

/* ── Exact-match pass: agents controls row + meta slim ────────────── */
.agent-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agent-search-box {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-interactive);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
}
.agent-search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--text);
}
.meta-snapshot-cta {
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Topbar: laptop widths --------------------------------------------- */
/* Keep the workspace title on one line and let the status chips wrap under
   themselves instead of squeezing the title or clipping mid-character. */
.app-topbar .page-title { flex: 1 1 auto; }
.app-topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; flex: 0 1 auto; }
.topbar-actions .sync-badge,
.topbar-actions .sync-backfill-chip { white-space: nowrap; }
.sync-summary { display: inline-block; line-height: 22px; }
@media (max-width: 1560px) {
  .sync-summary { max-width: 230px; }
}

/* ============================================================
   Polish layer v43 — clean/clear refinement pass (2026-07-20).
   Restrained application of the design-audit skill: fills gaps
   (selection, scrollbars, keyboard focus, heading balance,
   pressed feedback) without changing layout, palette or type.
   ============================================================ */

/* Brand-tinted text selection instead of browser default blue. */
::selection {
  background: rgba(220, 7, 20, 0.14);
  color: inherit;
}

/* Thin neutral scrollbars for data tables and overflow panels. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 29, 35, 0.22) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(26, 29, 35, 0.18);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 29, 35, 0.32);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Keyboard-focus safety net: any interactive element without its own
   focus style gets a consistent brand ring (accessibility requirement). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(220, 7, 20, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Headings: avoid single-word orphans in panel titles. */
.panel-header h3,
.panel-header .section-kicker {
  text-wrap: balance;
}

/* Big KPI figures: tabular digits + slightly tightened tracking so
   multi-digit numbers read as one crisp unit. */
.kpi-card strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* Table rows: ease the hover highlight instead of snapping. */
tbody td {
  transition: background 140ms var(--easing-standard);
}

/* List rows (top properties, communities, user cards): gentle inset
   accent on hover for a tactile "row is live" cue. */
.summary-item {
  transition: background 140ms var(--easing-standard), box-shadow 140ms var(--easing-standard);
}
.summary-item:hover {
  box-shadow: inset 2px 0 0 rgba(220, 7, 20, 0.45);
}

/* Pressed feedback on nav + chips (buttons already scale at :active). */
.tab-button:active,
.filter-chip:active,
.sync-badge:active {
  transform: scale(0.985);
}

/* Smooth in-page scrolling — disabled for reduced-motion users. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── Audit log (Administration) ─────────────────────────────────────────── */
.admin-subtle { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); max-width: 60ch; }
.table-scroll { overflow-x: auto; }
.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
}
.audit-search {
  flex: 1 1 240px;
  min-width: 180px;
  width: auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.audit-toolbar .audit-filter {
  flex: 0 0 auto;
  width: auto;
  min-width: 132px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.audit-toolbar .ghost-button { flex: 0 0 auto; }
.audit-search:focus, .audit-filter:focus { outline: none; border-color: var(--accent-ring, #95989f); }
.audit-table { width: 100%; }
.audit-table th, .audit-table td { white-space: nowrap; vertical-align: middle; }
.audit-table td.audit-detail { white-space: normal; color: var(--text-secondary); font-size: 12px; max-width: 340px; }
.audit-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.audit-ip { color: var(--text-muted); font-family: var(--font-mono); font-size: 11.5px; }
.audit-role {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-hover, #f4f4f3);
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: capitalize;
}
.audit-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.audit-badge-ok { background: #eef2ee; color: #42775a; }
.audit-badge-fail { background: var(--danger-bg, #f3e3e1); color: var(--danger, #99534f); }
.audit-badge-warn { background: var(--warning-bg, #f3ecdd); color: var(--warning, #735a2c); }
.audit-more-wrap { display: flex; justify-content: center; margin-top: 12px; }

@media (prefers-color-scheme: dark) {
  .audit-badge-ok { background: rgba(66, 119, 90, 0.18); color: #7fb894; }
}
:root[data-theme="dark"] .audit-badge-ok { background: rgba(66, 119, 90, 0.18); color: #7fb894; }

/* ── Health & alerts (Administration) ───────────────────────────────────── */
.health-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--warning, #735a2c);
  border-radius: 10px;
  background: var(--warning-bg, #f3ecdd);
  color: var(--warning, #735a2c);
  font-size: 13px;
  font-weight: 600;
}
.health-banner.health-banner-error {
  border-color: var(--danger, #99534f);
  background: var(--danger-bg, #f3e3e1);
  color: var(--danger, #99534f);
}
.health-banner-icon { font-size: 14px; }
.health-banner-text { flex: 1; min-width: 0; }
.health-banner-cta {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.health-banner-cta:hover { background: rgba(0, 0, 0, 0.05); }
.health-banner-dismiss {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.health-banner-dismiss:hover { opacity: 1; }

.health-toolbar { display: flex; justify-content: flex-end; margin: 12px 0; }
.health-cards { display: grid; gap: 10px; }
.health-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.health-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; flex: none; background: var(--text-muted); }
.health-ok .health-dot { background: #42775a; }
.health-info .health-dot { background: #6b7280; }
.health-warn .health-dot { background: var(--warning, #735a2c); }
.health-error .health-dot { background: var(--danger, #99534f); }
.health-error { border-color: var(--danger, #99534f); background: var(--danger-bg, #f3e3e1); }
.health-warn { border-color: var(--warning, #735a2c); }
.health-body { flex: 1; min-width: 0; }
.health-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.health-head strong { font-size: 14px; color: var(--text); }
.health-status { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.health-error .health-status { color: var(--danger, #99534f); }
.health-warn .health-status { color: var(--warning, #735a2c); }
.health-ok .health-status { color: #42775a; }
.health-msg { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.health-action { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* ── Users (Administration) ─────────────────────────────────────────────── */
.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
}
.users-search {
  flex: 1 1 240px;
  min-width: 180px;
  width: auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.users-toolbar .users-filter {
  flex: 0 0 auto;
  width: auto;
  min-width: 132px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.users-search:focus, .users-filter:focus { outline: none; border-color: var(--accent-ring, #95989f); }
.users-toolbar #usersCount { margin-left: auto; }
.users-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.users-page-controls { display: flex; gap: 8px; }
.users-page-controls .ghost-button { height: 32px; padding: 0 14px; }
.users-page-controls .ghost-button:disabled { opacity: 0.45; cursor: default; }
.users-table { width: 100%; }
.users-table th, .users-table td { vertical-align: middle; }
.users-header-actions { display: flex; gap: 8px; flex: none; }
.users-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.users-sortable::after { content: "↕"; opacity: 0.25; margin-left: 5px; font-size: 10px; }
.users-sortable.sorted-asc::after { content: "▲"; opacity: 0.7; }
.users-sortable.sorted-desc::after { content: "▼"; opacity: 0.7; }
.users-sortable:hover { color: var(--text); }
.user-cell { display: flex; flex-direction: column; gap: 1px; }
.user-cell strong { font-size: 13px; color: var(--text); }
.user-username { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.user-email { font-size: 11.5px; color: var(--text-secondary); }
.user-muted { color: var(--text-muted); }
.user-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.user-badge-active { background: #eef2ee; color: #42775a; }
.user-badge-inactive { background: var(--surface-hover, #f4f4f3); color: var(--text-muted); }
.user-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.user-link {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.user-link:hover { color: var(--text); text-decoration: underline; }
.user-link-danger { color: var(--danger, #99534f); }
.user-link-danger:hover { color: var(--danger, #99534f); }
@media (prefers-color-scheme: dark) {
  .user-badge-active { background: rgba(66, 119, 90, 0.18); color: #7fb894; }
}
:root[data-theme="dark"] .user-badge-active { background: rgba(66, 119, 90, 0.18); color: #7fb894; }

/* ── User edit dialog ───────────────────────────────────────────────────── */
.user-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: 380px;
  width: calc(100vw - 32px);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.user-dialog::backdrop { background: rgba(20, 20, 22, 0.42); }
.user-dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.user-dialog h4 { margin: 0; font-size: 15px; }
.user-dialog-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.user-dialog-row input, .user-dialog-row select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.user-dialog-error { margin: 0; font-size: 12px; color: var(--danger, #99534f); min-height: 1px; }
.user-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Full user editor (larger dialog) */
.user-dialog-lg { max-width: 540px; }
.user-linked {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-hover, #f4f4f3);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.user-linked-ok { border-color: #cfe0d4; background: #eef2ee; color: #42775a; }
.user-linked-warn { border-color: var(--warning, #735a2c); background: var(--warning-bg, #f3ecdd); color: var(--warning, #735a2c); }
.user-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.user-edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.user-edit-field > span { font-weight: 500; }
.user-edit-field input, .user-edit-field select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.user-edit-field input:disabled, .user-edit-field select:disabled { opacity: 0.55; cursor: not-allowed; }
.user-edit-dashboards { display: flex; flex-direction: column; gap: 6px; }
.user-edit-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.user-edit-dashboard-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.user-edit-dashboard-list label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.user-edit-dashboard-list input { width: 15px; height: 15px; flex: none; }
.user-edit-active { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.user-edit-active input { width: 15px; height: 15px; flex: none; }
.user-dialog-actions-split { justify-content: space-between; align-items: center; }
.user-dialog-actions-right { display: flex; gap: 8px; }
.user-delete-btn {
  border: 1px solid var(--danger, #99534f);
  background: transparent;
  color: var(--danger, #99534f);
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius-nested, 8px);
  cursor: pointer;
}
.user-delete-btn:hover { background: var(--danger-bg, #f3e3e1); }

/* ── Security (Administration) ──────────────────────────────────────────── */
.security-form { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.security-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0;
}
.security-group legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.03em; }
.security-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--text-secondary); }
.security-row input[type="number"] {
  flex: 0 0 96px;
  width: 96px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
  text-align: right;
}
.security-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.security-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.security-check input { width: 15px; height: 15px; flex: none; }
.security-actions { display: flex; align-items: center; gap: 14px; }
.admin-error { color: var(--danger, #99534f) !important; }

/* ── Saved views (per-user filter presets) ──────────────────────────────── */
/* #filterPanel is a wrapping flex row — force this onto its own full-width
   line so the Saved-views control sits above the filter grid, not beside it. */
.filter-bar-top { flex: 0 0 100%; display: flex; justify-content: flex-start; margin-bottom: 10px; }
.saved-views { position: relative; }
.saved-views-trigger { display: inline-flex; align-items: center; gap: 7px; height: 34px; }
.saved-views-trigger > svg { width: 15px; height: 15px; flex: none; }
.saved-views-caret { width: 13px !important; height: 13px !important; opacity: 0.6; }
.saved-views-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
}
.saved-views-save { display: flex; gap: 6px; }
.saved-views-save input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.saved-views-save-btn { flex: 0 0 auto; height: 34px; padding: 0 14px; }
.saved-views-hint { margin: 8px 2px 6px; font-size: 11.5px; color: var(--text-muted); }
.saved-views-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.saved-views-empty { margin: 6px 2px; font-size: 12.5px; color: var(--text-muted); }
.saved-view-item { display: flex; align-items: center; gap: 4px; }
.saved-view-apply {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-view-apply:hover { background: var(--surface-hover, #f4f4f3); }
.saved-view-delete {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
}
.saved-view-delete:hover { background: var(--surface-hover, #f4f4f3); color: var(--danger, #99534f); }