/* ==========================================================================
 * Painel do Corretor - 3B Imoveis
 * --------------------------------------------------------------------------
 * Identidade visual: verde-escuro (#1e3c2a) e dourado (#b8860b), as mesmas
 * cores ja configuradas no tema (Aparencia > Personalizar > Cores) - nao
 * sao cores novas/inventadas.
 * Escopo: enfileirado apenas nas paginas do painel do corretor (ver
 * functions.php -> threeb_is_dashboard_page()), nunca no site publico.
 * ========================================================================== */

:root {
	--threeb-verde: #1e3c2a;
	--threeb-verde-escuro: #14291d;
	--threeb-dourado: #b8860b;
}

/* Menu lateral: item ativo/hover usam a identidade da 3B em vez do azul padrao do Houzez */
.dashboard-sidebar .sidebar-nav a.active,
.dashboard-sidebar .sidebar-nav a:hover {
	background-color: var(--threeb-verde);
	color: #fff !important;
}

.dashboard-sidebar .sidebar-nav a.active i,
.dashboard-sidebar .sidebar-nav a:hover i {
	color: var(--threeb-dourado);
}

/* Botoes de acao primaria dentro do painel (Agendar Visita, Adicionar Lead, etc.) */
.dashboard-right .btn-primary {
	background-color: var(--threeb-verde);
	border-color: var(--threeb-verde);
}

.dashboard-right .btn-primary:hover {
	background-color: var(--threeb-verde-escuro);
	border-color: var(--threeb-verde-escuro);
}

/* --------------------------------------------------------------------------
 * Cartoes do painel principal: publico 60+, letras grandes, numero em
 * destaque, sem graficos/percentuais - direto ao ponto.
 * -------------------------------------------------------------------------- */
.threeb-simple-cards .stats-box {
	border-top: 4px solid var(--threeb-dourado);
	text-align: center;
	padding: 30px 15px;
}

.threeb-simple-cards .stats-box .icon-box {
	background-color: var(--threeb-verde);
	margin: 0 auto 12px;
}

.threeb-simple-cards .stats-box .icon-box i {
	color: var(--threeb-dourado);
}

.threeb-simple-cards .stats-box p {
	font-size: 18px;
	font-weight: 600;
}

.threeb-simple-cards .stats-box h3 {
	font-size: 44px;
	color: var(--threeb-verde);
	margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
 * Agenda: destaque absoluto no topo do painel (principal ferramenta do dia).
 * -------------------------------------------------------------------------- */
.threeb-agenda-widget {
	border: 2px solid var(--threeb-verde);
	border-top: 6px solid var(--threeb-dourado);
}

.threeb-agenda-widget h4 {
	color: var(--threeb-verde);
	font-size: 24px;
}

.threeb-agenda-widget a {
	color: var(--threeb-dourado);
	font-weight: bold;
}

.threeb-agenda-widget li strong {
	color: var(--threeb-verde);
	font-size: 17px;
}

/* --------------------------------------------------------------------------
 * Painel lateral "Agendar Visita" (#offcanvasVisit) - ajuste cirurgico de
 * respiro visual, pedido apos o painel ter ficado com os campos amontoados
 * e os rotulos (labels) quase ilegiveis sobre o fundo verde-escuro.
 *
 * Escopo: tudo aqui e prefixado por #offcanvasVisit de proposito, para
 * NAO afetar nenhum outro offcanvas do Houzez (Editar Lead, Novo Negocio,
 * etc.) - aqueles continuam exatamente como sempre estiveram. So CSS,
 * nenhuma estrutura HTML do formulario foi alterada (evita qualquer risco
 * de quebrar os eventos JS que ja dependem dela).
 * -------------------------------------------------------------------------- */

/* O fundo escuro do offcanvas ja e o padrao nativo do Houzez (confirmado
   comparando com o painel "Adicionar novo lead" original, identico) - o
   problema real e que os rotulos usam uma cor escura demais para esse
   fundo, quase invisivel. Corrige so o contraste, sem mudar a cor de fundo. */
#offcanvasVisit .offcanvas-box label {
	color: #f2f5f2;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: inline-block;
}

/* Mais respiro entre cada grupo de campo (Bootstrap usa 1rem por padrao
   no .mb-3; aumentamos para dar folga sem tocar no HTML). */
#offcanvasVisit .offcanvas-box > .mb-3,
#offcanvasVisit .offcanvas-box > .row {
	margin-bottom: 22px !important;
}

