@layer lf-components {
/* Phase 2 visual bridge: campaigns, proposals, CRM and pipeline surfaces. */
:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-hero-card,
  .campaign-flow-map,
  .campaign-step-shell,
  .campaign-studio,
  .campaign-approval-card,
  .campaign-calendar-card,
  .campaign-metric-card,
  .campaign-performance-card,
  .campaign-referral-card,
  .campaign-ops-card,
  .campaign-kpi-card,
  .campaign-channel-status-card,
  .campaign-week-plan-card,
  .campaign-network-panel,
  .campaign-draft-box,
  .campaign-progress-card,
  .campaign-progress-overview,
  .campaign-progress-insight,
  .campaign-track-card,
  .campaign-lane-card,
  .campaign-op-card,
  .campaign-channel-card,
  .campaign-chart-box,
  .proposal-toolbar-card,
  .proposal-metric-card,
  .proposal-card,
  .proposal-stage-card,
  .crm-surface-card,
  .crm-panel,
  .company-metric-card,
  .company-card,
  .company-stage-card,
  .workspace-surface-stat-card,
  .workspace-surface-action-card,
  .workspace-connection-card,
  .workspace-surface-checklist
) ) {
  min-width: 0;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-hero-card,
  .campaign-studio,
  .campaign-flow-map,
  .proposal-toolbar-card,
  .crm-surface-card
) ) {
  padding: var(--lf-space-5);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-metric-card,
  .campaign-kpi-card,
  .proposal-metric-card,
  .company-metric-card,
  .workspace-surface-stat-card
) ) {
  min-height: 112px;
  padding: var(--lf-space-4);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-flow-head,
  .campaign-card-header,
  .campaign-network-head,
  .campaign-calendar-head,
  .campaign-performance-head,
  .campaign-referral-head,
  .campaign-ops-head,
  .proposal-card-header,
  .company-card-header
) ) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lf-space-3);
  padding: 0;
  border-bottom-color: var(--lf-color-border);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-hero-title,
  .campaign-flow-head h3,
  .campaign-step-shell h3,
  .campaign-card-header h3,
  .campaign-network-head h3,
  .campaign-calendar-head h3,
  .campaign-performance-head h3,
  .campaign-referral-head h3,
  .campaign-ops-head h3,
  .campaign-metric-copy strong,
  .campaign-kpi-card strong,
  .proposal-page-title,
  .proposal-toolbar-copy h2,
  .proposal-card-header h3,
  .proposal-metric-copy strong,
  .company-card h3,
  .company-stage-card strong,
  .pipeline-lane-header strong
) ) {
  color: var(--lf-color-text);
  letter-spacing: 0;
}

:where(body.dashboard-client-flat-theme > .shell .campaign-hero-title ) {
  font-size: clamp(32px, 3.1vw, 44px);
  line-height: var(--lf-line-tight);
  font-weight: var(--lf-font-weight-900);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-hero-copy,
  .campaign-flow-head p,
  .campaign-step-shell p,
  .campaign-card-header p,
  .campaign-network-head p,
  .campaign-calendar-head p,
  .campaign-performance-head p,
  .campaign-referral-head p,
  .campaign-ops-head p,
  .campaign-metric-copy span,
  .campaign-metric-copy small,
  .campaign-kpi-card span,
  .proposal-toolbar-copy p,
  .proposal-card-header a,
  .proposal-metric-copy span,
  .proposal-metric-copy small,
  .company-card p,
  .company-stage-card small,
  .pipeline-lane-header span,
  .pipeline-ticket small
) ) {
  color: var(--lf-color-muted);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-btn,
  .campaign-btn-secondary,
  .campaign-btn-ghost,
  .campaign-anchor,
  .campaigns-action-btn,
  .campaign-network-tab,
  .campaign-panel-tab,
  .proposal-topbar-button,
  .proposal-toolbar-button,
  .proposal-open-button,
  .proposal-pagination-current,
  .proposal-pagination-page,
  .company-toolbar-button--compact
) ) {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lf-space-2);
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-text);
  box-shadow: none;
  font-size: var(--lf-font-size-sm);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-btn:hover,
  .campaign-btn-secondary:hover,
  .campaign-btn-ghost:hover,
  .campaign-anchor:hover,
  .campaign-network-tab:hover,
  .campaign-panel-tab:hover,
  .proposal-topbar-button:hover,
  .proposal-toolbar-button:hover,
  .proposal-open-button:hover,
  .proposal-pagination-page:hover,
  .company-toolbar-button--compact:hover
) ) {
  border-color: var(--lf-color-border-strong);
  background: var(--lf-color-surface);
  color: var(--lf-color-primary);
  transform: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-btn-primary,
  .campaign-anchor.is-primary,
  .campaigns-action-btn--primary,
  .proposal-toolbar-button--primary,
  .campaign-network-tab.is-active,
  .campaign-panel-tab.is-active
) ) {
  border-color: transparent;
  background: var(--lf-color-primary);
  color: var(--lf-color-on-primary);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-field input,
  .campaign-field select,
  .campaign-field textarea,
  .campaign-draft-box input,
  .campaign-draft-box textarea,
  .proposal-topbar-search,
  .proposal-topbar-search input,
  .proposal-table-search,
  .proposal-table-search input,
  .company-table-search,
  .company-table-search input
) ) {
  min-height: 42px;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
  font-size: var(--lf-font-size-sm);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-field input,
  .campaign-field select,
  .campaign-field textarea,
  .campaign-draft-box input,
  .campaign-draft-box textarea,
  .proposal-topbar-search input,
  .proposal-table-search input,
  .company-table-search input
):focus ) {
  border-color: var(--lf-color-primary);
  box-shadow: var(--lf-focus-ring);
  outline: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-eyebrow,
  .campaign-status,
  .campaign-approval-status,
  .campaign-tag,
  .campaign-progress-tag,
  .campaign-step-badge,
  .campaign-progress-kicker,
  .proposal-header-badge,
  .proposal-toolbar-badge,
  .proposal-status-pill,
  .pipeline-ticket-chip
) ) {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: var(--lf-space-1);
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--lf-color-primary) 18%, transparent);
  border-radius: var(--lf-radius-pill);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0;
  text-transform: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-status.is-ready,
  .campaign-approval-status.is-approved,
  .proposal-status-pill.is-won,
  .proposal-status-pill.is-approved
) ) {
  border-color: color-mix(in srgb, var(--lf-color-success) 22%, transparent);
  background: color-mix(in srgb, var(--lf-color-success) 10%, transparent);
  color: var(--lf-color-success);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-status.is-missing,
  .campaign-approval-status.is-pending,
  .proposal-status-pill.is-pending
) ) {
  border-color: color-mix(in srgb, var(--lf-color-warning) 26%, transparent);
  background: color-mix(in srgb, var(--lf-color-warning) 12%, transparent);
  color: var(--lf-color-warning);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .campaign-progress-dot,
  .campaign-kpi-icon,
  .campaign-metric-icon,
  .proposal-metric-icon,
  .proposal-topbar-icon,
  .proposal-toolbar-icon,
  .company-metric-icon,
  .pipeline-data-icon
) ) {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--lf-color-primary) 18%, transparent);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell .campaign-progress-meter ) {
  background: var(--lf-color-surface-muted);
}

