/* ==========================================================================
   Wordworks AI — Sales role demo
   Design tokens copied verbatim from appbuilder-ui/src/styles/tokens.css
   and the layout CSS modules, so this shell matches the real product.
   ========================================================================== */

:root {
  /* Primary Scale (Royal Blue) */
  --color-primary-50: #f2f8fe;
  --color-primary-100: #ebf6ff;
  --color-primary-200: #b7d6f8;
  --color-primary-300: #88baf2;
  --color-primary-400: #589fed;
  --color-primary-500: #1277e6;
  --color-primary-600: #1268c6;
  --color-primary-700: #0c54a3;
  --color-primary-800: #064284;

  --color-gray-50: #f6f6f7;
  --color-gray-100: #efeff0;
  --color-gray-200: #e1e2e4;
  --color-gray-300: #cfcfd2;
  --color-gray-400: #bababf;
  --color-gray-500: #a7a7ad;
  --color-gray-600: #908f95;
  --color-gray-700: #807e84;
  --color-gray-800: #69676c;
  --color-gray-900: #18181b;

  --color-success-50: #e6f3ef;
  --color-success-100: #cfe8df;
  --color-success-500: #3fa47f;
  --color-success-600: #0f8e60;
  --color-success-700: #04784e;

  --color-warning-50: #fff8eb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d98b06;
  --color-warning-700: #b87503;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --color-primary: var(--color-primary-500);
  --color-background: #ffffff;
  --color-background-secondary: var(--color-gray-50);
  --color-text-primary: #11344d;
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-400);
  --color-border: var(--color-gray-200);
  --font-mono: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shell colours, from AppSidebar/AppNavbar/AppLayout .module.css */
  --sidebar-bg: #0f2746;
  --sidebar-border: #193a62;
  --sidebar-text: #d7e5f6;
  --navbar-border: #d8e1eb;
  --navbar-text: #163458;
  --content-bg: #f3f6fa;
  --content-text: #13263e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", "Roboto", "Segoe UI", sans-serif;
}

html,
body {
  height: 100%;
}

body {
  background: var(--content-bg);
  color: var(--content-text);
  font-size: var(--font-size-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================ Layout shell ============================ */

.layout {
  height: 100vh;
  display: flex;
  background: var(--content-bg);
  overflow: hidden;
}

.sidebar {
  --sidebar-width-expanded: clamp(17rem, 15rem + 2vw, 20rem);
  --sidebar-width-collapsed: clamp(4.75rem, 4.5rem + 0.4vw, 5.25rem);

  background: var(--sidebar-bg);
  color: #f8fbff;
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);
  max-width: var(--sidebar-width-expanded);
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 300ms ease, min-width 300ms ease, max-width 300ms ease;
  box-shadow: 0 0 0 1px rgba(15, 39, 70, 0.02), 0 20px 40px rgba(15, 39, 70, 0.12);
}

.layout.collapsed .sidebar {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
  max-width: var(--sidebar-width-collapsed);
}

.sidebarHeader {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  padding: var(--spacing-4);
  overflow: hidden;
  gap: var(--spacing-3);
}

/* the mark is a wide wordmark drawn for a dark ground, not a square icon, so
   it sits directly on the sidebar rather than in a white tile */
.logoWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.logoMark {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* collapsed there is no room for the wordmark; the initial stands in for it */
.layout.collapsed .logoMark { display: none; }
.layout.collapsed .logoFallback { display: flex; }
.logoFallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: #f26a21;
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.logoText {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #f8fbff;
  white-space: nowrap;
}

.layout.collapsed .logoText { display: none; }

.sidebarNav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-2) var(--spacing-4);
}

.menuList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding-bottom: var(--spacing-2);
  list-style: none;
}

.menuButton {
  width: 100%;
  display: flex;
  align-items: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: left;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--sidebar-text);
  justify-content: flex-start;
  padding: var(--spacing-2);
  border-radius: 8px;
  font-size: var(--font-size-sm);
}

.menuButton:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.menuButton.active,
.menuButton.active:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #193a62;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 10px 24px rgba(10, 24, 43, 0.18);
}

.layout.collapsed .menuButton {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.iconWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iconImage {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.menuLabel {
  font-size: var(--font-size-sm);
  line-height: 1.2;
  margin-left: var(--spacing-3);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout.collapsed .menuLabel { display: none; }

.accessDot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.accessDot.rw { background: var(--color-success-500); }
.menuButton.active .accessDot { background: rgba(25, 58, 98, 0.3); }
.menuButton.active .accessDot.rw { background: var(--color-success-600); }
.layout.collapsed .accessDot { display: none; }

.sidebarFooter {
  border-top: 1px solid var(--sidebar-border);
  padding: var(--spacing-3) var(--spacing-4);
  flex-shrink: 0;
}

.roleCard {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.roleMeta { min-width: 0; display: block; }
.layout.collapsed .roleMeta { display: none; }
.roleName {
  display: block;
  font-size: var(--font-size-sm);
  color: #f8fbff;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roleSub {
  display: block;
  font-size: 11px;
  color: rgba(215, 229, 246, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================ Navbar ============================ */

.rightSide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.navbar {
  height: 4rem;
  background: #ffffff;
  border-bottom: 1px solid var(--navbar-border);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-6);
  gap: var(--spacing-4);
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(15, 39, 70, 0.04);
}

.menuToggle {
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--navbar-text);
  display: flex;
  align-items: center;
  transition: background-color var(--transition-base);
}
.menuToggle:hover { background: #edf3fa; }

.pageName {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  /* the longest module labels wrap out of the 4rem bar on a phone; clip them
     instead. Nothing changes at the widths the shorter labels already fit. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spacer { flex: 1; }

.projectPill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-200);
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.navUser {
  position: relative;
  margin-left: var(--spacing-3);
  padding-left: var(--spacing-3);
  border-left: 1px solid var(--color-border);
}
.navUserBtn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  max-width: 17rem;
  padding: var(--spacing-1) var(--spacing-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: pointer;
}
.navUserBtn:hover { background: #f2f6fb; }
.navUser.open .navUserBtn { background: #eef4fb; }
.navUserIcon { color: #69676c; flex-shrink: 0; }
.navUserText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.navUserName {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--navbar-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navUserChevron { color: #7c848d; flex-shrink: 0; }
.navUser.open .navUserChevron { transform: rotate(180deg); }

.roleChip {
  padding: 1px 0.45rem;
  border-radius: var(--radius-sm);
  background: #eef0f2;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.userMenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 15.5rem;
  max-width: calc(100vw - 2rem);
  background: #ffffff;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(15, 39, 70, 0.18);
  overflow: hidden;
  z-index: 60;
}
.userMenuHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
}
.userMenuEmail {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .navUserText { display: none; }
}

/* ============================ Content ============================ */

.mainContent {
  flex: 1;
  overflow-y: auto;
  background: var(--content-bg);
  color: var(--content-text);
  padding: var(--spacing-6);
}

.pageHead {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  flex-wrap: wrap;
}
.pageHeadText { min-width: 0; }
.pageTitle {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}
.pageSub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.accessBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-1) var(--spacing-2-5, 0.625rem);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.accessBadge.read_only {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
  border-color: var(--color-gray-200);
}
.accessBadge.read_write {
  background: var(--color-success-100);
  color: var(--color-success-700);
  border-color: #b7ded0;
}

/* Cards */
.card {
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
}
.cardHead {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.cardTitle {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}
.cardSub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.cardBody { padding: var(--spacing-5); }
.cardBody.flush { padding: 0; }

.grid { display: grid; gap: var(--spacing-4); }
.grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--spacing-4); }

@media (max-width: 1280px) {
  .grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid.cols2, .grid.cols3, .grid.cols4 { grid-template-columns: minmax(0, 1fr); }
}

/* KPI tiles */
.kpi {
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}
.kpiLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
.kpiValue {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.15;
}
.kpiFoot { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.kpiFoot .up { color: var(--color-success-600); font-weight: var(--font-weight-semibold); }
.kpiFoot .down { color: var(--color-error-600); font-weight: var(--font-weight-semibold); }

/* Tables */
.tableWrap { width: 100%; overflow-x: auto; }
table.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
table.dataTable thead th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.dataTable tbody td {
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-gray-100);
  white-space: nowrap;
}
table.dataTable tbody tr:hover { background: var(--color-gray-50); }
table.dataTable tbody tr.clickable { cursor: pointer; }
table.dataTable td.num, table.dataTable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--font-size-xs); }
.muted { color: var(--color-text-secondary); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.badge.notStarted { background: var(--color-gray-100); color: var(--color-gray-600); }
.badge.inProgress { background: var(--color-info-100); color: var(--color-info-700); }
.badge.paused { background: var(--color-warning-100); color: var(--color-warning-700); }
.badge.finished { background: var(--color-success-100); color: var(--color-success-700); }
.badge.stopped, .badge.failed { background: var(--color-error-100); color: var(--color-error-700); }
.badge.disabled { background: var(--color-gray-200); color: var(--color-gray-700); }
.badge.neutral { background: var(--color-gray-100); color: var(--color-gray-800); text-transform: none; }
.badge.info { background: var(--color-info-100); color: var(--color-info-700); text-transform: none; }
.badge.positive { background: var(--color-success-100); color: var(--color-success-700); text-transform: none; }
.badge.negative { background: var(--color-error-100); color: var(--color-error-700); text-transform: none; }
.badge.warn { background: var(--color-warning-100); color: var(--color-warning-700); text-transform: none; }

/* Toolbar / filters */
.toolbar {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.fieldLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
input.control, select.control, textarea.control {
  height: 2.25rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: #fff;
  min-width: 12rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea.control { height: auto; padding: var(--spacing-2) var(--spacing-3); resize: vertical; }
input.control:focus, select.control:focus, textarea.control:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(18, 119, 230, 0.12);
}
input.control:disabled, select.control:disabled, textarea.control:disabled {
  background: var(--color-gray-50);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.btn {
  height: 2.25rem;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-500);
  background: var(--color-primary-500);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  transition: background var(--transition-fast);
}
.btn:hover:not(:disabled) { background: var(--color-primary-600); }
.btn.ghost {
  background: #fff;
  color: var(--color-primary-700);
  border-color: var(--color-gray-300);
}
.btn.ghost:hover:not(:disabled) { background: var(--color-primary-50); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.readOnlyNote {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-warning-50);
  border: 1px solid #f3dfae;
  color: var(--color-warning-700);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
}

/* Charts */
.chartHolder { width: 100%; }
.chartHolder svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-3);
}
.legendItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Distribution bars */
.distRow {
  display: grid;
  /* Label track shrinks (it ellipsises) so a narrow card never pushes the page sideways. */
  grid-template-columns: minmax(0, 9.5rem) minmax(1.5rem, 1fr) 5.5rem;
  align-items: center;
  gap: var(--spacing-3);
  padding: 5px 0;
}
.distLabel {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.distTrack {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.distFill { height: 100%; border-radius: var(--radius-full); }
.distValue {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Definition lists */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-2) var(--spacing-5); }
.dl dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-semibold);
  align-self: center;
}
.dl dd { font-size: var(--font-size-sm); color: var(--color-text-primary); }

/* Tabs */
.tabs {
  display: flex;
  gap: var(--spacing-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-4);
  overflow-x: auto;
}
.tab {
  border: none;
  background: transparent;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--color-primary-700); }
