/*
 * Chat Teraleads — refinamento do relatório Visão geral
 * Compatibilidade validada: Chatwoot Community Edition v4.18.0
 *
 * O seletor-raiz identifica exclusivamente a Visão geral pela presença do
 * bloco conversation-metric. Outros relatórios permanecem inalterados.
 */

:root {
  --tera-report-navy: 10 29 74;
  --tera-report-midnight: 4 9 22;
  --tera-report-cyan: 0 196 239;
  --tera-report-grey: 100 116 139;
  --tera-report-white: 244 245 247;
  --tera-report-radius: 18px;
  --tera-report-control-radius: 11px;
  --tera-report-motion: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Usa melhor a largura disponível para o mapa de 24 horas. */
#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) {
  width: 100%;
  max-width: 76rem !important;
  padding-bottom: 48px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > section:first-child {
  padding-top: 28px !important;
  padding-bottom: 20px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > section:first-child
  .text-heading-1 {
  min-height: auto !important;
  color: rgb(var(--tera-report-midnight)) !important;
  font-size: clamp(1.5rem, 2vw, 1.875rem) !important;
  font-weight: 650;
  letter-spacing: -0.025em;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6 {
  gap: 20px !important;
}

/* Cartões com superfície mais limpa e profundidade discreta. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  div:has(> .card-header) {
  position: relative;
  min-height: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  overflow: clip;
  border: 1px solid rgb(var(--tera-report-navy) / 8%);
  border-radius: var(--tera-report-radius) !important;
  outline: none !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 255 255 / 93%)) !important;
  box-shadow:
    0 1px 2px rgb(var(--tera-report-midnight) / 4%),
    0 12px 32px rgb(var(--tera-report-midnight) / 5%) !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  div:has(> .card-header)::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  content: '';
  background: linear-gradient(
    90deg,
    rgb(var(--tera-report-cyan) / 82%),
    rgb(var(--tera-report-cyan) / 14%) 34%,
    transparent 70%
  );
  pointer-events: none;
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) .card-header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 20px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  h5 {
  color: rgb(var(--tera-report-midnight)) !important;
  font-size: 1.0625rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.012em;
}

/* Selo ao vivo: menor e com o ciano reservado ao estado importante. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  > div:first-child
  > span {
  min-height: 22px;
  padding: 3px 8px !important;
  border: 1px solid rgb(var(--tera-report-cyan) / 16%);
  border-radius: 999px !important;
  background: rgb(var(--tera-report-cyan) / 9%) !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  > div:first-child
  > span
  span:last-child {
  color: rgb(0 119 145) !important;
  font-weight: 600;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  > div:last-child {
  flex-wrap: wrap;
  gap: 8px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  button {
  min-height: 36px;
  border: 1px solid rgb(var(--tera-report-navy) / 8%) !important;
  border-radius: var(--tera-report-control-radius) !important;
  background: rgb(var(--tera-report-white) / 78%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
  transition:
    background-color var(--tera-report-motion),
    border-color var(--tera-report-motion),
    box-shadow var(--tera-report-motion),
    transform var(--tera-report-motion);
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  button:hover {
  border-color: rgb(var(--tera-report-cyan) / 24%) !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 5px 16px rgb(var(--tera-report-midnight) / 7%);
  transform: translateY(-1px);
}

/* Primeira linha: proporção, leitura e ritmo dos KPIs. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr);
  align-items: stretch !important;
  gap: 20px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  > div {
  width: 100% !important;
  max-width: none !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  > div:last-child
  .card-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body
  > div {
  min-width: 0;
  padding: 12px !important;
  border: 1px solid rgb(var(--tera-report-navy) / 6%);
  border-radius: 13px;
  background: rgb(var(--tera-report-white) / 62%);
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body
  h3 {
  overflow: hidden;
  margin: 0;
  color: rgb(var(--tera-report-grey)) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  > div:last-child
  .card-body
  h3 {
  min-height: 1.8rem;
  overflow: visible;
  font-size: 0.6875rem !important;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body
  p {
  margin-top: 8px !important;
  color: rgb(var(--tera-report-navy)) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  > div:last-child
  .card-body
  > div:first-child
  p {
  color: rgb(0 142 173) !important;
}

/* Heatmaps: mais área útil, controles alinhados e rolagem apenas se necessária. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(2)
  .card-body,
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(3)
  .card-body {
  display: block !important;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-color: rgb(var(--tera-report-navy) / 18%) transparent;
  scrollbar-width: thin;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(2)
  .card-body
  > *,
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(3)
  .card-body
  > * {
  min-width: 58rem;
}

/* O componente nativo usa 32 px para duas linhas (dia + data). */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .cw-viz-heatmap__grid {
  --cw-viz-heatmap-cell-height: 40px !important;
  --cw-viz-heatmap-row-label-width: 108px !important;
  --cw-viz-heatmap-grid-min-width: 912px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .cw-viz-heatmap__row-label {
  min-height: 40px;
  gap: 2px;
  justify-content: center;
  line-height: 1.1;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .cw-viz-heatmap__row-label
  strong {
  font-size: 0.75rem;
  line-height: 1.1;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .cw-viz-heatmap__row-label
  span {
  font-size: 0.6875rem;
  line-height: 1.1;
}

/* Tabelas: cabeçalho mais definido, linhas leves e estado vazio compacto. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(n + 4)
  div:has(> .card-header) {
  padding-bottom: 20px !important;
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(n + 4)
  .card-body {
  display: block !important;
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) table {
  overflow: hidden;
  border: 1px solid rgb(var(--tera-report-navy) / 6%);
  border-radius: 12px;
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) thead {
  background: rgb(var(--tera-report-white) / 70%);
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) th {
  color: rgb(var(--tera-report-grey)) !important;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.015em;
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) tbody tr {
  transition: background-color var(--tera-report-motion);
}

#app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) tbody tr:hover {
  background: rgb(var(--tera-report-cyan) / 4%);
}

#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:nth-child(n + 4)
  .card-body
  h3 {
  margin-block: 28px !important;
  color: rgb(var(--tera-report-grey)) !important;
  font-size: 0.9375rem !important;
  font-weight: 500;
}

/* Foco de teclado consistente com a marca. */
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  a:focus-visible,
#app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  button:focus-visible {
  outline: 2px solid rgb(var(--tera-report-cyan) / 86%) !important;
  outline-offset: 2px !important;
}

/* Tema escuro. */
.dark #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) {
  --tera-report-white: 18 28 49;
}

.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > section:first-child
  .text-heading-1,
.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  h5 {
  color: rgb(255 255 255 / 94%) !important;
}

.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  div:has(> .card-header) {
  border-color: rgb(255 255 255 / 8%);
  background:
    linear-gradient(
      180deg,
      rgb(var(--tera-report-midnight) / 86%),
      rgb(var(--tera-report-navy) / 72%)
    ) !important;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 18%),
    0 14px 36px rgb(0 0 0 / 16%) !important;
}

.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body
  > div {
  border-color: rgb(255 255 255 / 7%);
  background: rgb(255 255 255 / 5%);
}

.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  > .flex.flex-col.gap-4.pb-6
  > div:first-child
  .card-body
  p {
  color: rgb(255 255 255 / 94%) !important;
}

.dark
  #app
  .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
  .card-header
  button {
  border-color: rgb(255 255 255 / 9%) !important;
  background: rgb(255 255 255 / 7%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.dark #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) table {
  border-color: rgb(255 255 255 / 7%);
}

.dark #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) thead {
  background: rgb(255 255 255 / 5%);
}

@media (max-width: 1023px) {
  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    > .flex.flex-col.gap-4.pb-6
    > div:first-child {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) {
    padding-bottom: 28px !important;
  }

  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    div:has(> .card-header) {
    padding: 18px !important;
    border-radius: 15px !important;
  }

  #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) .card-header {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    .card-header
    > div:last-child {
    justify-content: flex-start !important;
  }

  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    > .flex.flex-col.gap-4.pb-6
    > div:first-child
    .card-body,
  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    > .flex.flex-col.gap-4.pb-6
    > div:first-child
    > div:last-child
    .card-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    > .flex.flex-col.gap-4.pb-6
    > div:first-child
    .card-body,
  #app
    .max-w-5xl.mx-auto.pb-12:has(.conversation-metric)
    > .flex.flex-col.gap-4.pb-6
    > div:first-child
    > div:last-child
    .card-body {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) *,
  #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) *::before,
  #app .max-w-5xl.mx-auto.pb-12:has(.conversation-metric) *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}