:where(body.dashboard-client-flat-theme > .shell .campaign-progress-meter::before ) {
  background: var(--lf-color-primary);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.campaign-day, .campaign-calendar-label, .proposal-task-row) ) {
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-text);
}

:where(body.dashboard-client-flat-theme > .shell .campaign-day.is-today ) {
  border-color: color-mix(in srgb, var(--lf-color-primary) 22%, transparent);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
}

:where(body.dashboard-client-flat-theme > .shell :is(.proposal-table-shell, .campaign-table-modern) ) {
  overflow: auto;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.proposal-table, .campaign-table-modern table) ) {
  width: 100%;
  border-collapse: collapse;
}

:where(body.dashboard-client-flat-theme > .shell :is(.proposal-table th, .proposal-table td, .campaign-table-modern th, .campaign-table-modern td) ) {
  padding: var(--lf-space-3) var(--lf-space-4);
  border-bottom: 1px solid var(--lf-color-border);
}

:where(body.dashboard-client-flat-theme > .shell :is(.proposal-table th, .campaign-table-modern th) ) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell #sales-pipeline :is(.pipeline-board, .pipeline-lanes) ) {
  gap: var(--lf-space-4);
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell :is(.pipeline-panel-clean, .pipeline-data-card, #sales-pipeline .pipeline-lane, #sales-pipeline .pipeline-ticket) ) {
  min-width: 0;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell :is(.pipeline-panel-clean, .pipeline-data-card) ) {
  padding: var(--lf-space-5);
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell .pipeline-data-card ) {
  min-height: 112px;
  padding: var(--lf-space-4);
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell .pipeline-lane-header ) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lf-space-3);
  padding: 0;
  border-bottom-color: var(--lf-color-border);
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell #sales-pipeline .pipeline-lane ) {
  padding: var(--lf-space-4);
}

:where(body.dashboard-client-flat-theme:not(.leads-page) > .shell #sales-pipeline .pipeline-ticket ) {
  padding: var(--lf-space-4);
  border-radius: var(--lf-radius-md);
}

:where(body.dashboard-client-flat-theme > .shell :is(.campaign-chart-box canvas, .proposal-line-chart svg) ) {
  max-width: 100%;
}

/* Shared education workspace layout. Courses and students use the same surface. */
:where(body.leads-page > .shell .workspace-surface-shell ) {
  min-width: 0;
}

:where(body.leads-page > .shell .workspace-surface-grid ) {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: var(--lf-space-5);
}