.tab.active {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-500);
  font-weight: var(--font-weight-semibold);
}

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}
.pagerBtn {
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 var(--spacing-2);
  border: 1px solid var(--color-gray-300);
  background: #fff;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}
.pagerBtn:disabled { opacity: 0.45; cursor: not-allowed; }
.pagerBtn:hover:not(:disabled) { background: var(--color-primary-50); }

/* Drawer */
.drawerBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 39, 70, 0.35);
  z-index: 1040;
  display: flex;
  justify-content: flex-end;
}
.drawer {
  width: min(40rem, 100%);
  background: #fff;
  height: 100%;
  overflow-y: auto;
  box-shadow: -20px 0 40px rgba(15, 39, 70, 0.18);
}
.drawerHead {
  position: sticky;
  top: 0;
  background: #fff;
  padding: var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  z-index: 1;
}
.drawerBody { padding: var(--spacing-5); }
.closeBtn {
  margin-left: auto;
  border: none;
  background: var(--color-gray-100);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  flex-shrink: 0;
}
.closeBtn:hover { background: var(--color-gray-200); }

.codeBlock {
  background: #0f2746;
  color: #d7e5f6;
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.empty {
  padding: var(--spacing-8);
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.templateBody {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
}
.templateBody .var {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border-radius: var(--radius-base);
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}

.deniedList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}
.deniedChip {
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border: 1px dashed var(--color-gray-300);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  text-decoration: line-through;
}

.loading {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  gap: var(--spacing-3);
  flex-direction: column;
  padding: var(--spacing-6);
  text-align: center;
}
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.errorBox {
  max-width: 34rem;
  background: var(--color-error-50);
  border: 1px solid #f3c9c9;
  color: var(--color-error-700);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  font-size: var(--font-size-sm);
  text-align: left;
  line-height: 1.6;
}

/* ==========================================================================
   Campaign Runs console — segmented panel head, inline filter bar, sortable
   run table with an expandable data-set row, and the compact footer pager.
   ========================================================================== */

.runsPanel { overflow: hidden; }

.panelHead {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  flex-wrap: wrap;
}
.panelTitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}

.segmented {
  display: inline-flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 3px;
  gap: 2px;
}
.segBtn {
  border: none;
  background: transparent;
  padding: 0 var(--spacing-4);
  height: 1.9rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.segBtn:hover { color: var(--color-primary-700); }
.segBtn.active {
  background: var(--color-primary-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.filterBar {
  display: flex;
  gap: var(--spacing-3);
  align-items: center;
  padding: 0 var(--spacing-5) var(--spacing-4);
  flex-wrap: wrap;
}
.filterBar .control { min-width: 10rem; }
.filterBar .control.grow { flex: 1 1 18rem; min-width: 14rem; }
.filterBar .dateControl { min-width: 9.5rem; flex: 0 0 auto; }

/* Table */
table.runsTable thead th {
  background: #fff;
  padding: var(--spacing-2) var(--spacing-3);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-border);
}
table.runsTable tbody td {
  padding: var(--spacing-3);
  vertical-align: middle;
}
table.runsTable th.tick, table.runsTable td.tick {
  width: 2.75rem;
  text-align: center;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-2);
}
table.runsTable td.tick:last-child, table.runsTable th.tick:last-child {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-4);
}
table.runsTable input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary-500);
  cursor: pointer;
  vertical-align: middle;
}
table.runsTable tbody tr.isOpen { background: var(--color-primary-50); }

.sortBtn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sortBtn:hover { color: var(--color-primary-700); }
.sortBtn.active { color: var(--navbar-text); }
th.num .sortBtn { width: 100%; justify-content: flex-end; }
.sortArrow { color: var(--color-gray-400); font-size: 11px; }
.sortBtn.active .sortArrow { color: var(--color-primary-600); }

.dotName { display: inline-flex; align-items: center; gap: var(--spacing-2); font-weight: var(--font-weight-medium); }
.rowDot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }

.dsCell { display: flex; align-items: flex-start; gap: var(--spacing-2); }
.chev {
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-base);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.chev:hover { background: var(--color-gray-100); color: var(--color-primary-600); }
.chev.open { transform: rotate(90deg); color: var(--color-primary-600); }
.dsText { min-width: 0; }
.dsLine { display: flex; align-items: center; gap: var(--spacing-2); }
.dsName {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  max-width: 17rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsName.mono { font-size: var(--font-size-xs); letter-spacing: 0.01em; }
.roomsPill {
  background: var(--color-info-50);
  color: var(--color-info-700);
  border: 1px solid var(--color-info-100);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 1px 8px;
  white-space: nowrap;
}
.dsId {
  color: var(--color-gray-500);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dsIdTag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-400);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-base);
  padding: 0 3px;
}

.stackCell { display: flex; flex-direction: column; line-height: 1.35; }
.stackCell .sub { font-size: 11px; color: var(--color-gray-500); }

.statusPill {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.statusPill.ok { background: var(--color-success-50); color: var(--color-success-700); }
.statusPill.busy { background: var(--color-info-50); color: var(--color-info-700); }
.statusPill.warn { background: var(--color-warning-50); color: var(--color-warning-700); }
.statusPill.bad { background: var(--color-error-50); color: var(--color-error-700); }
.statusPill.idle { background: var(--color-gray-100); color: var(--color-gray-700); }

.iconBtn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-gray-700);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.iconBtn:hover { background: var(--color-primary-50); border-color: var(--color-primary-200); }

