/* ── Targets (account targeting engine, js/targets.js) ─────────────────────
   CRM → Targets sub-tab, the "Account plan" card on company records and the
   "Top targets this week" dashboard card. Token-only colours so dark mode
   (css/dark.css flips the semantic layer) needs no overrides here. */

.tg-view { max-width: none; padding-bottom: 90px; }
.tg-toolbar { row-gap: 10px; }
.tg-body { position: relative; min-height: 120px; }

/* Segmented control: Targets · Chains · Quiet accounts */
.tg-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 999px;
  flex-shrink: 0;
}
.tg-seg-btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tg-seg-btn:hover { color: var(--text-primary); }
.tg-seg-btn.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff; box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.28);
}
.tg-seg-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Context line above a list ("Ranking for Midea · in F.W. Webb") */
.tg-context {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: -4px 0 12px; font-size: 13px; color: var(--text-secondary);
}
.tg-link-btn {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--brand-primary); font-weight: 600; text-align: left;
}
.tg-link-btn:hover { text-decoration: underline; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.tg-table-card { margin-top: 0; }
.tg-table { min-width: 1080px; }
.tg-table-chains { min-width: 980px; }
.tg-table-quiet { min-width: 920px; }
.tg-table thead th { cursor: default; }
.tg-table thead th:hover { color: var(--text-tertiary); background: var(--bg-elevated); }
.tg-table thead th.num, .tg-table td.num { text-align: right; }
.tg-table tbody tr.tg-row { cursor: default; }
.tg-table tbody tr.tg-row-chain { cursor: pointer; }
.tg-table tbody tr:hover .crm-td-name { color: inherit; }
/* main.css clips every td to one nowrap line; these cells hold wrapped chips,
   two-line titles and plan text. */
.tg-table td.crm-td { vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.tg-table td.crm-td.num, .tg-table td.tg-td-actions { white-space: nowrap; }
.tg-td-rank { color: var(--text-tertiary); font-family: var(--font-display); font-weight: 600; }
.tg-td-main { min-width: 200px; }
.tg-name {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-weight: 600; color: var(--text-primary); text-align: left; line-height: 1.3;
}
button.tg-name:hover { color: var(--brand-primary); }
.tg-loc { font-weight: 500; color: var(--text-secondary); }
.tg-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.tg-money { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.tg-chain-link { color: var(--text-primary); font-weight: 500; }
.tg-chain-link:hover { color: var(--brand-primary); }
.tg-td-reasons { min-width: 260px; max-width: 440px; }
.tg-why { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); white-space: normal; }
.tg-td-next { min-width: 150px; max-width: 240px; }
.tg-td-actions { white-space: nowrap; }
.tg-th-actions { width: 1%; }
.tg-actions { display: inline-flex; gap: 4px; }
.tg-actions .btn-sm { padding: 4px 9px; }
.tg-near { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.tg-near .tg-link-btn { color: var(--text-primary); font-weight: 500; }
.tg-near .tg-link-btn:hover { color: var(--brand-primary); }

/* Score badge: hot ≥ 70 · warm 40–69 · cool < 40 */
.tg-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .2px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.tg-score-hot  { background: rgba(var(--status-success-rgb, 34,197,94), 0.16); color: var(--status-success, #22c55e); }
.tg-score-warm { background: rgba(245,158,11,0.18); color: var(--status-warning, #f59e0b); }
.tg-score-cool { background: rgba(var(--brand-primary-rgb), 0.08); color: var(--text-secondary); }

/* Reason / line / state chips */
.tg-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-reason, .tg-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1.5;
  background: rgba(var(--brand-primary-rgb), 0.08); color: var(--text-secondary);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.10);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tg-reason-neg { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.14); color: var(--status-danger); }
.tg-chip-white { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.25); color: var(--status-warning); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: 10px; vertical-align: middle; }
.tg-chip-overdue { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.2); color: var(--status-danger); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: 10px; }

/* Pipeline badge tints (reuses .crm-type-badge geometry) */
.tg-pipe-not-contacted { background: rgba(100,116,139,0.14); color: var(--text-secondary); }
.tg-pipe-reached-out   { background: rgba(var(--brand-primary-rgb), 0.12); color: var(--brand-primary); }
.tg-pipe-engaged       { background: rgba(var(--brand-secondary-rgb), 0.14); color: var(--brand-secondary); }
.tg-pipe-active        { background: rgba(var(--status-success-rgb, 34,197,94), 0.14); color: var(--status-success, #22c55e); }
.tg-pipe-inactive      { background: rgba(239,68,68,0.10); color: var(--status-danger); }

/* Owner initials */
.tg-owner { display: inline-flex; align-items: center; }
.tg-owner-none { color: var(--text-tertiary); }

/* Next action + due */
.tg-next { display: flex; flex-direction: column; gap: 1px; }
.tg-next-text { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tg-next-due { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.tg-overdue { color: var(--status-danger) !important; font-weight: 700; }
.tg-silence { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }

/* Buying "13 of 128" + thin progress bar (Chains pane) */
.tg-td-buying { min-width: 130px; }
.tg-buying { display: block; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.tg-bar { display: block; height: 4px; border-radius: 999px; background: rgba(var(--brand-primary-rgb), 0.12); overflow: hidden; max-width: 140px; }
.tg-bar-fill {
  display: block; height: 100%; border-radius: 999px; min-width: 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  transition: width var(--dur-slow) var(--ease-out);
}
.tg-td-lines { max-width: 260px; }
.tg-td-states { max-width: 220px; font-size: 12px; color: var(--text-secondary); }

/* ── Inline "Plan…" editor ───────────────────────────────────────────────── */
.tg-plan-row td { padding: 0 14px 14px; background: var(--bg-elevated); border-top: 0; white-space: normal; overflow: visible; max-width: none; }
.tg-plan-row td::after { display: none; }
.tg-plan {
  display: grid; grid-template-columns: 180px 160px minmax(220px, 1fr) 160px auto;
  gap: 12px; align-items: end; padding: 14px 16px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.tg-plan .form-group { margin: 0; min-width: 0; }
.tg-plan-btns { display: flex; gap: 6px; align-items: center; }
.tg-plan-btns-card { margin: 10px 0 14px; }
.tg-table .tg-plan .form-input, .tg-table .tg-plan .form-select { height: 36px; }

/* ── Empty / error ───────────────────────────────────────────────────────── */
.tg-empty { background: var(--bg-surface); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }
.tg-empty-icon { color: var(--brand-primary); }
.tg-empty-icon .ui-icon { width: 36px; height: 36px; }
.tg-empty .btn { margin-top: 2px; }

/* ── Company record: Account plan card ───────────────────────────────────── */
.tg-plan-card .rec-field-v .form-input, .tg-plan-card .rec-field-v .form-select { margin-top: 2px; }
.tg-rollups { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.tg-rollups .rec-field { padding: 6px 0; }
.tg-hint {
  margin-top: 12px; padding: 12px; border-radius: var(--radius-md);
  background: rgba(var(--brand-primary-rgb), 0.05); border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  display: flex; flex-direction: column; gap: 8px;
}
.tg-hint-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-hint-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); flex: 1; }
.tg-hint .tg-reasons .tg-reason { white-space: normal; }
.tg-hint .tg-why { font-size: 13px; color: var(--text-primary); }

/* ── Dashboard card ──────────────────────────────────────────────────────── */
.tg-dash-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tg-dash-list { max-height: none; }
.tg-dash-row { cursor: pointer; }
.tg-dash-row:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.tg-dash-quiet {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px;
  border-radius: var(--radius-md); cursor: pointer; font-size: 13px; color: var(--text-primary);
  background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.25);
  transition: background var(--dur-fast) ease;
}
.tg-dash-quiet .ui-icon { color: var(--status-warning); flex-shrink: 0; }
.tg-dash-quiet:hover { background: rgba(245,158,11,0.16); }
.tg-dash-quiet-ok { background: rgba(var(--status-success-rgb, 34,197,94), 0.08); border-color: rgba(var(--status-success-rgb, 34,197,94), 0.2); color: var(--text-secondary); }
.tg-dash-quiet-ok .ui-icon { color: var(--status-success, #22c55e); }
.tg-dash-quiet:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tg-plan { grid-template-columns: 1fr 1fr; }
  .tg-plan .tg-plan-wide { grid-column: 1 / -1; }
  .tg-plan-btns { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Under 720px the tables collapse to stacked cards: each cell becomes a
   label/value line (label from data-label), the name cell is the card title
   and the actions wrap underneath. */
@media (max-width: 720px) {
  .tg-view { padding: 12px 12px 90px; }
  .tg-toolbar .crm-type-select { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .tg-toolbar .crm-toolbar-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tg-seg { width: 100%; }
  .tg-seg-btn { flex: 1; padding: 6px 8px; font-size: 12px; }
  .tg-table-card { background: transparent; border: 0; box-shadow: none; }
  .tg-table-card .table-wrap { overflow: visible; }
  .tg-table, .tg-table-chains, .tg-table-quiet { min-width: 0; display: block; }
  .tg-table thead { display: none; }
  .tg-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .tg-table tbody tr.tg-row {
    display: block; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    background: var(--bg-surface); box-shadow: var(--shadow-sm);
  }
  .tg-table tbody tr.tg-row:hover { background: var(--bg-surface); }
  .tg-table tbody tr.tg-row td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 5px 0; border: 0; text-align: left; }
  .tg-table tbody tr.tg-row td:first-child { position: static; box-shadow: none; background: transparent; }
  .tg-table tbody tr.tg-row td:first-child::after { display: none; }
  .tg-table tbody tr.tg-row td::before {
    content: attr(data-label); flex: 0 0 96px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-tertiary); padding-top: 3px;
  }
  .tg-table tbody tr.tg-row td.tg-td-main { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
  .tg-table tbody tr.tg-row td.tg-td-main::before { display: none; }
  .tg-table tbody tr.tg-row td.tg-td-rank { display: none; }
  .tg-table tbody tr.tg-row td.tg-td-actions { display: block; padding-top: 10px; }
  .tg-table tbody tr.tg-row td.tg-td-actions::before { display: none; }
  .tg-table tbody tr.tg-row td.num { text-align: left; }
  .tg-td-reasons, .tg-td-next, .tg-td-lines, .tg-td-states, .tg-td-main { max-width: none; min-width: 0; }
  .tg-td-reasons .tg-reasons { justify-content: flex-end; }
  .tg-td-reasons .tg-why { text-align: left; }
  .tg-reason, .tg-chip { white-space: normal; }
  .tg-actions { display: flex; flex-wrap: wrap; }
  .tg-actions .btn { flex: 1; justify-content: center; }
  .tg-table tbody tr.tg-plan-row { display: block; margin-top: -4px; }
  .tg-table tbody tr.tg-plan-row td { display: block; padding: 0; background: transparent; }
  .tg-plan { grid-template-columns: 1fr; }
  .tg-plan .tg-plan-wide, .tg-plan-btns { grid-column: auto; }
  .tg-table .pagination { background: transparent; border: 0; padding: 10px 4px; flex-wrap: wrap; gap: 8px; }
  .tg-table-card .pagination { background: transparent; border: 0; padding: 10px 4px; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 390px) {
  .tg-toolbar .crm-type-select { flex-basis: 100%; }
  .tg-table tbody tr.tg-row td::before { flex-basis: 80px; }
}