/* CRM · Social Seller (prefixo ss-).
   Carrega depois de css/pages/crm/*.css e reaproveita as classes da página de Leads
   (v2-*, pl-*, drawer, modal). Aqui fica só o que é próprio do Social Seller.
   Cores: variáveis do base.css; as poucas que não existem lá estão logo abaixo. */

.crm-v2 {
  --ss-fill: #f4f1eb;
  /* fundos neutros (caixas, hover de menu) */
  --ss-dim: var(--subtle);
  /* rótulos em caixa alta, textos apagados */
  --ss-empty: #b5b0a5;
  /* "—", "Sem reunião" */
  --ss-track: #efece5;
  /* trilho das barras do funil */
  --ss-row-line: #f0ede6;
  /* linhas das tabelas de métricas */
  --ss-step: #cfcabd;
  /* bolinha de etapa ainda não feita */
  --ss-warn-bg: #fff6e0;
  --ss-warn-line: #ecd9a0;
  --ss-warn-text: #6b5314;
}

/* ── Cadastro rápido (Nome · @perfil · Origem · Qualificação) ─────────── */
.ss-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.ss-quick-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ss-quick-l svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
}

.ss-quick #qNome {
  flex: 1 1 180px;
}

.ss-quick #qHandle {
  flex: 1 1 170px;
}

.ss-quick .c-select {
  flex: 0 1 180px;
}

.ss-add kbd {
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

.ss-quick-err {
  flex: 1 1 100%;
  padding-left: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--error);
}

.ss-quick-err a {
  color: var(--primary);
}

/* ── Barra de filtros ─────────────────────────────────────────────────── */
.crm-v2 .v2-toolbar .v2-search {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 320px;
}

.crm-v2 .v2-toolbar .c-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 150px;
}

#ssFOwner[hidden],
#ssLists[hidden],
#ssStages[hidden] {
  display: none;
}

/* ── Lista ────────────────────────────────────────────────────────────── */
#ssTable {
  overflow-x: auto;
}

.ss-who {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ss-nm {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-canal {
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.ss-canal svg {
  width: var(--ico-only);
  height: var(--ico-only);
}

.ss-canal-i {
  vertical-align: -4px;
  margin-right: 6px;
}

.ss-table .v2-name .v2-sub {
  padding-left: 25px;
}

.ss-profile {
  color: inherit;
  text-decoration: none;
}

.ss-profile:hover {
  color: var(--primary);
  text-decoration: underline;
}

.ss-none {
  font-size: 12.5px;
  color: var(--ss-empty);
}

.ss-miss {
  font-style: italic;
  color: var(--muted);
}

.ss-legacy {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--ss-fill);
  border-radius: 99px;
  padding: 1px 7px;
}

.ss-wait {
  font-weight: 600;
  color: var(--primary);
}

.ss-warn-t {
  color: var(--warning);
}

.ss-qual {
  white-space: nowrap;
  color: var(--ink-2);
}

.ss-lead-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-ico);
  vertical-align: middle;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
}

.ss-lead-tag svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
}

.v2-received .v2-origin {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contato: duas linhas que cortam com reticências; o botão copia o telefone */
.ss-table td.ss-ct {
  width: 166px;
  max-width: 166px;
}

.ss-table .ss-ct-main {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 158px;
}

.ss-table .ss-ct-t,
.ss-table .ss-ct-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-table .ss-ct-sub {
  display: block;
  max-width: 158px;
}

/* Botões de copiar (telefone e perfil) sempre visíveis */
.crm-v2 .ss-table .copy-btn.ss-copy {
  flex: none;
  margin-top: 0;
  padding: 2px;
}

.ss-handle {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Observação: até duas linhas e a contagem embaixo */
.ss-table td.ss-obs {
  width: 140px;
  max-width: 140px;
}

.ss-obs-t {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 132px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2);
}

.ss-obs-n {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-ico-sm);
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.ss-obs-n svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
}

/* Células que abrem o preenchimento rápido (contato e observação) */
.ss-table td.ss-cell-edit {
  cursor: pointer;
  transition: background 0.12s;
}

.ss-table td.ss-cell-edit:hover {
  background: rgba(0, 0, 0, 0.035);
}

.ss-table td.ss-cell-edit .ss-none {
  color: var(--muted);
}