/* Expanded run */
tr.expandRow td { background: var(--color-primary-50); padding: 0 !important; }
.expandBox {
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--spacing-5);
  align-items: start;
}
.expandFacts { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); }
.expandFact { display: flex; flex-direction: column; gap: 2px; }
.expandKey {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
.expandVal { font-size: var(--font-size-xs); color: var(--color-text-primary); }
.expandBars .distRow { grid-template-columns: minmax(0, 5rem) minmax(1.5rem, 1fr) 5.5rem; }
@media (max-width: 1100px) {
  .expandBox { grid-template-columns: minmax(0, 1fr); padding-left: var(--spacing-5); }
}

/* Footer pager */
.tableFoot {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}
.selCount {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border-radius: var(--radius-full);
  padding: 2px var(--spacing-3);
  font-weight: var(--font-weight-semibold);
}
.footCount { font-variant-numeric: tabular-nums; }
.footPage { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.pageArrow {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-gray-300);
  background: #fff;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-primary);
}
.pageArrow:disabled { opacity: 0.4; cursor: not-allowed; }
.pageArrow:hover:not(:disabled) { background: var(--color-primary-50); }

/* ==========================================================================
   Campaign Overview, run-scoped — the console opened from a Campaign Runs row.
   ========================================================================== */

.ovConsole { display: flex; flex-direction: column; gap: var(--spacing-4); }

.ovBar {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.ovDate { display: flex; align-items: center; gap: var(--spacing-2); }
.ovDate .fieldLabel { text-transform: none; letter-spacing: 0; font-size: var(--font-size-sm); }

.liveChip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 2.25rem;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-300);
  background: #fff;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.liveDot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
}
.liveChip.on { color: var(--color-success-700); border-color: #b7ded0; }
.liveChip.on .liveDot { background: var(--color-success-600); }

.ovTabs { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.ovTab {
  border: 1px solid var(--color-gray-300);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-2) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ovTab:hover { color: var(--color-primary-700); border-color: var(--color-primary-300); }
.ovTab.active {
  color: var(--navbar-text);
  border-color: var(--navbar-text);
  box-shadow: inset 0 -2px 0 var(--navbar-text);
}

.ovPicker {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.ovPicker .control { min-width: 16rem; }
.ovScopeNote { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.ovSection {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-2);
  margin-top: var(--spacing-2);
}
.ovNote {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  line-height: 1.55;
}
.ovNote a { color: var(--color-primary-600); }

.statCard {
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
  min-width: 0;
}
.statLabel {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}
.statValue {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.1;
}
.statFoot {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-2);
}

.dispCard {
  position: relative;
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
  min-width: 0;
}
.dispDot {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}
.dispCode {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  margin-bottom: var(--spacing-2);
}
.dispValue {
  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.1;
}

.stageCard {
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
}
.stageHead { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.stageTitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}
.stageSub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.stageStats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-8);
  margin-top: var(--spacing-4);
}
.stageKey { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.stageVal {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.2;
}
.stageAside { text-align: right; }
.progressValue {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--navbar-text);
  line-height: 1.2;
}

.stageDivider {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: var(--color-gray-500);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.stageDivider::before,
.stageDivider::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--color-gray-300);
}

/* ==========================================================================
   Call List tab — per-lead table with an in-header filter row.
   ========================================================================== */

.clHead {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  flex-wrap: wrap;
}
.clTitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}
.clCount { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.clRange {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 7rem;
  text-align: center;
}
.roundBtn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-gray-50);
  color: var(--navbar-text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.roundBtn:disabled { opacity: 0.4; cursor: not-allowed; }
.roundBtn:hover:not(:disabled) { background: var(--color-primary-50); border-color: var(--color-primary-200); }

table.callTable thead th {
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-sm);
  color: var(--navbar-text);
  border-bottom: none;
  position: static;
}
table.callTable tr.clFilters td {
  padding: 0 var(--spacing-3) var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  vertical-align: top;
}
.cellInput {
  width: 100%;
  min-width: 6.5rem;
  height: 2.25rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: #fff;
  outline: none;
}
.cellInput:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(18, 119, 230, 0.12);
}
table.callTable tbody td {
  padding: var(--spacing-4) var(--spacing-3);
  border-bottom: 1px solid var(--color-gray-100);
}
table.callTable tbody tr:hover { background: var(--color-gray-50); }
.clName { font-weight: var(--font-weight-medium); }
.clLink { color: var(--color-primary-600); font-weight: var(--font-weight-medium); }
.linkBtn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-primary-600);
  text-decoration: underline;
  cursor: pointer;
}
.linkBtn:hover { color: var(--color-primary-800); }

/* ==========================================================================
   Call List — docked lead panel beside the table.
   ========================================================================== */

.panelToggle { display: flex; gap: var(--spacing-2); justify-content: flex-end; }

.clSplit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); }
.clSplit.withPanel { grid-template-columns: minmax(0, 1fr) 28rem; align-items: start; }
@media (max-width: 1280px) {
  .clSplit.withPanel { grid-template-columns: minmax(0, 1fr); }
}
.clCard { min-width: 0; }
.clClear { height: 2rem; padding: 0 var(--spacing-3); }

table.callTable tbody tr.isOpen { background: var(--color-primary-50); }

.clPanel {
  background: var(--color-background);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
  overflow: hidden;
  min-width: 0;
}

.panelTabs { display: flex; border-bottom: 1px solid var(--color-border); }
.panelTab {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-3) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.panelTab:hover { color: var(--color-primary-700); }
.panelTab.active {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-500);
  font-weight: var(--font-weight-semibold);
}

.leadCard {
  margin: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}
.leadCardTop { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.leadName {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}
.leadPhone { color: var(--color-text-secondary); }
.leadAmount { text-align: right; }
.leadAmountValue {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.2;
}
.leadAmountLabel { font-size: 11px; color: var(--color-text-secondary); }
.leadStatus {
  font-size: var(--font-size-xs);
  color: var(--color-success-700);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-1);
}

.chChips { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); flex-wrap: wrap; }
.chChip {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 3px var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: #fff;
}
.chChip.on { color: var(--color-success-700); border-color: #b7ded0; background: var(--color-success-50); }
.chChip.off { color: var(--color-gray-600); }

.audioBar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.playBtn {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.audioTime { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.audioTrack {
  flex: 1;
  min-width: 4rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
}
.audioFill { display: block; width: 0; height: 100%; }
.audioNote { font-size: 10px; color: var(--color-gray-500); font-style: italic; }

.msgTabs {
  display: flex;
  gap: var(--spacing-1);
  margin: 0 var(--spacing-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 3px;
}
.msgTab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.msgTab.active { background: #fff; color: var(--navbar-text); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); }

.panelBody {
  padding: var(--spacing-4);
  max-height: 34rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.panelEmpty {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  line-height: 1.55;
}
.panelBody .dl { grid-template-columns: max-content 1fr; gap: var(--spacing-2) var(--spacing-4); }
.panelBody .statCard { padding: var(--spacing-3) var(--spacing-4); }
.panelBody .statValue { font-size: var(--font-size-xl); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--spacing-4); border-left: 2px solid var(--color-gray-200); }
.timeline li {
  position: relative;
  padding: 0 0 var(--spacing-3) var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--spacing-4) - 5px);
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-400);
}
.tlKey {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
.tlVal { font-size: var(--font-size-xs); color: var(--color-text-primary); }

.tplCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
}
.tplHead { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); flex-wrap: wrap; }
.tplName { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    z-index: 1030;
    transform: translateX(-100%);
    transition: transform 300ms ease;
  }
  .layout.mobileOpen .sidebar { transform: translateX(0); }
  .layout.collapsed .sidebar {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    max-width: var(--sidebar-width-expanded);
  }
  .layout.collapsed .menuLabel,
  .layout.collapsed .logoText,
  .layout.collapsed .roleMeta { display: block; }
  .mainContent { padding: var(--spacing-4); }
}

