/* page styles: sales (all classes prefixed sl-) */

/* tables that need to fit many columns (desktop/tablet only; phones get the stacked cards from app.css) */
@media (min-width: 641px) {
  table.sl-tight th, table.sl-tight td { padding-left: 12px; padding-right: 12px; }
  table.sl-tight th:first-child, table.sl-tight td:first-child { padding-left: 20px; }
  table.sl-tight th:last-child, table.sl-tight td:last-child { padding-right: 16px; }
  table.sl-tight .cc + td, table.sl-tight .cc + th { padding-left: 8px; }
}
.sl-search { width: 240px; }
.sl-si { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sl-si > .row { flex-wrap: wrap; }

/* two-line plain cell */
.sl-two { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 20px; }
.sl-two > span:first-child { color: var(--text-2); font-weight: 500; }
.sl-two small { font-size: 13px; line-height: 18px; color: var(--text-4); }
.sl-two .pill + a { margin-top: 2px; }
.sl-risk small { color: var(--text-3); }

.sl-back { gap: 6px; margin-bottom: 16px; font-weight: 600; }
.sl-fb { color: #1877F2; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; transition: background .15s; }
.sl-fb:hover { background: #E7F0FD; }
.sl-in { color: #0A66C2; display: inline-grid; place-items: center; }
svg.sl-in { vertical-align: -3px; }
.sl-in svg { width: 16px; height: 16px; }
.sl-flag { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.sl-flag svg { width: 13px; height: 13px; }
.sl-two small.sl-flag.due { color: #B54708; }
.sl-two small.sl-flag.over { color: #B42318; }

/* filters */
.sl-range { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; }
.sl-range .input { width: 148px; }
.select.sl-bsel { height: 32px; width: auto; font-size: 13px; padding-left: 10px; padding-right: 32px; background-position: right 8px center; }

/* status picker that looks like a pill */
.sl-pick { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 8px; border: 0; border-radius: 13px; cursor: pointer; font: 500 12px/18px var(--font); white-space: nowrap;
  background: var(--gray-bg); color: var(--gray); box-shadow: inset 0 0 0 1px var(--gray-bd); transition: box-shadow .15s, filter .15s; }
.sl-pick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-dot); }
.sl-pick svg { width: 14px; height: 14px; opacity: .75; }
.sl-pick:hover { filter: brightness(.98); }
.sl-pick.ok { background: var(--success-bg); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-bd); } .sl-pick.ok::before { background: var(--success-dot); }
.sl-pick.warn { background: var(--warning-bg); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-bd); } .sl-pick.warn::before { background: var(--warning-dot); }
.sl-pick.bad { background: var(--error-bg); color: var(--error); box-shadow: inset 0 0 0 1px var(--error-bd); } .sl-pick.bad::before { background: var(--error-dot); }

/* proposal list rows (lead view) */
.sl-pw { width: 84px; display: flex; justify-content: flex-end; }
.dl.sl-dl { grid-template-columns: 136px minmax(0, 1fr); }
.dl.sl-dl dd { color: var(--text-2); }

/* nurture cards */
.sl-meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-3); }
.sl-meta span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-meta svg { width: 16px; height: 16px; color: var(--text-4); flex: none; }
.pcard .split-stats b.sm { font-size: 13px; white-space: nowrap; }
.sl-more { display: flex; justify-content: center; margin-top: 24px; }

/* sequence cards */
.sl-seqgrid { row-gap: 24px; }
.sl-sstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.sl-sstats > div { padding: 12px 24px; border-left: 1px solid var(--border); }
.sl-sstats > div:first-child { border-left: 0; }
.sl-sstats span { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
.sl-sstats b { display: block; font-size: 18px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-steps { list-style: none; margin: 0; padding: 0; }
.sl-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; position: relative; font-size: 14px; }
.sl-steps li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.sl-steps li:first-child::before { top: 50%; }
.sl-steps li:last-child::before { bottom: 50%; }
.sl-steps .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); position: relative; z-index: 1; flex: none; }
.sl-steps li:first-child .dot { background: var(--brand); }
.sl-steps .day { width: 48px; flex: none; font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sl-steps .sub { flex: 1; min-width: 0; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-steps .rate { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-seq.paused .sl-steps .dot { box-shadow: inset 0 0 0 2px var(--gray-dot); }
.sl-seq.paused .sl-steps li:first-child .dot { background: var(--gray-dot); }
.sl-seq.paused .sl-steps .sub { color: var(--text-3); }

/* sequence editor */
.sl-vars { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sl-var { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; cursor: pointer; color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.sl-var:hover { border-color: var(--brand-200); }
.sl-sted { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; background: var(--surface); box-shadow: var(--sh-xs); }
.sl-sted + .sl-sted { margin-top: 12px; }
.sl-sted-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sl-sted-h b { font-weight: 600; color: var(--text); }
.sl-sted-h > span:not(.sl-num) { color: var(--text-3); font-size: 13px; }
.sl-sted-h .ibtn { margin-left: auto; margin-right: -6px; }
.sl-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--brand-50); color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-100); flex: none; }

/* numbered steps */
.sl-ol { list-style: none; margin: 0; padding: 0; counter-reset: sl; display: grid; gap: 14px; }
.sl-ol li { counter-increment: sl; display: flex; gap: 12px; align-items: flex-start; color: var(--text-3); font-size: 14px; line-height: 20px; }
.sl-ol li::before { content: counter(sl); width: 24px; height: 24px; margin-top: -2px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); font-size: 12px; font-weight: 600;
  display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px var(--brand-100); }
.sl-ol li b { color: var(--text-2); font-weight: 600; }
.sl-runs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r); }
.sl-runs > div { padding: 10px 12px; border-left: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.sl-runs > div:first-child { border-left: 0; }
.sl-runs b { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.sl-runs > div > span:last-child { grid-column: 2; font-size: 12px; color: var(--text-3); }

/* proposal items editor */
.sl-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 152px 32px; gap: 12px; align-items: center; }
.sl-ihead { padding: 12px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--text-3); }
.sl-irows { padding: 16px 24px; display: grid; gap: 12px; }
.sl-total { display: flex; align-items: baseline; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); color: var(--text-3); }
.sl-total > span:first-child { margin-right: auto; font-size: 14px; }
.sl-total b { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--text); }
.sl-auto { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 4px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.sl-sticky { position: sticky; top: calc(var(--topbar) + 16px); }

/* proposal document placeholder (the real PDF goes here unchanged) */
.doc-frame .paper.sl-paper { width: 100%; max-width: 794px; justify-self: center; }
.sl-paper { aspect-ratio: 210 / 297; display: grid; place-items: center; text-align: center; padding: 48px; outline: 1px dashed var(--border-2); outline-offset: -24px; }
.sl-paper .in { max-width: 360px; }
.sl-paper .itile { margin: 0 auto 16px; }
.sl-paper h3 { font-size: 16px; line-height: 24px; }
.sl-paper p { color: var(--text-3); margin: 4px 0 0; }

/* scoring */
.sl-score { display: flex; align-items: center; gap: 10px; }
.sl-score b { min-width: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sl-score > span:last-child { font-size: 13px; color: var(--text-3); width: 64px; }
.sl-bar { width: 96px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: block; }
.sl-bar i { display: block; height: 100%; border-radius: 3px; }
.sl-stack { display: flex; gap: 3px; height: 12px; }
.sl-stack i { display: block; height: 100%; border-radius: 3px; }
.sl-rules { list-style: none; margin: 0; padding: 0; }
.sl-rules li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.sl-rules li:first-child { padding-top: 0; }
.sl-rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.sl-pts { min-width: 40px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-pts.plus { background: var(--success-bg); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-bd); }
.sl-pts.minus { background: var(--error-bg); color: var(--error); box-shadow: inset 0 0 0 1px var(--error-bd); }

/* follow-up cards */
.sl-quiet { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.sl-quiet svg { color: var(--text-4); }
.sl-quiet.bad-t, .sl-quiet.bad-t svg { color: var(--error); }
.sl-note { padding: 10px 14px; border: 1px solid var(--border); border-radius: 0 8px 8px 8px; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 20px; }

/* cold call funnel */
.sl-funnel { display: grid; gap: 10px; }
.sl-funnel .r { display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px 36px; gap: 12px; align-items: center; font-size: 14px; }
.sl-funnel .r b { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sl-funnel .r > span { color: var(--text-2); font-weight: 500; white-space: nowrap; }
.sl-funnel .bar { height: 28px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.sl-funnel .bar i { display: flex; align-items: center; height: 100%; padding-left: 10px; border-radius: 6px; color: #fff; font-style: normal; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.sl-funnel .r em { font-style: normal; text-align: right; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.sl-co { display: flex; align-items: center; gap: 8px; }
.sl-co .sl-in { display: inline-flex; gap: 4px; font-size: 13px; font-weight: 500; }
.sl-co .sl-in::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); margin-right: 4px; }
.sl-co .sl-in svg { width: 14px; height: 14px; }
.sl-band { font-size: 13px; color: var(--text-3); }
.sl-steps .day { white-space: nowrap; width: 52px; }
.sl-paper .in { max-width: 440px; }
.pcard .tt.sl-nm { display: flex; align-items: center; gap: 6px; }
.pcard .tt.sl-nm .sl-in svg { width: 16px; height: 16px; }
.sl-seq .card-h .sub { min-height: 40px; }
.sl-score .sl-bar { width: 64px; }
.sl-score .sl-band { width: 68px; }

/* ── responsive ─────────────────────────────────────── */
.sl-go { gap: 12px; }
.sl-pad { padding: 32px; }
.pcard .split-stats.sl-ss { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.5fr); }
.sl-seq .card-h { flex-wrap: nowrap; }
.sl-seq .card-h > .row { min-width: 0; }
.sl-seq .card-h .actions { flex: none; flex-wrap: nowrap; }
.sl-seq .card-h h2.row { flex-wrap: wrap; row-gap: 2px; }
/* five KPI cards: 3 + 2 on laptops instead of a ragged 3-column grid */
@media (min-width: 861px) and (max-width: 1360px) {
  .kpis.sl-k5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis.sl-k5 > :nth-child(-n+3) { grid-column: span 2; }
  .kpis.sl-k5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .kpis.sl-k5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1280px) {
  .sl-count { display: none; }
  .sl-search { width: 200px; }
  .sl-range .input { width: 136px; }
  .sl-score .sl-band { display: none; }
  .sl-funnel .r { grid-template-columns: 80px minmax(0, 1fr) 32px 36px; gap: 10px; }
  .sl-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-runs > div:nth-child(3) { border-left: 0; }
  .sl-runs > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 1100px) {
  .sl-sticky { position: static; }
  .sl-seq .card-h .sub { min-height: 0; }
  .sl-sstats > div { padding: 12px 20px; }
}
@media (max-width: 860px) {
  .sl-search { width: 100%; }
  .sl-pad { padding: 20px 16px; }
  .sl-eh { align-items: flex-start; }
  .sl-range { flex: 1 1 300px; }
  .sl-range .input { width: auto; flex: 1 1 120px; min-width: 0; }
  .sl-items { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "n n" "d d" "p x"; gap: 8px; }
  .sl-items .sl-n { grid-area: n; } .sl-items .sl-d { grid-area: d; } .sl-items .sl-p { grid-area: p; } .sl-items .sl-x { grid-area: x; }
  .sl-ihead { display: none; }
  .sl-irows { padding: 16px; gap: 16px; }
  .sl-irows > .sl-items + .sl-items { border-top: 1px solid var(--border); padding-top: 16px; }
  .sl-total { padding: 14px 16px; }
  .sl-paper { padding: 24px; outline-offset: -12px; aspect-ratio: auto; min-height: 420px; }
  .sl-sstats > div { padding: 10px 16px; }
  .sl-steps .day { width: 44px; }
  .pcard .split-stats b.sm { white-space: normal; }
}
@media (max-width: 640px) {
  table.sl-t td.ra { width: auto; }
  .sl-si { align-items: flex-end; } .sl-si > .row { justify-content: flex-end; }
  .sl-eh .actions .btn { flex: 1 1 auto; }
  .sl-two { align-items: flex-end; text-align: right; }
  .sl-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 100%; }
  .sl-range > span { display: none; }
  .sl-range .input { width: 100%; padding-left: 10px; padding-right: 8px; }
  .sl-copy { flex-wrap: wrap; } .sl-copy > .input { flex: 1 1 100%; } .sl-copy > .btn { flex: 1 1 auto; }
  .sl-seq .card-h .actions { margin-right: -8px; }
  .sl-steps li { display: grid; grid-template-columns: 12px 46px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; }
  .sl-steps .dot { margin-top: 4px; }
  .sl-steps .sub { white-space: normal; }
  .sl-steps .rate { grid-column: 3; font-size: 12px; }
  .sl-steps li::before { top: 0; }
  .sl-steps li:first-child::before { top: 10px; }
  .sl-steps li:last-child::before { bottom: auto; height: 10px; }
  .sl-runs > div { padding: 10px; }
  .dl.sl-dl { grid-template-columns: 1fr; }
  .sl-funnel .r { grid-template-columns: 76px minmax(0, 1fr) 30px 34px; gap: 8px; font-size: 13px; }
  .sl-quiet { font-size: 13px; }
  .sl-pw { width: auto; }
  .sl-score { justify-content: flex-end; }
  .sl-paper { min-height: 320px; padding: 20px; }
  .sl-paper h3 { font-size: 15px; }
}

/* ── real page ports (v3 views) ───────────────────────── */
.sl-testrow { gap: 8px; flex-wrap: wrap; }
.sl-testrow .input { flex: 1; min-width: 200px; }
.sl-setb { padding: 32px; }
@media (max-width: 640px) { .sl-setb { padding: 20px; } }
.t tbody tr.sl-warnrow { background: #FFFCF5; }
.select.sl-bsel { height: 32px; width: auto; font-size: 13px; padding-left: 10px; padding-right: 32px; background-position: right 8px center; }
.sl-total[hidden] { display: none; }
.sl-addrow { padding: 0 24px 20px; }
@media (max-width: 640px) { .sl-addrow { padding: 0 16px 16px; } }
.sl-sstats.sl-s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-stedg { grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
@media (max-width: 640px) { .sl-stedg { grid-template-columns: 1fr; } }

/* cold customers (real page) */
.sl-ctb { margin: 0; }
.sl-ctb .sl-range .input { width: 150px; }
.sl-rc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-rc2 .rc { position: relative; }
@media (min-width: 641px) { .t tbody tr.sl-duerow td:first-child { box-shadow: inset 3px 0 0 #7A5AF8; } }
@media (max-width: 1100px) { .sl-ctb .sl-search { width: 200px; } }
@media (max-width: 640px) {
  .sl-ctb .sl-search, .sl-ctb .select, .sl-ctb .sl-range { width: 100%; }
  .sl-ctb .sl-range .input { width: auto; flex: 1; min-width: 0; }
  .sl-rc2 { grid-template-columns: 1fr; }
}

/* lead nurture (real page) */
.sl-enf { gap: 8px; justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.sl-enf .select { width: 200px; }
@media (max-width: 1100px) { .sl-enf .select { width: 160px; } }
@media (max-width: 640px) { .sl-enf { justify-content: flex-start; width: 100%; } .sl-enf .select { flex: 1; width: auto; min-width: 0; } }

/* sales intelligence (real page) */
.sl-fn2 .r { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.t tbody tr.sl-fcrow td { background: var(--surface-2); }
@media (max-width: 640px) { .sl-fn2 .r { grid-template-columns: 96px minmax(0, 1fr) 36px; } }

/* customer insights (real page) */
.sl-kt { font-size: 18px; line-height: 28px; display: block; white-space: normal; }
.sl-cik .kpi .val { white-space: normal; overflow-wrap: anywhere; }
.sl-notes { max-height: 420px; overflow-y: auto; }
.sl-callsub { display: none; font-size: 12px; color: var(--text-4); margin-top: 2px; }
@media (min-width: 641px) and (max-width: 1100px) { .sl-callsub { display: block; } }
.sl-fusub { display: none; font-size: 12px; color: #6941C6; }
@media (min-width: 641px) and (max-width: 860px) { .sl-fusub { display: block; } }

/* row menus / status dropdowns inside short tables were clipped by the scrolling table box (.tw / .tcard).
   While a menu is open in a sales table, let it overflow. */
.sl-menufix:has(.menu.open), .sl-menufix:has(.menu.open) .tw { overflow: visible; }