/* =========================================================================
   views/client-performance.css — Client Performance — the cross-client leaderboard
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* =========================================================================
   CLIENT PERFORMANCE — the cross-client leaderboard (Clients → analytics view).
   Reuses .table-card / .ctable / .segmented; adds the health chips, deltas,
   sparklines, summary KPIs, and skeleton.
   ========================================================================= */
.cperf { display: flex; flex-direction: column; }

/* top bar: title + range + needs-attention toggle */
.cperf-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cperf-title { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cperf-bar-r { display: flex; align-items: center; gap: var(--space-2); }
.cperf-range button { padding: 6px 12px; }
.cperf-att.active { color: var(--primary-600); border-color: var(--primary-200); background: var(--primary-50); }

/* summary KPI band */
.cperf-summary { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cperf-kpi { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 92px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cperf-kpi-v { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: var(--fw-bold); color: var(--text-strong); }
.cperf-kpi-l { font-size: 12px; color: var(--text-muted); }
.cperf-kpi-red .cperf-kpi-v { color: var(--danger-600); }
.cperf-kpi-amber .cperf-kpi-v { color: var(--warning-600); }
.cperf-kpi-green .cperf-kpi-v { color: var(--success-600); }
.cperf-kchip { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 600; }
.cperf-kchip svg { width: 12px; height: 12px; }
.cperf-kchip.up { color: var(--success-600); }
.cperf-kchip.down { color: var(--danger-600); }

/* table — 6 columns: Client | Health | Leads | Change | Trend | Last lead.
   The card scrolls horizontally instead of crushing cells on narrow viewports
   (this view also ships inside the iOS WKWebView). */
.cperf-card { overflow-x: auto; overflow-y: hidden; }
.cperf-table { min-width: 640px; }
.cperf-th { cursor: pointer; user-select: none; }
.cperf-th.cperf-sorted .th-inner { color: var(--primary-600); }
.cperf-table th:nth-child(1) { width: 28%; }  /* Client */
.cperf-table th:nth-child(2) { width: 15%; }  /* Health */
.cperf-table th:nth-child(3) { width: 13%; }  /* Leads */
.cperf-table th:nth-child(4) { width: 14%; }  /* Change */
.cperf-table th:nth-child(5) { width: 16%; }  /* Trend */
.cperf-table th:nth-child(6) { width: 14%; }  /* Last lead */
.cperf-muted { color: var(--text-muted); }

/* client cell */
.cperf-client { display: flex; align-items: center; gap: 10px; }
.cperf-logo { width: 30px; height: 30px; border-radius: var(--radius-md); font-size: 13px; }
.cperf-cwrap { display: flex; flex-direction: column; min-width: 0; }
.cperf-name { font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.cperf-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.cperf-sub-red { color: var(--danger-600); }
.cperf-sub-amber { color: var(--warning-600); }

/* health chip */
.cperf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; }
.cperf-chip b { font-weight: var(--fw-bold); }
.cperf-chip-green { color: var(--success-600); background: var(--success-bg); }
.cperf-chip-amber { color: var(--warning-600); background: var(--warning-bg); }
.cperf-chip-red { color: var(--danger-600); background: var(--danger-bg); }
.cperf-chip-nodata, .cperf-chip-unlinked { color: var(--text-muted); background: var(--gray-100); }
/* deliberate client-requested pause — informational blue, NOT a warning */
.cperf-chip-paused { color: var(--info-600); background: var(--info-bg); }
.cperf-kpi-paused .cperf-kpi-v { color: var(--info-600); }
.cperf-sub-paused { color: var(--text-muted); }

/* delta badge */
.cperf-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-sm); font-weight: 600; }
.cperf-delta svg { width: 13px; height: 13px; }
.cperf-delta-up { color: var(--success-600); }
.cperf-delta-down { color: var(--danger-600); }
.cperf-delta-new { color: var(--primary-600); }
/* short-range (1d/3d) absolute badge — "3 vs 1"; flat = no movement either way */
.cperf-delta-abs { font-weight: 500; }
.cperf-delta-flat { color: var(--text-muted); }

/* sparkline */
.cperf-spark .cperf-svg { display: block; }
.cperf-svg-up { color: var(--success-600); }
.cperf-svg-down { color: var(--text-muted); }

/* empty / none */
.cperf-empty { padding: var(--space-6) var(--space-4); text-align: center; }
.cperf-empty h3 { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: 6px; }
.cperf-empty p { font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; margin: 0 auto; line-height: var(--leading-relaxed); }
.cperf-none { text-align: center; color: var(--text-muted); }

/* loading skeleton — the shimmer itself is the shared .skel (components.css);
   these classes only shape the placeholder row (logo / line / pill). */
.cperf-skwrap { display: flex; flex-direction: column; gap: 14px; padding: var(--space-4); }
.cperf-sk-row { display: flex; align-items: center; gap: 12px; }
.cperf-sk-logo { width: 30px; height: 30px; border-radius: var(--radius-md); flex: 0 0 auto; }
.cperf-sk-line { flex: 1; height: 12px; }
.cperf-sk-pill { width: 80px; height: 20px; border-radius: 999px; flex: 0 0 auto; }