/* ══════════════════════════════════════════════════
   Dashboard — Modern Design System
   Mesma linha do login: Inter, brand #DB4437, clean
   ══════════════════════════════════════════════════ */

:root {
  --brand:      #DB4437;
  --brand-dark: #c53929;
  --text:       #1f2328;
  --text-muted: #656d76;
  --border:     #d0d7de;
  --bg:         #f6f8fa;
  --white:      #ffffff;
  --nav-h:      56px;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Search bar ─────────────────────────────────── */
#cw-search-bar {
  background: linear-gradient(135deg, #e33226 0%, var(--brand) 55%, #e5574c 100%) !important;
  box-shadow: 0 2px 8px rgba(180,30,20,0.22);
  border-bottom: 2px solid rgba(0,0,0,0.10);
  padding: 10px 0 !important;
}

.cw-search-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.95) !important;
  letter-spacing: 0.01em;
}

/* Search buttons (Em um novo local / Nos meus locais) */
.cw-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  height: 38px !important;
  padding: 0 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  transition: background 0.15s, border-color 0.15s, transform 0.12s !important;
  white-space: nowrap;
  cursor: pointer;
}

.cw-search-btn:hover {
  background: rgba(255,255,255,0.26) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.cw-search-btn:active {
  transform: translateY(0) !important;
}

/* Prospecção (green accent) */
.cw-search-btn-prospect {
  background: rgba(22,163,74,0.80) !important;
  border-color: rgba(22,163,74,0.40) !important;
}

.cw-search-btn-prospect:hover {
  background: rgba(22,163,74,1) !important;
  border-color: rgba(22,163,74,0.70) !important;
}

/* Inputs dentro da barra de busca secundária (#div-busca) */
#div-busca .form-control {
  height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.90) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  color: var(--text) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#div-busca .form-control:focus {
  background: #fff !important;
  border-color: rgba(255,255,255,0.70) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18) !important;
  outline: none !important;
}

#div-busca .form-control::placeholder {
  color: #9ca3af;
  font-style: italic;
}

#div-busca .btn-dark {
  height: 38px !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  background: rgba(0,0,0,0.55) !important;
  border: none !important;
  transition: background 0.15s !important;
}

#div-busca .btn-dark:hover {
  background: rgba(0,0,0,0.75) !important;
}

/* Botão Pesquisar e Voltar */
#busca-pontos, #busca-cancelar .btn {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  height: 38px !important;
}

/* Após a medição, PDF e Análise entram na mesma caixa (col-2) que Pesquisar/Voltar:
   a caixa ocupa o espaço restante da barra e os botões não quebram linha */
#div-busca-pontos {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
  gap: 6px;
}
#div-busca-pontos .btn {
  height: 38px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
#div-busca-pontos .btn.no-show {
  display: none !important;
}
#busca-cancelar {
  flex-shrink: 0;
}

/* Badge "Novo!" */
.badge-novo {
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  background: #16a34a;
  color: #fff;
  border-radius: 4px;
  padding: 2px 5px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Trava o scroll da página */
html {
  overflow: hidden;
}

/* Mapa preenche exatamente o espaço restante após header (56px) + barra de busca (76px) + margem (8px) */
#map {
  height: calc(100vh - 140px) !important;
}

/* Ao abrir uma pesquisa salva, a linha "Pesquisa realizada em..." (28px) fica acima do mapa */
#dashboard:has(#div-busca-realizada:not(.no-show)) #map,
#dashboard:has(#div-busca-realizada:not(.no-show)) #div-lojas {
  height: calc(100vh - 168px) !important;
}

/* Painel lateral flutua sobre o mapa sem deslocá-lo */
#cw {
  position: relative;
  margin-top: 8px !important;
}

/* O map.js troca #mymap para col-9 ao exibir resultados; com o painel em overlay o mapa ocupa a largura toda */
#mymap {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

#div-lojas {
  position: absolute !important;
  left: 8px;
  top: 0;
  z-index: 10;
  width: 25%;
  height: calc(100vh - 140px);
  box-shadow: 2px 0 12px rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.9) !important;
}

/* Volume de buscas da palavra-chave, abaixo do campo da barra */
.cw-volume-area { position: relative; }
#cw-volume-termo {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1f2328;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
@media (max-width: 991px) {
  #cw-volume-termo { position: static; width: auto; max-width: none; margin-top: 4px; }
}

/* Celular e tablet: a página rola, e os resultados ficam abaixo do mapa em vez de sobre ele */
@media (max-width: 991px) {
  html { overflow: auto; }
  #cw-search-bar { padding: 8px 0 !important; }
  #map,
  #dashboard:has(#div-busca-realizada:not(.no-show)) #map { height: 65vh !important; min-height: 360px; }
  #cw { flex-direction: column; }
  #mymap { order: 1; }
  #div-lojas,
  #dashboard:has(#div-busca-realizada:not(.no-show)) #div-lojas {
    position: static !important;
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: 70vh;
    margin-top: 8px !important;
    background: #fff !important;
    box-shadow: none;
  }
}

/* Celular e tablet: a barra de busca herdava margens negativas e ficava deslocada para a esquerda */
@media (max-width: 991px) {
  #div-busca {
    width: 100%;
    margin: 0 !important;
    padding: 0 16px !important;
  }
  #div-busca > div:first-child { display: none; }
  #div-busca > div,
  #div-busca-novo-local > div,
  #div-busca-meu-local > div {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  #div-busca > div { margin-bottom: 6px !important; }
  #div-busca-novo-local > div:not(:last-child) { margin-bottom: 6px !important; }
  #div-busca-novo-local { padding: 0 !important; }
  #div-busca-pontos {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px;
    width: 100%;
    margin-bottom: 0 !important;
    font-size: 0; /* some o espaço em branco do HTML entre os botões */
  }
  #div-busca-pontos .btn { margin: 0 !important; font-size: 0.875rem; }
}
@media (max-width: 991px) {
  /* colunas empilhadas também no tablet, e botões que quebram linha em vez de sair da tela */
  #div-busca > div,
  #div-busca-novo-local > div,
  #div-busca-meu-local > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #div-busca-pontos { flex-wrap: wrap !important; }
}

/* Setas para ver os mapas das buscas anteriores */
.cw-hist { display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); margin-bottom: 16px; padding: 8px; border: 1px solid #d0d7de; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.15); color: #1f2328; font-family: 'Inter', -apple-system, sans-serif; font-size: 13px; }
.cw-hist button { flex: none; width: 36px; height: 36px; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; color: #1f2328; font-size: 22px; line-height: 1; cursor: pointer; }
.cw-hist button:hover:not(:disabled) { background: #f6f8fa; }
.cw-hist button:disabled { opacity: 0.35; cursor: default; }
.cw-hist-info { min-width: 190px; text-align: center; line-height: 1.35; }
.cw-hist-conta, .cw-hist-indices { color: #656d76; font-size: 12px; }
.cw-hist-aviso { max-width: 300px; margin-top: 2px; color: #656d76; font-size: 11px; }
.cw-hist .cw-hist-gif { width: auto; height: 28px; margin-top: 4px; padding: 0 10px; font-size: 12px; font-weight: 500; line-height: 1; }