/* Dentro da linha Data/Horario, garante folga tambem nas colunas. */
#offcanvasVisit .offcanvas-box > .row > [class*="col-"] {
	margin-bottom: 0;
}

/* Campos maiores e mais faceis de ler/tocar (publico 60+). */
#offcanvasVisit .form-control,
#offcanvasVisit select.form-control {
	padding: 10px 14px;
	font-size: 15px;
	min-height: 46px;
}

#offcanvasVisit textarea.form-control {
	min-height: 90px;
}

/* Respiro interno geral do corpo do painel. */
#offcanvasVisit .offcanvas-body {
	padding: 24px 28px;
}

/* Mensagens de erro/sucesso ("Lead invalida", etc.) com espaco proprio,
   sem colar no campo anterior nem no botao de baixo. */
#offcanvasVisit #visit-msgs:not(:empty) {
	margin-top: 16px;
}

#offcanvasVisit #visit-msgs .alert {
	margin-bottom: 0;
}

/* Rodape do painel (botao "Agendar Visita") com mais espaco ao redor. */
#offcanvasVisit .offcanvas-footer {
	padding: 20px 28px;
}

/* --------------------------------------------------------------------------
 * Pilula de completude do cadastro, na listagem "Meus Imoveis" (coluna
 * inserida via JS - ver 3b-agendamento-visitas/js/visits.js). Cores
 * semanticas (verde/amarelo/vermelho) para leitura rapida; a borda dourada
 * mantem a peca reconhecivel como parte da identidade visual da 3B.
 * -------------------------------------------------------------------------- */
.threeb-completeness-pill {
	display: inline-block;
	min-width: 52px;
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	border: 1px solid var(--threeb-dourado);
}

.threeb-completeness-pill.is-loading {
	color: #9aa39c;
	border-color: #d7ddd8;
}

.threeb-completeness-pill.threeb-level-alto {
	background: #e4f3e8;
	color: #1e6b34;
}

.threeb-completeness-pill.threeb-level-medio {
	background: #fdf1d9;
	color: #8a6512;
}

.threeb-completeness-pill.threeb-level-baixo {
	background: #fbe6e3;
	color: #a3271d;
}

/* Estados de fallback (auditoria de UX): imovel fora do alcance do usuario
   (omitido pelo servidor) ou falha de rede - nunca fica preso em "...". */
.threeb-completeness-pill.threeb-level-indisponivel,
.threeb-completeness-pill.threeb-level-erro {
	background: #eef0ee;
	color: #6b746e;
	border-color: #c9d0ca;
	cursor: help;
}

/* --------------------------------------------------------------------------
 * Feedback de salvar o status da visita (Agendada/Confirmada/Realizada/
 * Cancelada) - substitui o retorno silencioso que existia antes.
 * -------------------------------------------------------------------------- */
.threeb-status-feedback {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	vertical-align: middle;
}

.threeb-status-feedback.is-loading {
	color: var(--threeb-verde);
}

.threeb-status-feedback.is-success {
	color: #1e6b34;
	font-size: 15px;
}

.threeb-status-feedback.is-error {
	color: #a3271d;
}

/* --------------------------------------------------------------------------
 * Alertas do painel principal: cards clicaveis de indicadores (Imoveis
 * desatualizados, Clientes sem atendimento, etc. - ver
 * template/user_dashboard.php e functions.php). Mesmo padrao visual dos
 * cartoes simples (.threeb-simple-cards), so trocando a cor da borda
 * superior por card para diferenciar cada alerta rapidamente. Tons
 * propositalmente sobrios (sem vermelho de alarme), coerentes com a
 * identidade verde/dourado da 3B.
 * -------------------------------------------------------------------------- */
.threeb-alert-cards-title {
	color: var(--threeb-verde);
	font-size: 20px;
	margin-bottom: 12px;
}

