/* ============================================================
   dashboard.imovelrx.css — dashboard do ImóvelRX (repo: imovelrx)
   ============================================================
   Só o que é deste produto. A base comum (filtros, cartão, modo de
   gestão, responsivo...) vive em rx-core/dashboard-layout.css, que
   tem de ser carregado ANTES deste ficheiro.
   ============================================================ */

/* ── Espaçamento da linha de acções da barra de filtros ── */
.filter-bar-actions { gap: 0.375rem; }
@media (max-width: 640px) {
  .filter-bar-actions { gap: 0.3rem; }
}

/* ── Badge de mercado junto ao título do cartão ── */
.analysis-title .card-market-badge {
  font-family: var(--rx-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: 5px;
  line-height: 1.3;
}
.card-market-badge.score-pill-good { background: color-mix(in srgb, var(--rx-good) 14%, transparent); color: var(--rx-good); }
.card-market-badge.score-pill-bad  { background: color-mix(in srgb, var(--rx-bad) 14%, transparent);  color: var(--rx-bad); }
.card-market-badge.score-pill-okay { background: color-mix(in srgb, var(--rx-warn) 14%, transparent); color: var(--rx-warn); }
.card-market-badge.score-pill-warn { background: rgba(249,115,22,0.18); color: #fb923c; }
html.light .card-market-badge.score-pill-warn { background: rgba(234,88,12,0.14);  color: #c2410c; }

/* ── SCORES INLINE (desktop) ── */
.analysis-scores-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* ── SCORES ROW (mobile) — escondido por defeito ── */
.analysis-card-scores-row {
  display: none;
  padding: 0 1.25rem 1rem;
  border-top: 1px solid var(--wire-2);
}

.scores-mobile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 0.75rem;
}

/* ── SCORE CHIPS ── */
.score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-family: var(--rx-font-mono);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.score-chip-label {
  font-family: var(--rx-font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.score-chip.good { background: color-mix(in srgb, var(--rx-good) 8%, transparent); border-color: color-mix(in srgb, var(--rx-good) 22%, transparent); color: var(--rx-good); }
.score-chip.okay { background: color-mix(in srgb, var(--rx-warn) 8%, transparent); border-color: color-mix(in srgb, var(--rx-warn) 22%, transparent); color: var(--rx-warn); }
.score-chip.bad  { background: color-mix(in srgb, var(--rx-bad) 8%, transparent);  border-color: color-mix(in srgb, var(--rx-bad) 22%, transparent);  color: var(--rx-bad); }

@media (max-width: 600px) {
  /* Scores: esconder inline, mostrar row */
  .analysis-scores-inline { display: none; }
  .analysis-card-scores-row { display: block; }
}

/* ── Scores no corpo expandido ── */
.analysis-scores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  /* Ícones em vez de texto — os 3 botões (Ver anúncio, Reanalisar, Ver
     relatório) passam a mostrar só o ícone em mobile, texto escondido por
     completo (antes só se escondia a palavra "completo", deixando texto
     a mais para 3 botões caberem numa linha). Ícones já são
     suficientemente representativos (link externo, refrescar,
     documento) para dispensar legenda em ecrãs pequenos. */
  .btn-label-extra { display: none; }
  .analysis-card-body-footer { flex-wrap: nowrap; }
  .analysis-view-btn {
    padding: 0.5625rem 0.75rem;
    font-size: 0.75rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .analysis-view-btn svg { margin-right: 0 !important; }
}

/* ── Tipo de transacção (canto do cartão) ──
   Neutro (fase 3): o texto "Venda"/"Arrendamento" já distingue os dois;
   o amarelo anterior confundia-se com o âmbar das acções. */
.transaction-badge.rent,
.transaction-badge.sale {
  background: var(--rx-surface-2);
  color: var(--rx-text-2);
  border-right: 1px solid var(--rx-border);
  border-bottom: 1px solid var(--rx-border);
}

/* ── Símbolo € no botão de ordenar por preço ──────────────────── */
.sort-euro { font-weight: 800; font-size: 0.9rem; line-height: 1; }
@media (max-width: 640px) {
  .sort-btn .sort-euro { display: inline; }
}

/* ── Badge de pontuação global no card ────────────────────────── */
.score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--rx-font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 650;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  white-space: nowrap;
}
.score-badge-max { font-size: 0.65rem; opacity: 0.6; font-weight: 400; }
.score-badge-star { flex-shrink: 0; align-self: center; opacity: 0.9; }
.score-badge.good { background: color-mix(in srgb, var(--rx-good) 12%, transparent); color: var(--rx-good); }
.score-badge.mid  { background: color-mix(in srgb, var(--rx-warn) 12%, transparent); color: var(--rx-warn); }
.score-badge.low  { background: color-mix(in srgb, var(--rx-bad) 12%, transparent); color: var(--rx-bad); }

/* Transação já não tem legenda ("Transação") nem título ao lado — o
   toggle (abaixo) é grande e auto-evidente o suficiente para dispensar
   a legenda, ocupando a linha toda sozinho. */
.filter-field-tx { display: block; }

/* ── Identidade (fase 3): cartão da lista com a forma do produto —
   raio 14px e sombra suave (a base comum em rx-core/dashboard-layout.css
   usa 12px sem sombra). ── */
.analysis-card { border-radius: 14px; border-color: var(--rx-border); box-shadow: 0 1px 2px rgba(23,24,26,0.05), 0 1px 3px rgba(23,24,26,0.06); }
.analysis-card:hover { border-color: var(--rx-border-strong); }
html:not(.light) .analysis-card { box-shadow: 0 1px 2px rgba(0,0,0,0.30); }

/* Estado "em análise" — o badge partilhado (components.css) usa o tom de
   hover do destaque como texto; com o âmbar claro do ImóvelRX isso perde
   contraste no tema claro, por isso aqui usa o tom de texto do destaque. */
.status-badge.processing,
.status-badge.pending { color: var(--rx-accent-text); }