.ss-table td.ss-cell-edit:hover .ss-none {
  color: var(--primary);
}

/* Reunião e conclusão vêm do lead: só mostram (o motivo da recusa aparece ao passar o mouse) */
.ss-static {
  cursor: default;
}

/* Pílula de status com menu */
.ss-pillbtn {
  appearance: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.ss-pillbtn:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, #fff);
}

.ss-pillbtn .ss-chev {
  display: none;
  opacity: 0.55;
}

.ss-pillbtn:hover .ss-chev,
.ss-pillbtn:focus-visible .ss-chev {
  display: inline-flex;
}

.ss-pill-auto {
  background: color-mix(in srgb, var(--c) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, #fff);
}

.ss-auto {
  display: inline-flex;
  opacity: 0.65;
}

.ss-chev svg,
.ss-auto svg {
  display: block;
  width: 10px;
  height: 10px;
}

tr.lead-row.ss-flash td {
  animation: ss-flash 1.6s ease-out;
}

@keyframes ss-flash {
  from {
    background: color-mix(in srgb, var(--primary) 18%, #fff);
  }

  to {
    background: transparent;
  }
}

/* ── Quadro ───────────────────────────────────────────────────────────── */
.ss-board-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.ss-board-note b {
  color: var(--text);
}

.ss-lockn svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
  margin-left: 6px;
  vertical-align: -1px;
}

.ss-board {
  grid-template-columns: repeat(6, minmax(172px, 1fr));
}

.ss-col.is-auto {
  background: #f1efe9;
}

.ss-col.over {
  background: color-mix(in srgb, var(--c) 8%, var(--ss-fill));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, #fff);
}

.ss-col .pl-head .ss-auto {
  margin-left: 2px;
  color: var(--muted);
}

.ss-board.dragging .ss-col.is-auto {
  opacity: 0.55;
}

.ss-noowner {
  font-style: italic;
  color: var(--muted);
}

/* ── Métricas ─────────────────────────────────────────────────────────── */
.ss-kpis .v2-stage-cell {
  cursor: default;
}

.ss-kpis .v2-stage-cell:hover {
  background: none;
}

.ss-mgrid {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(360px, 7fr);
  gap: 14px;
  align-items: start;
}

.ss-mcard {
  padding: 18px 20px;
}

.ss-mcard .ch {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ss-dim);
}

.ss-fun {
  margin-bottom: 11px;
}

.ss-fun-l {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}

.ss-fun-l span {
  flex: 1;
  font-weight: 600;
  color: var(--ink-2);
}

.ss-fun-l b {
  font-variant-numeric: tabular-nums;
}

.ss-fun-l em {
  width: 38px;
  font-style: normal;
  font-size: 11.5px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ss-fun-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--ss-track);
}

.ss-fun-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.ss-fun-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.ss-mt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.ss-mt th {
  padding: 0 6px 7px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-dim);
}

.ss-mt td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--ss-row-line);
  font-variant-numeric: tabular-nums;
}

.ss-mt .num {
  text-align: right;
}

.ss-mt tbody td:first-child {
  font-weight: 600;
}

/* ── Gaveta do prospect ───────────────────────────────────────────────── */
.ss-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.detail-section .c-field {
  margin-bottom: 10px;
}

.crm-v2 .c-drawer__body .detail-section .c-field .c-input,
.crm-v2 .c-drawer__body .detail-section .c-field .c-select,
.crm-v2 .c-drawer__body .detail-section .c-field .c-textarea {
  width: 100%;
  max-width: none;
}

.c-drawer__body .c-input:disabled,
.c-drawer__body .c-select:disabled,
.c-drawer__body .c-textarea:disabled {
  background: var(--ss-fill);
  color: var(--muted);
}

.ss-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.ss-save-row .ss-hint {
  margin: 0;
}

.ss-autobar {
  display: flex;
  align-items: center;
  gap: var(--gap-ico-lg);
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 9%, #fff);
  font-size: 12.5px;
  color: var(--ink-2);
}

.ss-autobar svg {
  flex: none;
  width: var(--ico);
  height: var(--ico);
  color: var(--c);
}

.ss-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.ss-hint svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
}

.ss-convert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
}

.ss-convert.ready {
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 40%, #fff);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
}

.ss-convert>div {
  flex: 1;
  min-width: 0;
}

