/* =========================================================================
   ACQUISITION — Client Management → Acquisition (sales-training module).
   Two stacked sections (Trainers roster / Assignments), token-driven.
   ========================================================================= */

/* full-bleed: the page fills the shell's content column (the .projects-page
   wrapper already supplies the gutters) */
.acq-page { max-width: none; }

/* The sections live inside .acq-root (re-created on every render so listeners
   die with the old DOM), so the column gap has to live HERE — on .acq-page it
   only ever spaced that single wrapper, leaving the cards flush together. */
.acq-root {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* markup carries the shared `card card-pad` (components.css) — only the
   tighter workspace padding is local */
.acq-section {
  padding: 18px 20px 6px;
}

.acq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.acq-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-strong);
}
.acq-sub {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 52ch;
}

.acq-list { display: flex; flex-direction: column; }

/* ---- trainer cards ---- */
.acq-tgrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 12px;
}
/* Full-width trainer row-card: identity left, stats centre, actions right —
   collapses to a stack on narrow widths. */
.acq-tcard {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 20px;
}
.acq-tcard--off { opacity: 0.6; }
.acq-tcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acq-tcard-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acq-tcard-id .acq-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stat strip: the numbers that make a trainer card worth looking at */
.acq-tcard-stats {
  display: flex;
  gap: 8px;
  background: var(--surface-sunk);
  border-radius: 10px;
  padding: 8px 6px;
}
.acq-stat {
  min-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-left: 1px solid var(--border-faint);
}
.acq-stat:first-child { border-left: 0; }
.acq-stat b {
  font-size: 17px;
  font-weight: var(--fw-bold, 700);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.acq-stat small { font-size: 11px; color: var(--text-muted); }

.acq-tcard-foot { display: flex; align-items: center; gap: 6px; }
.acq-tcard-foot .spacer { display: none; }   /* grid handles the split now */

@media (max-width: 900px) {
  .acq-tcard { grid-template-columns: 1fr; gap: 12px; }
  .acq-tcard-foot .spacer { display: block; flex: 1; }
  .acq-stat { flex: 1; }
}

/* ---- program rows ---- */
.acq-prow {
  display: grid;
  grid-template-columns: auto minmax(150px, 1.3fr) minmax(120px, 1fr) 120px 120px auto;
  gap: 14px;
  align-items: center;
  padding: 14px 2px;
  border-top: 1px solid var(--border-faint);
}
.acq-prow:first-child { border-top: 0; }
.acq-prow-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acq-prow-prog { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.acq-prog-top {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.acq-prow-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acq-meta-line { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); }
.acq-meta-line svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.acq-meta-sub { font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .acq-prow { grid-template-columns: auto minmax(140px, 1.4fr) minmax(110px, 1fr) 110px auto; }
  .acq-prow-meta { display: none; }
}

.acq-row--off { opacity: 0.55; }

.acq-client-photo { background-size: cover; background-position: center; color: transparent; }

.acq-row-name {
  font-weight: var(--fw-medium, 500);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.acq-row-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acq-row-sub svg { width: 13px; height: 13px; flex: none; opacity: 0.7; }

/* actions ALWAYS visible — no hover-reveal (owner call: nothing in this
   module hides behind a hover) */
.acq-row-actions { flex: none; display: flex; gap: 6px; margin-left: 8px; }
.acq-danger:hover { color: var(--danger-600); }

.acq-pill {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  line-height: var(--leading-none);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.acq-pill--warn  { background: var(--warning-bg); color: var(--warning-600); }
.acq-pill--ended { background: var(--surface-sunk); color: var(--text-muted); }

/* inline status select — compact, auto-saving */
.acq-status {
  flex: none;
  width: auto;
  padding: 6px 10px;
  font-size: var(--text-sm);
}

/* ---- modal form ---- */
.acq-form { display: flex; flex-direction: column; gap: 12px; }
.acq-field { display: flex; flex-direction: column; gap: 5px; }
.acq-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted);
}
.acq-form-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal, 1.5);
}
.acq-pass-result {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-sunk);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
}
.acq-pass-value {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  user-select: all;
}

@media (max-width: 640px) {
  .acq-section { padding: 14px; }
  .acq-head { flex-direction: column; align-items: flex-start; }
  .acq-head .btn { align-self: flex-start; }
  .acq-tgrid { grid-template-columns: 1fr; }
  .acq-prow { grid-template-columns: auto 1fr auto; row-gap: 10px; }
  .acq-prow-prog { grid-column: 2 / -1; }
  .acq-prow .acq-status { grid-column: 2; }
}

/* Assign-a-client picker trigger — input-shaped, shows the picked client's
   logo + name; soft placeholder tone until one is chosen */
.acq-client-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); text-align: left; cursor: pointer; }
.acq-client-btn > svg { flex: none; width: 16px; height: 16px; color: var(--text-soft); }
.acq-client-val { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-soft); min-width: 0; }
.acq-client-btn.has-val .acq-client-val { color: var(--text); }
.acq-client-val .proj-logo { flex: none; }
.acq-client-val > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* first-load skeleton — the page's own silhouette; the shimmer itself is the
   shared .skel (components.css), these classes only shape the placeholders;
   repeat visits skip straight to the cached render */
.acq-skel { display: flex; flex-direction: column; gap: var(--space-5); }
.acq-skel .acq-section { display: flex; flex-direction: column; gap: var(--space-4); }
.acq-skel-head { display: flex; align-items: center; justify-content: space-between; }
.acq-skel-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--surface); }
.acq-skel-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.acq-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.acq-skel-line { height: 12px; border-radius: var(--radius-full); }
.acq-skel-line--dim { opacity: .6; }
.acq-skel-pill { width: 120px; height: 32px; border-radius: var(--radius-md); flex: 0 0 auto; }
.acq-skel-btn { width: 110px; height: 34px; border-radius: var(--radius-md); }