/* client-pages.css  -  Phase E
 * ----------------------------------------------------------------------
 * Small extension layer for components/client-pages.js. The bulk of the
 * shell is already styled by components/canonical-render.css: .cnl-root,
 * .cnl-header, .cnl-title, .pg-section-tile, .cnl-table, .cnl-empty,
 * .cnl-error, .cnl-toast, .cnl-badge.cnl-enum, .cnl-detail-* are all
 * reused as-is. The CSS below adds only the bits that did not exist
 * yet: form primitives for the Lead routing tile, and a Back link
 * styled to the .pg-primary-switcher tier so it sits on the same row
 * as the lens switcher without inventing a new control tier.
 *
 * No hex literals. Tokens only.
 */

/* ---------- Back link (primary-switcher tier instance) ---------- */

.cp-back-link {
  text-decoration: none;
  color: var(--text-secondary);
  gap: var(--space-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.cp-back-link svg {
  width: 0.875rem;
  height: 0.875rem;
}
.cp-back-link:hover {
  color: var(--text-primary);
  border-color: var(--focus-ring);
}
.cp-back-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Form (Lead routing tile body) ---------- */

.cp-tile-body {
  /* Override the canonical .pg-section-tile-body max-height for surfaces
     that host scrolling forms / tables; the inner table / form already
     owns its own scroll affordance. */
  max-height: none;
  overflow: visible;
}

.cp-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 32rem;
}

.cp-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cp-form-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.cp-form-optional {
  color: var(--text-tertiary);
  font-weight: var(--fw-regular, 400);
  font-size: var(--fs-xs);
  margin-left: var(--space-xs);
}

.cp-form-input {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  height: 2.5rem;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.cp-form-input:hover {
  border-color: var(--focus-ring);
}
.cp-form-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-ring);
}
.cp-form-input::placeholder {
  color: var(--text-tertiary);
}

.cp-form-help {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: var(--lh-relaxed);
}
.cp-form-help code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 0 var(--space-2xs, 4px);
  border-radius: var(--radius-sm);
  background: var(--surface-raised-bg);
  color: var(--text-secondary);
}

.cp-form-loading {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  padding: var(--space-md) 0;
}

.cp-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}

.cp-form-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  height: 2.25rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.cp-form-submit:hover {
  background: var(--accent);
  color: var(--surface-card-bg);
}
.cp-form-submit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cp-form-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.cp-form-status {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cp-form-status-pending { color: var(--text-secondary); }
.cp-form-status-ok      { color: var(--status-ok); }
.cp-form-status-error   { color: var(--status-danger); }

/* ---------- Overview page (Phase F / DISPATCH-FRANKENSTEIN Overview) ---------- */

/* Vertical rhythm between successive .pg-section-tile sections inside
   one cnl-root. The Settings + Leads + Detail pages each render a
   single tile so they never needed this; Overview renders two. */
.cnl-root > .pg-section-tile + .pg-section-tile {
  margin-top: var(--space-lg);
}

.cp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.cp-kpi-grid-1 { grid-template-columns: 1fr; }
.cp-kpi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .cp-kpi-grid,
  .cp-kpi-grid-3,
  .cp-kpi-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cp-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
}

.cp-kpi-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cp-kpi-value {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.1;
  word-break: break-word;
}

.cp-kpi-sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: var(--lh-relaxed);
}

.cp-activity-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: end;
  padding: var(--space-md) 0 0;
}

.cp-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs, 4px);
}

.cp-strip-bar-track {
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cp-strip-bar {
  width: 60%;
  background: var(--accent);
  border-radius: var(--radius-sm);
  min-height: 2px;
  transition: background var(--duration-fast) var(--ease-out);
}

.cp-strip-bar-empty {
  background: var(--surface-card-border);
}

.cp-strip-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.cp-tile-footer-link {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

.cp-tile-see-all {
  appearance: none;
  background: transparent;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--space-2xs, 4px) var(--space-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.cp-tile-see-all:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.cp-tile-see-all:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Skeleton layout wrappers (DISPATCH-LEADS-PAGE-CONSOLIDATION
   Phase 2). The .pg-skeleton-* primitives from canonical-render.css supply
   the token-driven placeholder shimmer; these wrappers position them in
   grids and table-like rows to match the final layout shape. No raw
   colors or pixel sizes. ---------- */

.cp-skeleton-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

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

.cp-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.cp-skeleton-row {
  display: grid;
  grid-template-columns: repeat(var(--cp-skeleton-cols, 5), minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: center;
}

.cp-skeleton-cell {
  height: 0.75rem;
}

/* ---------- Filter chips above the Recent leads table ---------- */

.cp-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.cp-filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--space-2xs, 4px) var(--space-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.cp-filter-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.cp-filter-chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cp-filter-chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.cp-filter-chip-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.cp-filter-chip-active .cp-filter-chip-count {
  color: var(--accent);
}

/* ---------- Insights mini-table ---------- */

.cp-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-insight-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  background: var(--surface-card-bg);
}

.cp-insight-chip {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2xs, 4px) var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--surface-raised-bg);
  border: 1px solid var(--surface-card-border);
}
.cp-insight-chip-pattern  { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.cp-insight-chip-learning { color: var(--status-warn, var(--accent)); }

.cp-insight-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-insight-confidence {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Lead detail slide-out (sibling under cnl-root) ---------- */

.cp-slideout-hd {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--surface-card-border);
}

.cp-slideout-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-slideout-hd-extras {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.cp-slideout-full-profile {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2xs, 4px) var(--space-sm);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.cp-slideout-full-profile:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
.cp-slideout-full-profile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cp-slideout-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.cp-slideout-close:hover {
  background: var(--surface-raised-bg);
  color: var(--text-primary);
}
.cp-slideout-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cp-slideout-close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.cp-slideout-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cp-slideout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-slideout-section-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cp-slideout-diagnostic details summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2xs, 4px) 0;
}
.cp-slideout-diagnostic details[open] summary {
  margin-bottom: var(--space-sm);
}

.cp-slideout-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--surface-card-border);
  background: var(--surface-card-bg);
}

.cp-slideout-promote {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.cp-slideout-promote:hover:not(:disabled) {
  background: var(--accent-bright, var(--accent));
}
.cp-slideout-promote:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cp-slideout-promote:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}