.threeb-alert-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.threeb-alert-card-link:hover .threeb-alert-card {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* !important abaixo: o tema imprime um <style> inline (cores do
   Personalizar > Cores) com ".houzez-dashboard-body .stats-box .icon-box"
   - 3 classes de especificidade -, que vence nossas regras (2 classes) e
   ainda define a propria cor do icone com especificidade maior que a
   nossa mesmo incluindo o seletor de tipo "i". Como .threeb-alert-card-*
   sao classes exclusivas nossas (nao usadas por nenhum outro elemento do
   Houzez), sobrescrever com !important aqui e seguro e nao afeta mais
   nada no painel. */
.threeb-alert-card {
	text-align: center;
	padding: 26px 15px;
	border-top: 4px solid var(--threeb-verde) !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.threeb-alert-card .icon-box {
	background-color: var(--threeb-verde) !important;
	margin: 0 auto 12px;
}

.threeb-alert-card .icon-box i {
	color: var(--threeb-dourado) !important;
}

.threeb-alert-card p {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.threeb-alert-card h3 {
	font-size: 36px;
	color: var(--threeb-verde);
	margin: 0;
}

/* Cor de destaque individual por card (ordem fixa em user_dashboard.php):
   0 Imoveis desatualizados, 1 Clientes sem atendimento, 2 Clientes
   desatualizados, 3 Imoveis provisorios, 4 Proprietarios pendentes. */
.threeb-alert-card-1 {
	border-top-color: #a35d3a !important;
}

.threeb-alert-card-1 .icon-box {
	background-color: #a35d3a !important;
}

.threeb-alert-card-2 {
	border-top-color: #3a6b7a !important;
}

.threeb-alert-card-2 .icon-box {
	background-color: #3a6b7a !important;
}

.threeb-alert-card-3 {
	border-top-color: var(--threeb-dourado) !important;
}

.threeb-alert-card-3 .icon-box {
	background-color: var(--threeb-dourado) !important;
}

.threeb-alert-card-3 .icon-box i {
	color: var(--threeb-verde-escuro) !important;
}

.threeb-alert-card-4 {
	border-top-color: #6b3a55 !important;
}

.threeb-alert-card-4 .icon-box {
	background-color: #6b3a55 !important;
}

/* --------------------------------------------------------------------------
 * Badge de SLA (Timer de Lead) - ver inc/lead-sla.php. Cores semanticas:
 * verde=atendido, dourado=atencao (15-30min), vermelho=critico (30min+).
 * -------------------------------------------------------------------------- */
.threeb-sla-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}

.threeb-sla-badge.threeb-sla-ok {
	background: #e4f3e8;
	color: #1e6b34;
}

.threeb-sla-badge.threeb-sla-novo,
.threeb-sla-badge.threeb-sla-atencao {
	background: #fdf1d9;
	color: #8a6512;
}

.threeb-sla-badge.threeb-sla-critico {
	background: #fbe6e3;
	color: #a3271d;
	animation: threeb-sla-pulse 1.6s ease-in-out infinite;
}

@keyframes threeb-sla-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
 * Motor de Match (Imovel x Lead) - ver inc/property-match-engine.php.
 * -------------------------------------------------------------------------- */
.threeb-match-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e8e3;
	border-top: 3px solid var(--threeb-dourado);
	border-radius: 10px;
	padding: 18px;
	height: 100%;
}

.threeb-match-score {
	position: absolute;
	top: -14px;
	right: 14px;
	background: var(--threeb-verde);
	color: var(--threeb-dourado);
	font-weight: 800;
	font-size: 15px;
	border-radius: 999px;
	padding: 6px 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.threeb-match-title {
	font-weight: 700;
	color: var(--threeb-verde-escuro);
	margin: 6px 0 4px;
	padding-right: 40px;
}

.threeb-match-caption {
	font-size: 13px;
	color: #6b746e;
	margin-bottom: 14px;
}

/* Card "Transferir Lead" na sidebar do detalhe do lead - card de acao em
 * destaque (fundo areia suave, borda dourada), pedido explicito de UX.
 * -------------------------------------------------------------------------- */
.threeb-transfer-card {
	background: var(--threeb-areia, #f6f1e7);
	border: 1px solid var(--threeb-dourado);
	border-radius: 12px;
	padding: 20px;
}

.threeb-transfer-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--threeb-verde);
	margin-bottom: 16px;
}

.threeb-transfer-card-title i {
	color: var(--threeb-dourado);
	font-size: 20px;
}

.threeb-transfer-current {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
}

.threeb-transfer-avatar {
	border-radius: 50%;
	border: 2px solid var(--threeb-dourado);
}

.threeb-transfer-current-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a9083;
}

.threeb-transfer-current div strong {
	color: var(--threeb-verde-escuro);
	font-size: 15px;
}

/* Telefone comercial do responsavel atual: entra como terceira linha do
   cartao (rotulo / nome / telefone). O <strong> do nome e' inline, entao
   o link precisa de display:block pra nao colar na mesma linha. */
