/* CAREPLUS_SHELL_v1 (25/09/2026, §88.21) — só vale com html.cp-shell (o careplus-shell.js liga;
   /config/careplus-shell.json "ativo": false desliga tudo e volta a tela original). */

/* ---------- busca: larga, com lupa (antes: 30 px, espremida pelos filtros) ---------- */
html.cp-shell .filterbar { flex-wrap: wrap; row-gap: 10px; }   /* rede de segurança: nada corta em tela estreita */
html.cp-shell .filterbar #searchInput {
  flex: 1 1 320px;
  min-width: 220px;
  max-width: 560px;
  width: auto;
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 16px 16px;
}
html.cp-shell .filterbar select { min-width: 0; width: auto; }

/* ---------- funil em botões: Clube | Empresarial (o <select> original fica escondido e continua mandando) ---------- */
html.cp-shell .filterbar #pipelineSelect { display: none !important; }
html.cp-shell .cp-funis {
  display: inline-flex;
  flex: none;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
html.cp-shell .cp-funis button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
html.cp-shell .cp-funis button:hover { color: var(--text); background: var(--surface-1); }
html.cp-shell .cp-funis button.on {
  background: var(--accent-soft);
  color: var(--orange);
  border-color: rgba(249, 115, 22, 0.25);
}
html.cp-shell .cp-funis .n {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  background: rgba(127, 127, 127, 0.16);
}
html.cp-shell .cp-funis .n:empty { display: none; }

/* ---------- "+ Novo lead" (nunca usado: 54/54 cards vieram do agente) → "🧮 Nova cotação" abre o cotador ---------- */
html.cp-shell .filterbar #newDealBtn { display: none !important; }
html.cp-shell .filterbar .cp-nova {   /* <a>, não <button>: o estilo do botão primário do app não pega — replica aqui */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  color: #fff !important;
  background: var(--grad);
  border: 0;
}
html.cp-shell .filterbar .cp-nova:hover { filter: brightness(1.08); text-decoration: none; }
html.cp-shell .cp-filtros-btn { display: none; }

/* ---------- KPIs da mesa (PT/R$) no lugar da fileira genérica (Won/Lost/$) ---------- */
html.cp-shell #kpiRow { display: none !important; }
html.cp-shell .cp-kpi { margin-bottom: 14px; }
html.cp-shell .cp-kpi:empty { display: none; }
html.cp-shell .cp-kpi .kpi.cp-warn .kpi-value { color: #f59e0b; }
html.cp-shell .cp-kpi .kpi.cp-money .kpi-value { font-size: 18px; }

/* ---------- menu: link do cotador com cara de aba ---------- */
html.cp-shell .cp-tab {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
}
html.cp-shell .cp-tab:hover { background: var(--surface-2); color: var(--text); }

/* ---------- topo: marca Care Plus ---------- */
.cp-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #0072ce, #38bdf8);
  flex: none;
}

/* ---------- celular: busca sempre à vista, filtros atrás de "Filtros ▾" ---------- */
@media (max-width: 768px) {
  html.cp-shell .filterbar #searchInput { flex: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
  html.cp-shell .filterbar .cp-funis { display: flex !important; width: 100% !important; }
  html.cp-shell .filterbar .cp-funis button { flex: 1 1 0; }
  html.cp-shell .filterbar .cp-filtros-btn { display: inline-flex !important; justify-content: center; }
  html.cp-shell .filterbar:not(.cp-open) #statusSelect,
  html.cp-shell .filterbar:not(.cp-open) #periodSelect,
  html.cp-shell .filterbar:not(.cp-open) #periodFrom,
  html.cp-shell .filterbar:not(.cp-open) #periodTo,
  html.cp-shell .filterbar:not(.cp-open) #configPipelineBtn { display: none !important; }
  html.cp-shell .filterbar .cp-nova { margin-left: 0 !important; }
  html.cp-shell .cp-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  html.cp-shell .cp-kpi .kpi { padding: 10px !important; }
  html.cp-shell .cp-kpi .kpi-label { font-size: 9.5px !important; white-space: normal !important; line-height: 1.25 !important; overflow: visible !important; }
  html.cp-shell .cp-kpi .kpi-value { font-size: 18px !important; }
  html.cp-shell .cp-kpi .kpi.cp-money { grid-column: span 3; }
}