/* Chat bubbles — used wherever the export actually holds message text. */
.chatThread { display: flex; flex-direction: column; gap: var(--spacing-3); }
.chatRow { display: flex; }
/* platform/agent turns sit left in white; the customer side answers right in blue */
.chatRow.out { justify-content: flex-start; }
.chatRow.in { justify-content: flex-end; }
.bubble {
  max-width: 88%;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  border: 1px solid var(--color-border);
  background: #fff;
  line-height: 1.6;
}
.chatRow.in .bubble { background: var(--color-primary-100); border-color: #cfe3fb; }
.bubbleMeta { display: flex; align-items: center; gap: 6px; margin-bottom: var(--spacing-2); flex-wrap: wrap; }
.bubbleText { font-size: var(--font-size-sm); color: var(--color-text-primary); white-space: pre-wrap; word-break: break-word; }
.bubbleTime { font-size: 10px; color: var(--color-gray-500); margin-top: var(--spacing-2); }
.chatRow.in .bubbleTime { text-align: right; }
.bubbleText .var {
  background: #fff;
  border: 1px dashed var(--color-gray-400);
  color: var(--color-gray-700);
  border-radius: var(--radius-base);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.bubbleText .varFilled {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border-radius: var(--radius-base);
  padding: 0 4px;
  font-weight: var(--font-weight-semibold);
}

/* Field tag on each transcript bubble — says which column the turn came from. */
.turnTag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-base);
  padding: 1px 5px;
}
.chatRow.in .turnTag { background: rgba(255, 255, 255, 0.7); }

/* Flags the hand-written transcript turns so they are never read as production data. */
.sampleBanner {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1.55;
  color: var(--color-warning-700);
  background: var(--color-warning-50);
  border: 1px solid #f3dfae;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.sampleTag {
  display: inline-block;
  margin-right: var(--spacing-2);
  background: var(--color-warning-500);
  color: #fff;
  border-radius: var(--radius-base);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sampleBanner .mono { word-break: break-all; }

/* Action column pinned to the right edge while the rest of the row scrolls. */
table.callTable thead th:last-child,
table.callTable tr.clFilters td:last-child,
table.callTable tbody td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -6px 0 6px -6px rgba(15, 39, 70, 0.25);
  min-width: 5.5rem;
}
table.callTable thead th:last-child { z-index: 3; }
table.callTable tr.clFilters td:last-child { z-index: 3; }
table.callTable tbody td:last-child { z-index: 1; }
table.callTable tbody tr:hover td:last-child { background: var(--color-gray-50); }
table.callTable tbody tr.isOpen td:last-child { background: var(--color-primary-50); }

/* Name column pinned to the left edge, mirroring the Action column. */
table.callTable thead th:first-child,
table.callTable tr.clFilters td:first-child,
table.callTable tbody td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  box-shadow: 6px 0 6px -6px rgba(15, 39, 70, 0.25);
  min-width: 10rem;
}
table.callTable thead th:first-child,
table.callTable tr.clFilters td:first-child { z-index: 3; }
table.callTable tbody td:first-child { z-index: 1; }
table.callTable tbody tr:hover td:first-child { background: var(--color-gray-50); }
table.callTable tbody tr.isOpen td:first-child { background: var(--color-primary-50); }

/* Opening a lead splits the whole console, not just the Call List card. */
.consoleSplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--spacing-4);
  align-items: start;
}
.consoleSplit > .clPanel { position: sticky; top: 0; }
.consoleSplit .clPanel .panelBody { max-height: calc(100vh - 20rem); }
.consoleSplit .clPanel .panelTab { font-size: var(--font-size-sm); padding: var(--spacing-3); }
.consoleSplit .clPanel .bubbleText { font-size: var(--font-size-base); }
@media (max-width: 1400px) {
  .consoleSplit { grid-template-columns: minmax(0, 1fr); }
  .consoleSplit > .clPanel { position: static; }
}

/* The console's own controls get half the width when a lead is open. */
.consoleSplit .ovBar { gap: var(--spacing-2); }
.consoleSplit .ovBar .btn,
.consoleSplit .ovBar .liveChip { height: 2rem; padding: 0 var(--spacing-3); font-size: var(--font-size-xs); }
.consoleSplit .ovBar .control.dateControl { min-width: 7.5rem; height: 2rem; }
.consoleSplit .ovDate { gap: var(--spacing-1); }
.consoleSplit .ovDate .fieldLabel { font-size: var(--font-size-xs); }
.consoleSplit .ovTabs { gap: var(--spacing-2); }
.consoleSplit .ovTab { padding: var(--spacing-2) var(--spacing-3); }
.consoleSplit .ovPicker .control { min-width: 11rem; height: 2rem; }
.consoleSplit .clHead { padding: var(--spacing-3) var(--spacing-4); }

/* ==========================================================================
   Call List tab: the page holds still, the table and the panel scroll inside.
   ========================================================================== */

.mainContent.noScroll { overflow: hidden; display: flex; flex-direction: column; }
.mainContent.noScroll > .ovConsole,
.mainContent.noScroll > .consoleSplit { flex: 1 1 auto; min-height: 0; }

.consoleSplit.callsTab { align-items: stretch; }
.consoleSplit.callsTab > .ovConsole,
.consoleSplit.callsTab > .clPanel { min-height: 0; }
.consoleSplit.callsTab > .clPanel { position: static; display: flex; flex-direction: column; }

.ovConsole.callsTab { min-height: 0; }
.ovConsole.callsTab .clCard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ovConsole.callsTab .clCard > .tableWrap { flex: 1 1 auto; min-height: 0; overflow: auto; }

.callsTab .clPanel .panelBody {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* Header and filter row stay put while the rows scroll under them. */
.ovConsole.callsTab table.callTable thead th {
  position: sticky;
  top: 0;
  z-index: 4;
}
.ovConsole.callsTab table.callTable tr.clFilters td {
  position: sticky;
  top: var(--cl-head-h, 38px);
  z-index: 4;
}
.ovConsole.callsTab table.callTable thead th:first-child,
.ovConsole.callsTab table.callTable thead th:last-child,
.ovConsole.callsTab table.callTable tr.clFilters td:first-child,
.ovConsole.callsTab table.callTable tr.clFilters td:last-child { z-index: 6; }

/* Fixed header height so the filter row's sticky offset is exact. */
.ovConsole.callsTab table.callTable thead th { height: 42px; }
.ovConsole.callsTab { --cl-head-h: 42px; }

/* Give the table as much of the column as possible. */
.callsTab .ovNote { font-size: 11px; padding: var(--spacing-2) var(--spacing-3); line-height: 1.5; }
.callsTab .panelToggle { margin-top: calc(-1 * var(--spacing-2)); }

/* Stage 4 / Post-Process / Blockers on the Info tab. */
.progressTrack {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  overflow: hidden;
  margin-top: var(--spacing-3);
}
.progressFill { height: 100%; background: var(--color-primary-500); border-radius: var(--radius-full); }

.blockerRow { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.blockerChip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--spacing-2) var(--spacing-4);
  background: #fff;
  font-size: var(--font-size-sm);
  color: var(--navbar-text);
  white-space: nowrap;
}
.blockerDot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
  flex-shrink: 0;
}
.blockerChip.known .blockerDot { background: var(--color-success-600); }
.blockerState { color: var(--color-gray-500); font-weight: var(--font-weight-semibold); }
.blockerChip.known .blockerState { color: var(--color-success-700); }
.blockerNote { color: var(--color-text-secondary); font-size: var(--font-size-xs); }