.threeb-transfer-current div strong {
	display: block;
}

.threeb-transfer-current-phone {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	font-size: 13px;
	color: #8f6526;
	text-decoration: none;
}

.threeb-transfer-current-phone:hover,
.threeb-transfer-current-phone:focus {
	color: var(--threeb-verde-escuro);
	text-decoration: underline;
}

.threeb-transfer-current-phone i {
	font-size: 14px;
}

.threeb-transfer-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--threeb-verde-escuro);
	margin-bottom: 6px;
}

#threeb-transfer-agent {
	border: 1px solid #dbe0dc;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Feedback visual ao selecionar um destinatario valido. */
#threeb-transfer-agent.threeb-has-selection {
	border-color: var(--threeb-verde);
	box-shadow: 0 0 0 2px rgba(30, 60, 42, 0.12);
}

.threeb-transfer-btn {
	width: 100%;
	background: var(--threeb-verde);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-size: 14.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 0.15s ease;
}

.threeb-transfer-btn:hover:not(:disabled) {
	background: var(--threeb-verde-escuro);
}

.threeb-transfer-btn:disabled {
	opacity: 0.75;
	cursor: wait;
}

.threeb-transfer-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	animation: threeb-spin 0.7s linear infinite;
}

@keyframes threeb-spin {
	to { transform: rotate(360deg); }
}

/* Toast de sucesso/erro - canto inferior direito, some sozinho. */
.threeb-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	background: var(--threeb-verde-escuro);
	color: #fff;
	border-left: 4px solid var(--threeb-dourado);
	border-radius: 8px;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	animation: threeb-toast-in 0.25s ease;
}

.threeb-toast.threeb-toast-error {
	border-left-color: #b3271d;
}

@keyframes threeb-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Mapa de calor de demanda por regiao (tabela + barra, sem mapa real - ver
   inc/business-insights.php). Barra em dourado, mesma identidade dos
   demais indicadores; comprimento proporcional a intensidade calculada em
   PHP (nunca em CSS/JS - evita recalculo duplicado). */
.threeb-heatmap-label {
	flex: 0 0 90px;
	font-size: 13px;
	font-weight: 600;
	color: #2b2f2c;
}

.threeb-heatmap-bar-wrap {
	background: #eef1ec;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.threeb-heatmap-bar {
	display: block;
	height: 100%;
	background: var(--threeb-dourado);
	border-radius: 999px;
}

.threeb-heatmap-qtd {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--threeb-verde);
}

/* Relatorio de Performance do Corretor (Total de Leads / Taxa de Conversao) -
   ver template-parts/dashboard/board/funnel/main.php. Mesmos cards de
   alerta acima, so com respiro proprio antes do texto/resumo por estagio. */
.threeb-performance-kpis {
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
 * Follow-up de Clientes + Estagios do funil (tela de detalhes do Lead).
 * -------------------------------------------------------------------------- */

/* Aba "Follow-up": um item por follow-up registrado. */
.threeb-followup-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.threeb-followup-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--threeb-verde);
	color: var(--threeb-dourado);
	display: flex;
	align-items: center;
	justify-content: center;
}

.threeb-followup-item-system .threeb-followup-icon {
	background-color: #eef0ee;
	color: #6b746e;
}

.threeb-followup-meta {
	font-size: 13px;
	color: #6b746e;
	margin-bottom: 4px;
}

.threeb-followup-note {
	color: #2b2f2c;
}

.threeb-followup-reminder {
	margin-top: 6px;
	font-size: 13px;
	color: var(--threeb-verde);
}

/* Barra lateral do Lead: dica de follow-up, card de Agenda e lista de Estagios.
   Fontes/espacamento alinhados ao restante da pagina (publico 60+: nada
   pequeno ou apertado). */
.threeb-followup-tip {
	background: #f2f5f2;
	border-left: 4px solid var(--threeb-dourado);
	border-radius: 4px;
	padding: 18px 20px;
	font-size: 15px;
}

.threeb-followup-tip strong {
	color: var(--threeb-verde);
	font-size: 16px;
}

.threeb-reminder-box {
	border: 1px solid #e5e8e3;
	border-left: 4px solid var(--threeb-dourado);
	border-radius: 4px;
	padding: 18px 20px;
}

.threeb-reminder-date {
	font-weight: 700;
	font-size: 17px;
	color: var(--threeb-verde);
}