.ss-convert b {
  font-size: 13.5px;
}

.ss-convert p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.ss-conv-btn {
  white-space: nowrap;
}

.ss-chain {
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
}

.ss-chain-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ss-chain-h span {
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--primary-soft);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}

.ss-steps {
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.ss-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 14px 110px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.ss-steps li i {
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ss-step);
  border-radius: 50%;
  background: #fff;
}

.ss-steps li.done i {
  border-color: var(--primary);
  background: var(--primary);
}

.ss-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  bottom: -50%;
  width: 2px;
  background: var(--divider);
}

.ss-steps li.done:not(:last-child)::before {
  background: color-mix(in srgb, var(--primary) 45%, #fff);
}

.ss-steps li span {
  font-weight: 700;
  color: var(--ink-2);
}

.ss-steps li em {
  font-style: normal;
}

.ss-note-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.ss-note-form textarea {
  flex: 1;
  min-height: 54px;
  resize: vertical;
}

.ss-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-notes li {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.ss-notes li>div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 11.5px;
  color: var(--muted);
}

.ss-notes li>div b {
  color: var(--ink-2);
}

.ss-notes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.ss-notes em {
  font-style: normal;
  font-weight: 600;
  opacity: 0.75;
}

.ss-notes li.empty {
  border-style: dashed;
  background: none;
  font-size: 12.5px;
  color: var(--muted);
}

.v2-owner .v2-ro-note svg {
  width: var(--ico-sm);
  height: var(--ico-sm);
}

/* ── Janelas (converter, descartar, contato, observação, listas) ──────── */
.c-modal.ss-conv {
  width: min(560px, calc(100vw - 32px));
}

.ss-carry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ss-carry span {
  flex: 1 1 140px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--ss-fill);
  font-size: 12.5px;
  font-weight: 600;
}

.ss-carry em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ss-dim);
}

.ss-req {
  color: var(--error);
}

.ss-dup {
  margin: -2px 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--ss-warn-line);
  border-radius: 10px;
  background: var(--ss-warn-bg);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ss-warn-text);
}

.ss-dup[hidden] {
  display: none;
}

.ss-dest {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  font-size: 13px;
}

.ss-dest span {
  font-size: 12.5px;
  color: var(--muted);
}

.ss-dest .ss-warn {
  font-weight: 600;
  color: var(--warning);
}

.ss-lists {
  max-width: 640px;
}

.ss-lst {
  margin-bottom: 18px;
}

.ss-lst h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ss-lst ul {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.ss-lst li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-lst li input {
  flex: 1;
  min-width: 0;
}

.ss-lst li.off input {
  opacity: 0.55;
  text-decoration: line-through;
}

.ss-lst-ch {
  min-width: 62px;
  font-size: 12px;
  color: var(--muted);
}

.crm-v2 .ss-lst .ss-lst-code {
  flex: 0 0 150px;
  width: 150px;
  font-size: 12px;
}

.ss-lst-add {
  display: flex;
  gap: 8px;
}

.ss-lst-add input.c-input {
  flex: 1 1 140px;
  width: auto;
  min-width: 0;
}

.ss-lst-add .c-select {
  flex: 0 0 120px;
  width: 120px;
}

/* ── Menu flutuante e avisos ──────────────────────────────────────────── */
.ss-menu {
  position: fixed;
  z-index: 990;
  min-width: 190px;
  padding: 5px;
}

.ss-menu-t {
  padding: 6px 9px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-dim);
}

.ss-menu button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--gap-ico-lg);
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.ss-menu button:hover {
  background: var(--ss-fill);
}

.ss-menu button i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ss-menu button svg {
  width: var(--ico);
  height: var(--ico);
  margin-left: auto;
  color: var(--primary);
}

/* ── Telas menores ────────────────────────────────────────────────────── */
@media (max-width: 1380px) {
  .ss-table td.ss-obs {
    width: 140px;
    max-width: 140px;
  }

  .ss-obs-t {
    max-width: 132px;
  }
}

@media (max-width: 980px) {

  .ss-two,
  .ss-mgrid {
    grid-template-columns: 1fr;
  }

  .ss-quick-l {
    flex: 1 1 100%;
  }

  .ss-quick .c-select {
    flex: 1 1 140px;
  }

  .ss-convert {
    flex-direction: column;
    align-items: stretch;
  }
}