/* SMS / WhatsApp message cards in the lead panel. */
.msgCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  background: #fff;
}
.msgCardHead { display: flex; align-items: flex-start; gap: var(--spacing-2); flex-wrap: wrap; }
.msgName { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }
.msgSub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.msgChip {
  border-radius: var(--radius-full);
  padding: 2px var(--spacing-3);
  font-size: 11px;
  white-space: nowrap;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.msgChip.ok { background: var(--color-success-50); color: var(--color-success-700); }
.msgChip.warn { background: var(--color-warning-50); color: var(--color-warning-700); }
.msgChip.bad { background: var(--color-error-50); color: var(--color-error-700); }

.msgBody {
  margin-top: var(--spacing-3);
  background: var(--color-gray-50);
  border-left: 3px solid var(--color-primary-400);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
}
.msgBodyLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.msgMeta {
  margin-top: var(--spacing-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2) var(--spacing-4);
}
.metaPair { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.metaKey {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
.metaVal { font-size: var(--font-size-xs); color: var(--color-text-primary); word-break: break-word; }

/* Merge-field list, shown when a template body is not in the export. */
.mergeRow {
  display: grid;
  grid-template-columns: 8rem 9rem minmax(0, 1fr);
  gap: var(--spacing-2);
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-xs);
}
.mergeRow:last-child { border-bottom: none; }
.mergeSrc { color: var(--color-gray-600); }
.mergeVal { color: var(--color-gray-500); font-style: italic; word-break: break-word; }
.mergeVal.filled {
  color: var(--color-success-700);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}
@media (max-width: 1500px) {
  .mergeRow { grid-template-columns: 7rem minmax(0, 1fr); }
  .mergeRow .mergeSrc { grid-column: 1 / -1; }
}

/* ==========================================================================
   Call Quality tab — QA verdict, rubric rules, timeline and turn list.
   ========================================================================== */

.qaBody { gap: var(--spacing-4); }

.qaHead {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}
.qaId { font-size: 11px; color: var(--color-text-secondary); font-family: var(--font-mono); }
.qaId strong { color: var(--navbar-text); }
.qaChip {
  border-radius: var(--radius-full);
  padding: 2px var(--spacing-3);
  font-size: 11px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  white-space: nowrap;
}
.qaChip.ok { background: var(--color-success-50); color: var(--color-success-700); }

.qaTop { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--spacing-3); align-items: start; }
@media (max-width: 900px) { .qaTop { grid-template-columns: minmax(0, 1fr); } }

.qaVerdict, .qaTile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  background: #fff;
  min-width: 0;
}
.qaTileLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}
.qaTileValue {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  line-height: 1.25;
  margin-top: 2px;
}
.qaTileFoot { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 2px; }
.qaScore { font-size: 2.4rem; font-weight: var(--font-weight-bold); color: var(--navbar-text); line-height: 1.05; }
.qaScoreMax { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-normal); }
.qaBar { height: 6px; border-radius: var(--radius-full); background: var(--color-gray-200); overflow: hidden; margin: var(--spacing-2) 0; }
.qaBarFill { height: 100%; border-radius: var(--radius-full); }
.qaVerdict .statusPill { margin-bottom: var(--spacing-2); }

.qaTileWrap { display: flex; flex-direction: column; gap: var(--spacing-3); min-width: 0; }
.qaTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-3); }
@media (max-width: 1100px) { .qaTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.shareBar { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; margin: var(--spacing-2) 0; background: var(--color-gray-200); }
.shareBot { background: #0d9488; }
.shareCust { background: #c2410c; }
.shareLegend { display: flex; gap: var(--spacing-4); font-size: 11px; color: var(--color-text-secondary); }
.dotBot, .dotCust { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); margin-right: 5px; }
.dotBot { background: #0d9488; }
.dotCust { background: #c2410c; }

.qaCard { padding: var(--spacing-4); }
.qaCardHead { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); margin-bottom: var(--spacing-3); }
.qaCardSub { font-weight: var(--font-weight-normal); color: var(--color-text-secondary); font-size: var(--font-size-xs); }

.ruleCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); }
@media (max-width: 1100px) { .ruleCols { grid-template-columns: minmax(0, 1fr); } }
.ruleColHead {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-2);
}
.ruleRow {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 3.2rem minmax(0, 1fr) 4.5rem;
  gap: var(--spacing-2);
  align-items: center;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-xs);
}
.ruleRow:last-child { border-bottom: none; }
.ruleName { color: var(--navbar-text); font-family: var(--font-mono); font-size: 11px; }
.ruleSev { font-size: 9px; letter-spacing: 0.05em; color: var(--color-gray-500); }
.ruleEvidence { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rulePill { font-size: 10px; font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); padding: 1px 6px; text-align: center; white-space: nowrap; }
.rulePill.pass { background: var(--color-success-50); color: var(--color-success-700); }
.rulePill.flag { background: var(--color-warning-50); color: var(--color-warning-700); }
.rulePill.na { background: var(--color-gray-100); color: var(--color-gray-600); }

.tlLegend { display: flex; gap: var(--spacing-4); font-size: 11px; color: var(--color-text-secondary); margin-bottom: var(--spacing-2); }
.tlRow { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: 6px; }
.tlWho { width: 4.5rem; font-size: 11px; color: var(--color-text-secondary); flex-shrink: 0; }
.tlTrack { position: relative; flex: 1; height: 12px; background: var(--color-gray-100); border-radius: var(--radius-base); }
.tlSeg { position: absolute; top: 2px; height: 8px; border-radius: 2px; }
.tlSeg.agent { background: #0d9488; }
.tlSeg.customer { background: #c2410c; }
.tlNudge { position: absolute; top: -2px; width: 2px; height: 16px; background: var(--color-warning-600); }
.tlAxis { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-gray-500); margin-left: 5rem; }
.tlNote { font-size: 10px; color: var(--color-gray-500); margin-top: var(--spacing-2); }

.qaTurns { display: flex; flex-direction: column; }
.qaTurn {
  display: grid;
  grid-template-columns: 3rem 5rem minmax(0, 1fr);
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.qaTurn:last-child { border-bottom: none; }
.qaTurnAt { color: var(--color-gray-500); font-size: 10px; }
.qaTurnWho { font-weight: var(--font-weight-semibold); font-size: 11px; }
.qaTurn.agent .qaTurnWho { color: #0d9488; }
.qaTurn.customer .qaTurnWho { color: #c2410c; }
.qaTurn.nudge .qaTurnWho { color: var(--color-warning-700); }
.qaTurn.nudge .qaTurnText { font-style: italic; color: var(--color-text-secondary); }
.qaTurnText { color: var(--color-text-primary); word-break: break-word; }

.qaBottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-3); }
@media (max-width: 1100px) { .qaBottom { grid-template-columns: minmax(0, 1fr); } }
.qaBottom .cardBody { padding: var(--spacing-3) var(--spacing-4); }
.qaBottom .dl { grid-template-columns: max-content minmax(0, 1fr); gap: var(--spacing-1) var(--spacing-3); }
.qaBottom .dl dd { font-size: var(--font-size-xs); }

/* ==========================================================================
   Rubric Analytics — weighted overview table and the derived-signal list.
   ========================================================================== */

.rubBody { gap: var(--spacing-3); }

.subTabs { display: flex; gap: var(--spacing-4); border-bottom: 1px solid var(--color-border); }
.subTab {
  border: none;
  background: transparent;
  padding: var(--spacing-2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.subTab:hover { color: var(--color-primary-700); }
.subTab.active { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); font-weight: var(--font-weight-semibold); }

.rubScoreRow { display: flex; align-items: baseline; gap: var(--spacing-2); flex-wrap: wrap; }
.rubScore { font-size: 1.7rem; font-weight: var(--font-weight-bold); color: var(--color-success-700); }
.rubScoreLabel { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.wTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2); }
.wTile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  text-align: center;
  background: var(--color-gray-50);
}
.wTile.ok { background: var(--color-success-50); border-color: #cfe8df; }
.wTile.bad { background: var(--color-error-50); border-color: #f3c9c9; }
.wTile.warn { background: var(--color-warning-50); border-color: #f3dfae; }
.wValue { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }
.wLabel { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); margin-top: 2px; }

table.rubTable { font-size: var(--font-size-xs); }
table.rubTable thead th { background: var(--color-gray-50); text-transform: uppercase; font-size: 9px; padding: var(--spacing-2); position: static; }
table.rubTable tbody td { padding: var(--spacing-2); vertical-align: top; white-space: normal; }
table.rubTable .crit { color: var(--navbar-text); font-weight: var(--font-weight-medium); min-width: 7rem; }
table.rubTable .method { color: var(--color-primary-600); }
table.rubTable .reason { color: var(--color-text-secondary); line-height: 1.5; min-width: 11rem; }
.rulePill.fail { background: var(--color-error-50); color: var(--color-error-700); }

.sigList { display: flex; flex-direction: column; gap: var(--spacing-2); }
.sigRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  background: #fff;
}
.sigName { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--navbar-text); }
.sigSrc {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-base);
  padding: 1px 5px;
}
.sigValue { margin-left: auto; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }

/* ==========================================================================
   Insights Chat — empty state, thread and composer.
   ========================================================================== */

.callsTab .clPanel .chatBody { flex: 1 1 auto; min-height: 0; }
.chatBody { justify-content: flex-start; }