.threeb-reminder-label {
	font-size: 15px;
	color: #6b746e;
}

.threeb-reminder-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--threeb-verde);
	text-decoration: underline;
}

/* Estagios: checklist vertical (tipo timeline), com uma linha conectando
   os pontos ja alcancados aos pendentes. */
.threeb-stage-list {
	position: relative;
	padding-left: 22px;
}

.threeb-stage-list li {
	position: relative;
	padding-bottom: 20px;
}

.threeb-stage-list li:last-child {
	padding-bottom: 0;
}

.threeb-stage-list li::before {
	content: '';
	position: absolute;
	left: -18px;
	top: 18px;
	bottom: -2px;
	width: 2px;
	background: #e5e8e3;
}

.threeb-stage-list li:last-child::before {
	display: none;
}

.threeb-stage-dot {
	position: absolute;
	left: -23px;
	top: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #e5e8e3;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #e5e8e3;
}

.threeb-stage-list li.is-reached .threeb-stage-dot {
	background: var(--threeb-dourado);
	box-shadow: 0 0 0 1px var(--threeb-dourado);
}

.threeb-stage-list li.is-current .threeb-stage-dot {
	background: var(--threeb-verde);
	box-shadow: 0 0 0 1px var(--threeb-verde);
}

.threeb-stage-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #b7bdb8;
}

.threeb-stage-list li.is-reached .threeb-stage-label {
	color: var(--threeb-verde);
}

.threeb-stage-date {
	display: block;
	font-size: 13.5px;
	color: #9aa39c;
}

/* Icones proprios (SVG, sem fonte externa) dos 3 tipos de follow-up sem
   equivalente na fonte houzez-icon - so no seletor "Tipo de Follow-up" do
   modal (bootstrap-select exibe data-icon como uma classe CSS, nao aceita
   SVG inline diretamente; fora do modal, a lista de follow-ups ja usa o
   SVG bruto via ThreeB_Followups::icon_svg(), sem precisar deste mask). */
.threeb-icon-atualizacao::before,
.threeb-icon-ligacao-sem-contato::before,
.threeb-icon-visita-realizada::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.threeb-icon-atualizacao::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%201%201-2.64-6.36'/%3E%3Cpath%20d='M21%203v6h-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%201%201-2.64-6.36'/%3E%3Cpath%20d='M21%203v6h-6'/%3E%3C/svg%3E");
}

.threeb-icon-ligacao-sem-contato::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cline%20x1='7'%20y1='7'%20x2='17'%20y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cline%20x1='7'%20y1='7'%20x2='17'%20y2='17'/%3E%3C/svg%3E");
}

.threeb-icon-visita-realizada::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2011%204l8%206.5'/%3E%3Cpath%20d='M5%2010.5V19a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-8.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2011%204l8%206.5'/%3E%3Cpath%20d='M5%2010.5V19a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-8.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
 * Pagina de Detalhes do Lead - layout espacoso e de leitura facil.
 * ---------------------------------------------------------------------
 * Publico-alvo do painel (corretores experientes, muitos com 60+ anos):
 * fontes grandes, blocos com respiro generoso e botoes de acao bem
 * visiveis - prioridade sobre densidade de informacao. Sempre que um
 * grid (fatos do imovel, metadados) tiver largura curta demais para 2
 * colunas confortaveis, ele cai para 1 coluna sozinho (auto-fit) - nunca
 * fica espremido.
 * ========================================================================== */

/* Wrapper neutro da pagina inteira - de proposito SEM a classe nativa
   "houzez-inquiry" (ela e display:flex, pensada para o layout antigo de
   2 colunas fixas e brigava com o grid Bootstrap abaixo). So repõe o
   respiro que aquela classe dava. */
.threeb-lead-page {
	margin-top: 24px;
}

/* Grid principal: coluna de conteudo (Notas/Interesse/Metadados/Abas) +
   coluna de acao (Estagios/Agenda). Reaproveita o grid do Bootstrap
   (col-lg-8/col-lg-4) ja usado no restante do tema - so o espacamento
   entre as duas colunas e novo. */
.threeb-lead-grid {
	margin-top: 28px;
	row-gap: 28px;
}