:where(body.leads-page > .shell :is(.workspace-surface-main, .workspace-surface-side) ) {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:where(body.leads-page > .shell .workspace-surface-main,
body.leads-page > .shell .workspace-surface-side,
body.leads-page > .shell .workspace-surface-connection-grid ) {
  display: grid;
  gap: var(--lf-space-4);
}

:where(body.leads-page > .shell .workspace-surface-header ) {
  display: grid;
  gap: var(--lf-space-2);
  max-width: 900px;
}

:where(body.leads-page > .shell .workspace-surface-header .hero-eyebrow ) {
  color: var(--lf-color-primary);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-700);
  line-height: var(--lf-line-normal);
  text-transform: uppercase;
}

:where(body.leads-page > .shell .workspace-surface-title ) {
  margin: 0;
  color: var(--lf-color-text);
  font-size: var(--lf-font-size-xl);
  font-weight: var(--lf-font-weight-700);
  line-height: 1.25;
}

:where(body.leads-page > .shell .workspace-surface-copy ) {
  margin: 0;
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-md);
  line-height: 1.6;
}

:where(body.leads-page > .shell :is(.workspace-surface-stat-grid, .workspace-surface-action-grid) ) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lf-space-3);
}

:where(body.leads-page[data-company-theme] > .shell :is(
  .workspace-surface-stat-card,
  .workspace-surface-action-card,
  .workspace-connection-card,
  .workspace-surface-checklist
) ) {
  min-width: 0;
  border-radius: var(--lf-radius-sm);
}

:where(body.leads-page > .shell .workspace-surface-stat-card ) {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: var(--lf-space-1);
  padding: var(--lf-space-4);
}

:where(body.leads-page > .shell .workspace-surface-stat-label ) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-700);
  line-height: var(--lf-line-normal);
}

:where(body.leads-page > .shell .workspace-surface-stat-card strong ) {
  color: var(--lf-color-text);
  font-size: 28px;
  font-weight: var(--lf-font-weight-700);
  line-height: 1.1;
}

:where(body.leads-page > .shell .workspace-surface-stat-card small ) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  line-height: var(--lf-line-normal);
}

:where(body.leads-page > .shell .workspace-surface-action-card ) {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--lf-space-4);
  padding: var(--lf-space-4);
}

:where(body.leads-page > .shell :is(.workspace-surface-action-copy, .workspace-connection-copy) ) {
  display: grid;
  gap: var(--lf-space-2);
}

:where(body.leads-page > .shell :is(.workspace-surface-action-copy h4, .workspace-connection-copy h4) ) {
  margin: 0;
  color: var(--lf-color-text);
  font-size: var(--lf-font-size-lg);
  font-weight: var(--lf-font-weight-700);
  line-height: 1.35;
}

:where(body.leads-page > .shell :is(.workspace-surface-action-copy p, .workspace-connection-copy p) ) {
  margin: 0;
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-sm);
  line-height: 1.55;
}

:where(body.leads-page > .shell .workspace-surface-action-links ) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lf-space-2);
}

:where(body.leads-page > .shell .workspace-surface-action-links .integration-quick-button ) {
  flex: 1 1 112px;
}

:where(body.leads-page > .shell .workspace-connection-card ) {
  display: grid;
  gap: var(--lf-space-3);
  padding: var(--lf-space-4);
}

:where(body.leads-page > .shell .workspace-connection-head ) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lf-space-2);
}

:where(body.leads-page > .shell .workspace-connection-mark ) {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--lf-radius-sm);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-700);
}

:where(body.leads-page > .shell .workspace-surface-checklist ) {
  display: grid;
  gap: var(--lf-space-3);
  padding: var(--lf-space-4);
}

:where(body.leads-page > .shell .workspace-surface-checklist-head h4 ) {
  margin: 0;
  color: var(--lf-color-text);
  font-size: var(--lf-font-size-md);
  font-weight: var(--lf-font-weight-700);
}

:where(body.leads-page > .shell .workspace-surface-checklist-list ) {
  display: grid;
}

:where(body.leads-page > .shell .workspace-surface-checklist-item ) {
  display: grid;
  gap: var(--lf-space-1);
  padding: var(--lf-space-3) 0;
  border-top: 1px solid var(--lf-color-border);
}

:where(body.leads-page > .shell .workspace-surface-checklist-item strong ) {
  color: var(--lf-color-text);
  font-size: var(--lf-font-size-sm);
  font-weight: var(--lf-font-weight-700);
  line-height: var(--lf-line-normal);
}

:where(body.leads-page > .shell .workspace-surface-checklist-item p ) {
  margin: 0;
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  line-height: 1.5;
}

@media (max-width: 1180px) {
  :where(body.leads-page > .shell .workspace-surface-grid ) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(body.leads-page > .shell .workspace-surface-side ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :where(body.leads-page > .shell :is(
    .workspace-surface-stat-grid,
    .workspace-surface-action-grid,
    .workspace-surface-side
  ) ) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(body.leads-page > .shell .workspace-surface-title ) {
    font-size: var(--lf-font-size-xl);
  }

  :where(body.leads-page > .shell .workspace-surface-action-card ) {
    min-height: 0;
  }
}
}