.chatEmpty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6) var(--spacing-4);
}
.chatArt { width: 190px; max-width: 70%; height: auto; }
.chatEmptyText {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
}
.chatHint {
  font-size: 11px;
  color: var(--color-text-secondary);
  max-width: 26rem;
  line-height: 1.55;
}
.chatChips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); justify-content: center; }
.chatChip {
  border: 1px solid var(--color-gray-300);
  background: #fff;
  border-radius: var(--radius-full);
  padding: 4px var(--spacing-3);
  font-size: 11px;
  color: var(--color-primary-700);
  cursor: pointer;
}
.chatChip:hover { background: var(--color-primary-50); border-color: var(--color-primary-300); }

.chatComposer {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-border);
  background: #fff;
}
.chatInput {
  flex: 1;
  min-width: 0;
  height: 2.6rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 0 var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none;
}
.chatInput:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(18, 119, 230, 0.12); }
.chatSend {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}
.chatSend:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; }
.chatClear { height: 2.4rem; flex-shrink: 0; }

.chatBody .bubbleText .chatSrc {
  margin-top: var(--spacing-2);
  font-size: 10px;
  color: var(--color-gray-500);
  font-style: italic;
}

/* Compact status pills inside the Call List table. */
.cellPill {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 1px var(--spacing-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.cellPill.ok { background: var(--color-success-50); color: var(--color-success-700); }
.cellPill.warn { background: var(--color-warning-50); color: var(--color-warning-700); }
.cellPill.bad { background: var(--color-error-50); color: var(--color-error-700); }
.cellPill.idle { background: var(--color-gray-100); color: var(--color-gray-600); }

/* ==========================================================================
   Collections Analytics — banner, tab strip, scorecard bars, insight rows.
   ========================================================================== */

.caBanner {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  background: linear-gradient(135deg, #12263f 0%, #1b3a5c 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-4);
  flex-wrap: wrap;
}
.caTitle { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.caSub { font-size: var(--font-size-xs); color: #b9cbe0; margin-top: 2px; }
.caScope { font-size: var(--font-size-xs); color: #b9cbe0; }
.caBanner .btn.ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.caBanner .btn.ghost:hover { background: rgba(255,255,255,0.22); }

.caTabs { display: flex; gap: var(--spacing-2); flex-wrap: wrap; margin-bottom: var(--spacing-4); }
.caTab {
  border: 1px solid var(--color-gray-300);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.caTab:hover { color: var(--color-primary-700); border-color: var(--color-primary-300); }
.caTab.active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff;
  font-weight: var(--font-weight-medium);
}

.scoreRow {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2.2rem;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
}
.scoreLabel { font-size: var(--font-size-xs); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.scoreTrack { height: 14px; background: var(--color-gray-100); border-radius: var(--radius-base); overflow: hidden; }
.scoreFill { height: 100%; border-radius: var(--radius-base); }
.scoreValue { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); text-align: right; font-variant-numeric: tabular-nums; }
.scoreFoot { grid-column: 2 / -1; font-size: 10px; color: var(--color-text-secondary); margin-top: -4px; }

.insightNote {
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-3);
  line-height: 1.5;
}
.insightRow {
  border-left: 3px solid var(--color-gray-300);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-2);
}
.insightRow.ok { border-left-color: var(--color-success-600); }
.insightRow.warnRow { border-left-color: var(--color-warning-500); }
.insightRow.bad { border-left-color: var(--color-error-600); }
.insightRow.info { border-left-color: var(--color-primary-500); }
.insightTitle { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }
.insightBody { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.5; }

/* Heat grid legend. */
.heatWrap svg { max-width: 100%; }
.heatLegend {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  justify-content: center;
  margin-top: var(--spacing-2);
  font-size: 10px;
  color: var(--color-text-secondary);
}
.heatScale { width: 8rem; height: 8px; border-radius: var(--radius-full); display: inline-block; }

/* Treemap, sentiment pills and the data-quality banner. */
.treeWrap svg { width: 100%; display: block; }
.sentPill {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 1px var(--spacing-2);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: lowercase;
}
.sentPill.positive { background: var(--color-success-50); color: var(--color-success-700); }
.sentPill.neutral { background: var(--color-gray-100); color: var(--color-gray-700); }
.sentPill.negative { background: var(--color-error-50); color: var(--color-error-700); }
.warnBanner {
  background: var(--color-warning-50);
  border: 1px solid #f3dfae;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
  color: var(--color-warning-700);
  line-height: 1.6;
}

/* Explore filter bar. */
.exBar { display: flex; flex-wrap: wrap; gap: var(--spacing-2); align-items: center; }
.exBar .control { min-width: 9rem; height: 2.25rem; }
.exBar .dateControl { min-width: 8.5rem; }
.exCheck {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.exCheck input { width: 15px; height: 15px; accent-color: var(--color-primary-500); }

/* Analytics Dashboard banner pills, range chips and the bottom tab strip. */
.adBanner { align-items: flex-start; }
.adPills { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-2); }
.adPill {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 2px var(--spacing-3);
  font-size: 11px;
  color: #dbe7f5;
  white-space: nowrap;
}
.adChips { display: inline-flex; background: rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 3px; gap: 2px; }
.adChip {
  border: none;
  background: transparent;
  color: #cfe0f2;
  border-radius: var(--radius-md);
  padding: 4px var(--spacing-3);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
}
.adChip.active { background: #fff; color: var(--navbar-text); font-weight: var(--font-weight-semibold); }

.adTabs {
  display: flex;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 39, 70, 0.06);
}
.adTab {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  border-left: 1px solid var(--color-border);
  border-top: 2px solid transparent;
  background: transparent;
  padding: var(--spacing-4) var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.adTab:first-child { border-left: none; }
.adTab:hover { color: var(--navbar-text); background: var(--color-gray-50); }
.adTab.active {
  background: #eef5fd;
  color: var(--navbar-text);
  font-weight: var(--font-weight-semibold);
  border-top-color: var(--navbar-text);
}
@media (max-width: 900px) {
  .adTabs { flex-wrap: wrap; }
  .adTab { flex: 1 1 33%; border-top-width: 2px; }
}

/* Dashboard header: icon pills, segmented range control, KPI strip, sticky tabs. */
.adBanner { align-items: flex-start; gap: var(--spacing-4); }
.adHeadLeft { min-width: 0; }
.adHeadRight { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-2); }
.adIcon { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; opacity: 0.85; }
.adPill { display: inline-flex; align-items: center; padding: 4px var(--spacing-3); }

.adChips { background: rgba(255, 255, 255, 0.14); padding: 4px; }
.adChip { padding: 5px var(--spacing-4); font-size: var(--font-size-sm); }
.adCustom { display: flex; gap: var(--spacing-2); }
.adCustom .dateControl { height: 2rem; min-width: 8.5rem; }
.adRefresh { height: 2.25rem; background: var(--color-primary-500); border-color: var(--color-primary-500); }
.adRefresh:hover:not(:disabled) { background: var(--color-primary-600); }

.kpiStripWrap { position: relative; }
.kpiStrip {
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  padding-bottom: var(--spacing-1);
}
.kpiStrip::-webkit-scrollbar { height: 6px; }
.kpiStrip .kpi { flex: 0 0 15rem; }
.stripNav {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 16px;
  color: var(--navbar-text);
  z-index: 2;
}
.stripNav:hover { background: var(--color-primary-50); }

.filterLabel {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  margin-bottom: var(--spacing-2);
}
.adFilter { width: 100%; min-width: 0; height: 2.5rem; }

.adTabs { position: sticky; bottom: 0; margin-top: var(--spacing-4); z-index: 5; }

/* ==========================================================================
   Resonance — QA, compliance and coaching.
   ========================================================================== */

.resBar { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: flex-end; }
.resBar .control { min-width: 9rem; }
.resShowing {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.resShowing .liveDot { background: var(--color-success-600); }

.resTabs {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 4px;
  gap: 2px;
  margin: var(--spacing-4) 0;
}
.resTab {
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.resTab:hover { color: var(--color-primary-700); }
.resTab.active { background: #2b3f74; color: #fff; font-weight: var(--font-weight-semibold); }

.resLink {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-primary-600);
  cursor: pointer;
}
.resLink:hover { text-decoration: underline; }

.resCounts { display: flex; flex-wrap: wrap; }
.resCount { flex: 1 1 10rem; padding: var(--spacing-2) var(--spacing-4); border-left: 1px solid var(--color-border); }
.resCount:first-child { border-left: none; }
.resCountLabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.resCountValue { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }

.scoreBlock { margin-bottom: var(--spacing-4); }
.scoreHead { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: #1f3a68; margin-bottom: var(--spacing-2); }
.targetRow { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 3.4rem; gap: var(--spacing-2); align-items: center; padding: 3px 0; }
.targetName { font-size: 11px; color: var(--color-text-primary); }
.targetTrack { position: relative; height: 15px; background: var(--color-gray-100); border-radius: var(--radius-base); overflow: visible; }
.targetFill { display: block; height: 100%; border-radius: var(--radius-base); }
.targetMark { position: absolute; top: -3px; width: 0; height: 21px; border-left: 1px dashed var(--color-gray-600); }
.targetPct { font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--navbar-text); text-align: right; }

.resCuts { margin-bottom: var(--spacing-3); }

.stackRow { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr 4rem; gap: var(--spacing-2); align-items: center; padding: 4px 0; }
.stackLabel { font-size: 11px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stackTrack { display: flex; height: 20px; background: var(--color-gray-100); border-radius: var(--radius-base); overflow: hidden; }
.stackSeg { display: block; height: 100%; }
.stackTotal { font-size: 11px; color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

.fieldChips { display: flex; flex-wrap: wrap; }

/* Call 360: section rule, timing donut notes, flow stats and proportion bars. */
.resSection { display: flex; align-items: center; gap: var(--spacing-3); margin: var(--spacing-4) 0; }
.resSectionNo {
  width: 1.4rem; height: 1.4rem; border-radius: var(--radius-full);
  background: #2b3f74; color: #fff; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--font-weight-semibold); flex-shrink: 0;
}
.resSectionName {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--navbar-text); text-transform: uppercase; letter-spacing: 0.08em;
}
.resRule { flex: 1; border-top: 1px solid var(--color-border); }
.resSectionPct { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.flowStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-3); }
@media (max-width: 900px) { .flowStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flowValue { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--navbar-text); line-height: 1.1; }
.flowValue.muted { color: var(--color-gray-400); }
.flowLabel { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }

.propRow { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--spacing-3); align-items: start; padding: var(--spacing-3) 0; }
@media (max-width: 900px) { .propRow { grid-template-columns: minmax(0, 1fr); } }
.propLabel { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--navbar-text); padding-top: var(--spacing-2); }
.propTrack { display: flex; height: 42px; border-radius: var(--radius-base); overflow: hidden; background: var(--color-gray-100); }
.propSeg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: var(--font-weight-semibold);
  overflow: hidden; white-space: nowrap;
}
.propLegend { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); margin-top: var(--spacing-2); }
.propKey { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-secondary); }
.propKey strong { color: var(--navbar-text); }

/* Customer 360: ranked bars, headline tiles and the willing-but-unable banner. */
.rankRow { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 3.2rem; gap: var(--spacing-3); align-items: center; padding: 4px 0; }
.rankName { font-size: var(--font-size-xs); color: var(--color-primary-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankTrack { height: 17px; background: var(--color-gray-50); border-radius: var(--radius-base); overflow: hidden; }
.rankFill { display: block; height: 100%; border-radius: var(--radius-base); }
.rankPct { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--navbar-text); text-align: right; }
.rankNote { font-size: 11px; color: var(--color-primary-600); margin-bottom: var(--spacing-2); }

.resCountValue.amber { color: #d97706; }

.willBanner {
  background: #fdf0d0;
  border: 1px solid #f3dfae;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  margin-top: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: #7a5b12;
  line-height: 1.6;
}
.willBanner strong { color: var(--navbar-text); }
.willBanner .resLink { display: inline; margin-left: var(--spacing-2); }

/* Agent 360: banded scorecard, coaching list and themes. */
table.bandTable thead th { background: #fff; text-transform: none; font-size: var(--font-size-xs); color: var(--color-text-secondary); text-align: center; position: static; }
table.bandTable thead th:first-child, table.bandTable thead th:nth-child(2) { text-align: left; }
table.bandTable tbody td { padding: var(--spacing-2) var(--spacing-3); text-align: center; }
table.bandTable .agentName { text-align: right; font-weight: var(--font-weight-medium); color: var(--navbar-text); white-space: nowrap; }
table.bandTable tbody td:nth-child(2) { text-align: left; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.bandCell { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-radius: var(--radius-base); }
.bandCell.good { background: #d9ede4; color: #0b6b48; }
.bandCell.mid { background: #fbf1d8; color: #8a6206; }
.bandCell.bad { background: #f7dcdf; color: #96222f; }
.bandCell.none { background: #fafafa; color: var(--color-gray-500); font-style: italic; }

.coachList { margin: 0; padding-left: var(--spacing-5); }
.coachList li { font-size: var(--font-size-xs); color: var(--color-primary-700); padding: 4px 0; line-height: 1.5; }

.wellRow { display: flex; gap: var(--spacing-3); align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-3); margin-bottom: var(--spacing-2); }
.wellTick { width: 1.4rem; height: 1.4rem; border-radius: var(--radius-full); background: var(--color-success-50); color: var(--color-success-700); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.wellName { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }
.wellSub { font-size: 11px; color: var(--color-text-secondary); }

.themeRow { display: flex; align-items: center; gap: var(--spacing-3); border-bottom: 1px solid var(--color-gray-100); padding: var(--spacing-3) 0; }
.themeRow:last-child { border-bottom: none; }
.themeName { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--navbar-text); }
.themeObs { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.themeRow .resLink { margin: 0 0 0 auto; }

/* ===================== Header campaign selector ===================== */

.campaignSelect { position: relative; }

.campaignPill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  max-width: 20rem;
  padding: 0.3rem 0.55rem 0.3rem 0.35rem;
  background: #e8f1fd;
  border: 1px solid #cfe1f8;
  border-radius: 999px;
  color: #163458;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.campaignPill:hover { background: #dbe9fb; border-color: #b9d5f5; }
.campaignSelect.open .campaignPill { background: #dbe9fb; border-color: #9cc3f0; }

.campaignPillIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: #1c4b8b;
  color: #ffffff;
  flex-shrink: 0;
}
.campaignPillName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaignPillChevron { color: #4a6d99; flex-shrink: 0; }
.campaignSelect.open .campaignPillChevron { transform: rotate(180deg); }

.campaignMenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 23.5rem;
  max-width: calc(100vw - 2rem);
  background: #ffffff;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(15, 39, 70, 0.18);
  overflow: hidden;
  z-index: 60;
}

.campaignMenuHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: #f1f3f5;
  border-bottom: 1px solid var(--navbar-border);
}
.campaignMenuTitle {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.campaignManage {
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: 0.3rem 0.6rem;
  background: #ffffff;
  border: 1px solid #b9d5f5;
  border-radius: var(--radius-md);
  color: #1560c4;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
}
.campaignManage:hover { background: #f2f7fe; border-color: #8fbcee; }

.campaignSearch { position: relative; padding: var(--spacing-3) var(--spacing-4); }
.campaignSearchInput {
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--navbar-text);
  background: #ffffff;
}
.campaignSearchInput:focus {
  outline: none;
  border-color: #8fbcee;
  box-shadow: 0 0 0 3px rgba(21, 96, 196, 0.12);
}
.campaignSearchIcon {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.campaignList { max-height: 17rem; overflow-y: auto; }
.campaignList::-webkit-scrollbar { width: 8px; }
.campaignList::-webkit-scrollbar-thumb {
  background: #c8d2dd;
  border-radius: 4px;
  border: 2px solid #ffffff;
}

.campaignOption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  background: transparent;
  border: none;
  border-top: 1px solid #eef1f4;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.campaignOption:first-child { border-top: none; }
.campaignOption:hover { background: #f6f8fa; }
.campaignOption.active { background: #eaf4fe; }
.campaignOptionName {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--navbar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaignOptionMeta {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.campaignEmpty {
  padding: var(--spacing-5) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.campaignMenuFoot {
  padding: var(--spacing-2) var(--spacing-4);
  background: #fafbfc;
  border-top: 1px solid var(--navbar-border);
  font-size: 11px;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .campaignPill { max-width: 9rem; }
  .campaignMenu { left: auto; right: 0; transform: none; }
}

/* ===================== Published campaigns ===================== */

.pcHead {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-5);
}
.pcBack {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: #ffffff;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-md);
  color: var(--navbar-text);
  cursor: pointer;
  flex-shrink: 0;
}
.pcBack:hover { background: #f2f6fb; border-color: #b9d5f5; }
.pcTitle {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}

.pcSearch { position: relative; }
.pcSearchInput {
  width: 17rem;
  max-width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--navbar-text);
  background: #ffffff;
}
.pcSearchInput:focus {
  outline: none;
  border-color: #8fbcee;
  box-shadow: 0 0 0 3px rgba(21, 96, 196, 0.12);
}
.pcSearchIcon {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.pcGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--spacing-4);
}

.pcCard {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(15, 39, 70, 0.04);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.pcCard:hover { border-color: #b9d5f5; box-shadow: 0 8px 20px rgba(15, 39, 70, 0.08); }

.pcCardTop {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}
.pcStatus {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: #e3f5ea;
  color: #0f7a4d;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
}
.pcStamp {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: #f1f3f5;
  color: var(--color-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}
.pcAction {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: #4a6d99;
  cursor: pointer;
  flex-shrink: 0;
}
.pcAction:hover { background: #eaf4fe; color: #1560c4; }

.pcName {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
  overflow-wrap: anywhere;
}
.pcBlurb {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcMore {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  background: none;
  border: none;
  color: #1560c4;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.pcMore:hover { color: #0f4b9c; }


/* ===================== Campaign workflow canvas ===================== */

/* pulled flush against the navbar so the strip costs the canvas as little
   height as possible; it cancels the page padding on all three sides */
.wfTabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: #ffffff;
  border-bottom: 1px solid var(--navbar-border);
  margin: calc(var(--spacing-6) * -1) calc(var(--spacing-6) * -1) var(--spacing-2);
  padding: 0 var(--spacing-6);
}
.wfBack {
  width: 1.75rem;
  height: 1.75rem;
  margin: var(--spacing-1) 0;
}
.wfTab {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1-5) var(--spacing-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: default;
}
.wfTab.active {
  background: #eef6ff;
  border-bottom-color: #1268c6;
  color: var(--navbar-text);
  font-weight: var(--font-weight-semibold);
}
.wfTabTick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #1268c6;
  color: #ffffff;
}

/* the canvas runs edge to edge: cancel the page padding on three sides and let
   the stage take whatever height is left below the navbar and the tab strip */
.wfCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* cancels the page padding bar a 2px gutter, so the canvas is as good as
     full bleed but still reads as a card rather than running off the window */
  margin: 0 calc(var(--spacing-6) * -1 + 2px) calc(var(--spacing-6) * -1 + 2px);
  /* navbar 4rem + tab strip 2.3rem + its margin 0.5rem, less that gutter */
  height: calc(100vh - 6.85rem - 2px);
  min-height: 26rem;
  border-radius: var(--radius-md);
}
.wfLegend {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.wfStage {
  position: relative;
  /* the head takes what it needs, the stage absorbs the rest */
  flex: 1 1 auto;
  min-height: 0;
  background:
    linear-gradient(180deg, #eef4fb 0%, #f7f8fa 34%),
    radial-gradient(circle at 1px 1px, #dfe3e8 1px, transparent 0);
  background-size: auto, 16px 16px;
  border-top: 1px solid var(--color-border);
}
.wfCanvas {
  overflow: auto;
  height: 100%;
  padding: var(--spacing-3);
  cursor: grab;
}
.wfCanvas.dragging { cursor: grabbing; user-select: none; }
.wfInner { display: inline-block; }
.wfSvg { display: block; }
.wfNode { cursor: default; }
.wfNode:hover rect:first-of-type { stroke: #8fbcee; }

.wfZoom {
  position: absolute;
  left: var(--spacing-4);
  bottom: var(--spacing-4);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 39, 70, 0.1);
}
.wfZoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: #ffffff;
  border: none;
  border-top: 1px solid var(--navbar-border);
  color: var(--navbar-text);
  font-size: var(--font-size-base);
  font-family: inherit;
  cursor: pointer;
}
.wfZoom button:first-child { border-top: none; }
.wfZoom button:hover { background: #eef6ff; color: #1268c6; }

.wfMinimap {
  position: absolute;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  width: 11.5rem;
  /* it sits over the canvas, so let whatever is beneath show through faintly */
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--navbar-border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(15, 39, 70, 0.1);
  padding: var(--spacing-1);
}
.wfMinimap svg { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .wfMinimap { display: none; }
}

/* ===================== AI-to-Human Transfer ===================== */

.thActions { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }

/* the flow stacks by default and goes side by side once there is room, so the
   phone layout is the plain one rather than the exception */
.thFlow {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--spacing-2);
}
.thStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.thStage.live {
  border-color: #8fbcee;
  box-shadow: 0 0 0 3px rgba(21, 96, 196, 0.1);
}
.thGlyph {
  font-size: 26px;
  line-height: 1.1;
}
.thStageName {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--navbar-text);
}

.thLink {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 2rem;
  color: var(--color-gray-400);
}
.thLink.done { color: var(--color-primary-500); }
.thArrow { font-size: 18px; line-height: 1; }
.thLink.moving .thArrow { animation: thPulse 0.9s ease-in-out infinite; }
@keyframes thPulse {
  0%, 100% { opacity: 0.35; transform: translateY(-3px); }
  50% { opacity: 1; transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .thLink.moving .thArrow { animation: none; opacity: 1; }
}

.thResult {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-success-50, #eefaf4);
  border: 1px solid #b7ded0;
  border-radius: var(--radius-lg);
}
.thResultHead {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
}
.thResultBody {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--content-text);
}
.thTo { color: var(--color-success-700); font-weight: var(--font-weight-semibold); }

/* a system line inside a conversation: "human assistance required" and the
   like, sitting in the run of the turns rather than after them */
.chatNote {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-warning-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-warning-700);
  text-align: center;
}

.thSteps { list-style: none; margin: 0; padding: 0; }
.thStep {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid #eef1f4;
}
.thStep:first-child { border-top: none; }
.thStep.done { color: var(--content-text); }
.thStep.now { color: var(--navbar-text); font-weight: var(--font-weight-medium); }
.thMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex-shrink: 0;
}
.thStep.done .thMark { color: var(--color-success-700); }
.thStep.now .thMark { color: var(--color-primary-600); }

.thRules, .thAgents { display: flex; flex-direction: column; }
.thRule, .thAgent {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-top: 1px solid #eef1f4;
}
.thRule:first-child, .thAgent:first-child { border-top: none; }
.thRule { cursor: pointer; }
.thRuleName, .thAgentName {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--content-text);
}

/* no switch component existed, so this is a checkbox wearing one — same input
   the filters use, so keyboard and label behaviour come for free */
.thSwitch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.1rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--color-gray-300);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.thSwitch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition-base);
}
.thSwitch:checked { background: var(--color-primary-500); }
.thSwitch:checked::after { transform: translateX(0.95rem); }
.thSwitch:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

.thAgent.picked { background: #f2f8ff; border-radius: var(--radius-md); }
.thDot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-gray-400);
}
.thDot.ok { background: var(--color-success-500, #16a34a); }
.thDot.busy { background: var(--color-warning-500, #f59e0b); }
.thDot.live { background: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(21, 96, 196, 0.18); }

@media (min-width: 900px) {
  .thFlow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
  }
  .thLink { min-height: 0; padding: 0 var(--spacing-2); }
  /* side by side the hand-off reads left to right, so the arrow turns with it */
  .thArrow { transform: rotate(-90deg); }
  .thLink.moving .thArrow { animation-name: thPulseX; }
  @keyframes thPulseX {
    0%, 100% { opacity: 0.35; transform: rotate(-90deg) translateY(-3px); }
    50% { opacity: 1; transform: rotate(-90deg) translateY(3px); }
  }
}

/* Collections Analytics: the insight strip the payload ships with. */
.caInsights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--spacing-3);
}
.caInsight {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  background: #fff;
}
.caInsight.good { border-left-color: var(--color-success-500, #16a34a); }
.caInsight.warn { border-left-color: var(--color-warning-500, #f59e0b); }
.caInsight.info { border-left-color: var(--color-primary-500); }
.caInsightIcon { font-size: 17px; line-height: 1.3; flex-shrink: 0; }