.threeb-lead-main {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --------------------------------------------------------------------------
 * Cabecalho de identidade: nome + estagio + contato instantaneo.
 * -------------------------------------------------------------------------- */
.threeb-lead-header {
	background: var(--threeb-verde);
	border-radius: 14px;
	padding: 36px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: #fff;
}

.threeb-lead-header-identity {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.threeb-lead-name {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.threeb-lead-edit-link {
	display: inline-flex;
	align-items: center;
	color: var(--threeb-dourado);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.threeb-lead-edit-link:hover {
	color: #fff;
}

.threeb-stage-badge {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--threeb-dourado);
	color: var(--threeb-verde-escuro);
	vertical-align: middle;
}

.threeb-lead-contact-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* Botoes de contato: alvo de toque grande de proposito (min. ~50px de
   altura) - "facil de clicar" e um requisito explicito, nao um detalhe. */
.threeb-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	padding: 16px 28px;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.threeb-contact-btn:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
	transform: translateY(-1px);
}

.threeb-contact-btn i {
	color: var(--threeb-dourado);
	font-size: 24px;
}

.threeb-contact-btn-whatsapp {
	background: #25d366;
	border-color: #25d366;
}

.threeb-contact-btn-whatsapp:hover {
	background: #1fb955;
}

.threeb-contact-btn-whatsapp i {
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Cartoes de conteudo principal: Observacoes/Notas e Intencao de Compra.
 * -------------------------------------------------------------------------- */
.threeb-card-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--threeb-verde);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
}

.threeb-card-title i {
	font-size: 22px;
}

.threeb-notes-panel {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-left: 5px solid var(--threeb-dourado);
	border-radius: 12px;
	padding: 30px 36px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.threeb-notes-text {
	margin: 0;
	font-size: 17px;
	color: #3a3f3b;
	line-height: 1.7;
}

.threeb-interest-card {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 12px;
	padding: 30px 36px;
}

.threeb-interest-property {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #f2f5f2;
	border-radius: 10px;
	padding: 20px 24px;
	margin-bottom: 24px;
	color: var(--threeb-verde);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.threeb-interest-property:hover {
	background: var(--threeb-verde);
	color: #fff;
}

.threeb-interest-property:hover .threeb-interest-property-code {
	color: var(--threeb-dourado);
}

.threeb-interest-property-code {
	color: var(--threeb-dourado);
	font-weight: 700;
	white-space: nowrap;
}

.threeb-interest-property-title {
	flex: 1;
}

.threeb-interest-property i {
	font-size: 20px;
}

/* minmax largo de proposito: numa coluna de ~750px (col-lg-8 tipico),
   isso da no maximo 2 fatos por linha, nunca 3-4 apertados. */
.threeb-interest-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.threeb-interest-fact-label {
	display: block;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a9083;
	margin-bottom: 5px;
}

.threeb-interest-fact-value {
	display: block;
	font-size: 19px;
	font-weight: 600;
	color: #232821;
}

.threeb-interest-fact-price .threeb-interest-fact-value {
	color: var(--threeb-verde);
	font-size: 22px;
}

/* --------------------------------------------------------------------------
 * Metadados secundarios: grid limpo, sem poluicao visual.
 * -------------------------------------------------------------------------- */
.threeb-meta-grid {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 12px;
	padding: 30px 36px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	column-gap: 32px;
	row-gap: 24px;
}

.threeb-meta-item {
	display: flex;
	flex-direction: column;
}

.threeb-meta-label {
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a9083;
	margin-bottom: 4px;
}

.threeb-meta-value {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #2b2f2c;
	word-break: break-word;
}

/* --------------------------------------------------------------------------
 * Card das abas (Visitas/Follow-up/Inquiries/etc.) - envolve o mecanismo
 * nativo do Houzez sem alterar seu HTML/JS, so com uma aparencia de
 * botoes grandes e claros em vez de links de texto pequenos.
 * -------------------------------------------------------------------------- */
.threeb-lead-tabs-card {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 12px;
	padding: 30px 36px;
}

.threeb-lead-tabs-card .propertie-list ul {
	flex-wrap: wrap;
	/* !important: a lista nativa ja tem a classe utilitaria do Bootstrap
	   "gap-2", que o proprio Bootstrap define com !important - sem isso
	   aqui, nosso gap maior (mais respiro entre os botoes) nao venceria. */
	gap: 10px !important;
	margin-bottom: 8px;
}

.threeb-lead-tabs-card .propertie-list ul li a {
	display: inline-block;
	padding: 12px 20px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--threeb-verde);
	background: #f2f5f2;
	border-radius: 8px;
	white-space: nowrap;
}

.threeb-lead-tabs-card .propertie-list ul li a:hover {
	background: #e4e9e3;
}

.threeb-lead-tabs-card .propertie-list ul li a.active {
	background: var(--threeb-verde);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Sidebar de acao: mesmo cartao branco dos demais, com respiro proprio.
 * -------------------------------------------------------------------------- */
.threeb-lead-side .threeb-lead-sidebar {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 12px;
	padding: 32px;
	position: sticky;
	top: 20px;
}

.threeb-lead-sidebar h5 {
	font-size: 20px;
}

.threeb-lead-extra {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px dashed #e5e8e3;
}

.threeb-lead-extra h6 {
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a9083;
	margin-bottom: 10px;
}

.threeb-lead-extra li {
	font-size: 14.5px;
	line-height: 1.6;
	color: #5a615c;
	margin-bottom: 8px;
}

@media (max-width: 991px) {
	.threeb-lead-side .threeb-lead-sidebar {
		position: static;
	}
}

/* Telas estreitas: cabecalho, cartoes e botoes reduzem uma marcha para
   nao virarem blocos gigantes demais no celular, mas continuam bem
   maiores que o padrao original do Houzez. */
@media (max-width: 576px) {
	.threeb-lead-header {
		padding: 26px 24px;
	}

	.threeb-lead-name {
		font-size: 26px;
	}

	.threeb-notes-panel,
	.threeb-interest-card,
	.threeb-meta-grid,
	.threeb-lead-tabs-card {
		padding: 22px 20px;
	}
}

/* --------------------------------------------------------------------------
 * Aba "Imoveis" do Lead (busca no estoque + imoveis vinculados)
 * ------------------------------------------------------------------------ */
.threeb-lp-search-panel {
	background: #f7f9f6;
	border: 1px solid #e5e8e3;
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 24px;
}

.threeb-lp-results-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
}

.threeb-lp-result-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 8px;
	padding: 10px 14px;
}

.threeb-lp-result-info {
	flex: 1;
	min-width: 0;
}

.threeb-lp-thumb,
.threeb-lp-thumb-empty {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.threeb-lp-thumb-empty {
	background: #eef1ec;
	border: 1px solid #e0e4dd;
}

.threeb-lp-thumb-cell .threeb-lp-thumb,
.threeb-lp-thumb-cell .threeb-lp-thumb-empty {
	width: 48px;
	height: 48px;
}

.threeb-lp-actions a,
.threeb-lp-actions button {
	color: var(--threeb-verde);
}

.threeb-lp-actions a:hover,
.threeb-lp-actions button:hover {
	color: var(--threeb-dourado);
}

.threeb-lp-actions .icon-bin,
.threeb-lp-remove-btn {
	color: #b3352c;
}

#threeb-lp-toggle-search {
	background-color: var(--threeb-verde);
	border-color: var(--threeb-verde);
}

#threeb-lp-toggle-search:hover {
	background-color: var(--threeb-verde-escuro);
	border-color: var(--threeb-verde-escuro);
}

@media (max-width: 767px) {
	.threeb-lp-result-card {
		flex-wrap: wrap;
	}
}

/* Botao "Visita Realizada" (1 toque) - lista de Visitas do painel. */
.threeb-visit-checkin-btn {
	background: var(--threeb-verde);
	color: var(--threeb-dourado);
	border: 1px solid var(--threeb-verde);
	font-weight: 700;
	border-radius: 6px;
	white-space: nowrap;
}

.threeb-visit-checkin-btn:hover:not(:disabled) {
	background: var(--threeb-verde-escuro);
	color: var(--threeb-dourado);
}

.threeb-visit-checkin-btn:disabled {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
 * Duplo preco (Venda + Locacao) na listagem "Imoveis" do painel - ver
 * inc/dual-price-display.php (houzez_property_price_admin). O tema pai
 * imprimia os dois valores empilhados sem NENHUM rotulo (so um <br/>),
 * causando a confusao visual reportada. Reaproveita ".threeb-price-label"
 * (mesmo selo do front-end publico, definido em global-frontend.css) para
 * manter os dois contextos consistentes.
 * -------------------------------------------------------------------------- */
.threeb-dashboard-price-stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.threeb-dashboard-price-row-locacao {
	font-size: 13px;
	color: #5a615c;
}

/* --------------------------------------------------------------------------
 * Redesign da listagem "Imoveis" (tabela principal do painel) - identidade
 * visual 3B aplicada por cima da estrutura nativa do Houzez (linhas,
 * cabecalho, abas Todos/Meu/Publicados/Rascunhos, badges de status), sem
 * nenhuma mudanca de markup: so seletores oficiais ja usados pelo tema pai
 * (.houzez-data-table, .table, .dashboard-label, .nav-tabs).
 * -------------------------------------------------------------------------- */
.houzez-data-table {
	background: #fff;
	border: 1px solid #e5e8e3;
	border-radius: 12px;
	overflow: hidden;
}

.houzez-data-table table thead th {
	background: var(--threeb-verde);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
	padding: 14px 12px;
	white-space: nowrap;
}

.houzez-data-table table tbody tr {
	transition: background-color 0.12s ease;
}

.houzez-data-table table tbody tr:hover {
	background-color: #f7f9f6;
}

.houzez-data-table table tbody td {
	vertical-align: middle;
	padding: 14px 12px;
	border-color: #eef1ec;
}

/* Badges de status (Approved/Draft/Pending/etc.) - cores semanticas mantidas
   (verde/amarelo/vermelho ja comunicam o estado corretamente), so a forma
   vira pilula arredondada para combinar com o restante do painel. */
.houzez-data-table .dashboard-label {
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	padding: 5px 14px;
	letter-spacing: 0.01em;
}

/* Abas "Todos/Meu/Publicados/Rascunhos" acima da tabela. */
.dashboard-content .nav-tabs .nav-link.active {
	color: var(--threeb-verde);
	border-color: var(--threeb-verde) var(--threeb-verde) #fff;
	font-weight: 700;
}

.dashboard-content .nav-tabs .nav-link:not(.active):hover {
	color: var(--threeb-verde);
}

/* Botao "Aplicar" (Acoes em massa) e "Filtros" - mesma identidade dos
   demais botoes primarios do painel (.dashboard-right .btn-primary ja
   cobre o verde; aqui so o hover do botao "outline" de Filtros). */
.houzez-data-content .btn-outline-secondary:hover {
	background-color: var(--threeb-verde);
	border-color: var(--threeb-verde);
	color: #fff;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * TABELAS LARGAS DO PAINEL - ROLAGEM HORIZONTAL (25/08/2026)
 * --------------------------------------------------------------------------
 * Reportado pelo cliente: em janela menor que ~1500px a tabela de Imoveis
 * perdia as colunas "Completude" e "Acoes", e o botao "Ver Lead" do Historico
 * de Transferencias de Lead ficava cortado no lado direito - sem barra de
 * rolagem nenhuma, entao parecia que a coluna simplesmente nao existia.
 *
 * Sao DUAS causas somadas, e so corrigir uma nao resolve:
 *
 * 1. O tema pai sobrescreve o .table-responsive do Bootstrap com
 *    "overflow-x: visible" (css/style-ltr.css) - isso mata a rolagem
 *    horizontal que o proprio Bootstrap ja daria de graca.
 * 2. Este arquivo poe "overflow: hidden" em .houzez-data-table, para o
 *    border-radius de 12px nao vazar - e e esse hidden que APARA o que
 *    transbordou depois do item 1.
 *
 * A correcao devolve a rolagem ao .table-responsive, que fica DENTRO da caixa
 * arredondada (o raio continua intacto, nao ha por que mexer no hidden), e
 * deixa a barra sempre visivel de proposito: barra "overlay", que so aparece
 * ao passar o rato, mantinha o utilizador achando que a tabela estava cortada.
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.dashboard-content,
.dashboard-content .houzez-data-content,
.dashboard-content .houzez-data-table {
	max-width: 100%;
	min-width: 0;
}

.dashboard-content .table-responsive,
.dashboard-content .houzez-data-table.table-responsive {
	overflow-x: auto !important;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #c69a5a #efece4;
}

/* Barra sempre visivel (nao "overlay"): e a unica pista de que ha coluna
   a mais fora do campo de visao. */
.dashboard-content .table-responsive::-webkit-scrollbar {
	height: 10px;
}

.dashboard-content .table-responsive::-webkit-scrollbar-track {
	background: #efece4;
	border-radius: 0 0 12px 12px;
}

.dashboard-content .table-responsive::-webkit-scrollbar-thumb {
	background: #c69a5a;
	border-radius: 8px;
}

.dashboard-content .table-responsive::-webkit-scrollbar-thumb:hover {
	background: #a97f42;
}