/* ==========================================================================
   Métricas de mensagens — peças próprias da tela (prefixo mt-).
   Cards, tabelas, botões e campos vêm do design system; aqui só o que os
   totais e o gráfico precisam. As duas séries usam tokens que já existem: o
   vermelho da marca (recebidas) e o azul do Bitrix24 (enviadas). O par foi
   validado para daltonismo antes de entrar.
   ========================================================================== */
:root {
  --mt-in: var(--ui-color-accent-main-primary);  /* recebidas */
  --mt-out: var(--app-info-color);               /* enviadas  */
}

/* ------------------------------------------------------------- filtros */
.mt-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.mt-segmentado {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--ui-color-bg-content-tertiary);
  border-radius: var(--ui-border-radius-md);
}
.mt-seg {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: var(--ui-border-radius-sm);
  color: var(--ui-color-base-2); text-decoration: none;
  font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-medium);
  white-space: nowrap; transition: background-color .1s linear, color .1s linear;
}
.mt-seg:hover { color: var(--ui-color-base-1); background: var(--ui-color-bg-state-hover-default); }
.mt-seg.is-on {
  background: var(--ui-color-bg-content-primary); color: var(--ui-color-base-1);
  box-shadow: 0 1px 2px rgb(0 51 102 / .08);
}
/* Os seletores ficam à direita e encolhem juntos quando a barra aperta: com
   cinco filtros, um min-width de 230px estourava a linha em telas médias. */
.mt-filtros > .mt-select:first-of-type { margin-left: auto; }
.mt-select { width: auto; min-width: 11rem; max-width: 16rem; }
@media (max-width: 1100px) {
  .mt-filtros > .mt-select:first-of-type { margin-left: 0; }
  .mt-select { min-width: 9rem; }
}

/* Os atalhos de período viram <label> com um radio escondido dentro (um
   formulário só para todos os filtros). O rótulo continua clicável e o foco de
   teclado passa a ser do radio, então ele precisa aparecer no <label>. */
.mt-seg { cursor: pointer; }
.mt-seg:has(input:focus-visible) {
  outline: 2px solid var(--ui-color-design-outline-focused-stroke);
  outline-offset: 2px;
}

/* Duas tabelas lado a lado (uso de IA: por modelo e por origem). */
.mt-duas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* período à mão: fica ao lado dos atalhos e se acende quando está em uso */
.mt-datas {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 3px 3px 8px;
  border: 1px solid transparent; border-radius: var(--ui-border-radius-md);
  transition: background-color .1s linear, border-color .1s linear;
}
.mt-datas.is-on {
  background: var(--ui-color-bg-content-primary);
  border-color: var(--ui-color-design-outline-stroke);
  box-shadow: 0 1px 2px rgb(0 51 102 / .08);
}
.mt-data { width: auto; height: 30px; padding: 0 8px; font-size: var(--ui-font-size-md); }
.mt-ate { color: var(--ui-color-base-4); }

/* --------------------------------------------------------- sub-painéis */
.mt-abas {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 18px; padding-bottom: 2px;
  border-bottom: 1px solid var(--ui-color-design-outline-stroke);
}
.mt-aba {
  padding: 8px 14px; margin-bottom: -3px;
  border-bottom: 2px solid transparent;
  color: var(--ui-color-base-3); text-decoration: none;
  font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-medium);
  white-space: nowrap; transition: color .1s linear, border-color .1s linear;
}
.mt-aba:hover { color: var(--ui-color-base-1); }
.mt-aba.is-on { color: var(--ui-color-accent-main-primary); border-bottom-color: var(--ui-color-accent-main-primary); }

/* -------------------------------------------------------------- totais */
.mt-stats {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mt-stat .card-body { padding: 16px 18px; }
.mt-stat-label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--ui-font-size-md); color: var(--ui-color-base-2);
}
.mt-stat-value {
  margin: 8px 0 4px; font-size: 30px; line-height: 1.1;
  font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1);
  font-variant-numeric: tabular-nums;
}
.mt-stat-hint { font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); }

/* variação contra o período anterior: a seta carrega a cor, o texto fica neutro */
.mt-delta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium);
  color: var(--ui-color-base-2);
}
.mt-delta .ui-icon { flex: none; }
.mt-delta.is-up .ui-icon { color: var(--ui-color-accent-main-success-alt-2); transform: rotate(-45deg); }
.mt-delta.is-down .ui-icon { color: var(--ui-color-accent-main-alert); transform: rotate(45deg); }
.mt-delta.is-flat .ui-icon { display: none; }
.mt-delta-base {
  font-weight: var(--ui-font-weight-normal); color: var(--ui-color-base-3);
  font-size: var(--ui-font-size-xs);
}

/* ------------------------------------------------- identidade das séries */
.mt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.mt-dot.is-in { background: var(--mt-in); }
.mt-dot.is-out { background: var(--mt-out); }

.mt-legenda { margin-left: auto; display: flex; gap: 14px; }
.mt-key {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-normal);
  color: var(--ui-color-base-2);
}

/* ------------------------------------------------------------- gráfico */
.mt-chart { position: relative; }
.mt-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.mt-grid { stroke: var(--ui-color-base-7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mt-eixo { stroke: var(--ui-color-base-6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mt-axis {
  fill: var(--ui-color-base-3); font-size: 11px;
  font-family: var(--ui-font-family-primary); font-variant-numeric: tabular-nums;
}
.mt-bar.is-in { fill: var(--mt-in); }
.mt-bar.is-out { fill: var(--mt-out); }
.mt-area { stroke: none; }
.mt-area.is-in { fill: var(--mt-in); opacity: .07; }
.mt-area.is-out { fill: var(--mt-out); opacity: .07; }
.mt-line {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mt-line.is-in { stroke: var(--mt-in); }
.mt-line.is-out { stroke: var(--mt-out); }
/* anel da cor da superfície: as duas séries não se fundem quando se cruzam */
.mt-mark { stroke: var(--ui-color-bg-content-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mt-mark.is-in { fill: var(--mt-in); }
.mt-mark.is-out { fill: var(--mt-out); }
.mt-hit { fill: transparent; }
.mt-chart:hover .mt-bar, .mt-chart:hover .mt-line, .mt-chart:hover .mt-mark { transition: opacity .1s linear; }

.mt-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 165px; padding: 9px 11px;
  border-radius: var(--ui-border-radius-sm);
  background: var(--ui-color-bg-content-primary);
  box-shadow: 0 6px 24px rgb(0 51 102 / .16);
  font-size: var(--ui-font-size-sm); color: var(--ui-color-base-2);
}
.mt-tip[hidden] { display: none; }
.mt-tip b { display: block; margin-bottom: 5px; color: var(--ui-color-base-1); }
.mt-tip span { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.mt-tip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mt-tip em {
  margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums;
  font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1);
}

.mt-tabela-serie { margin-top: 16px; font-size: var(--ui-font-size-sm); }
.mt-tabela-serie summary { cursor: pointer; color: var(--ui-color-base-2); font-weight: var(--ui-font-weight-medium); }
.mt-tabela-serie .table-wrap { margin-top: 10px; }

/* ------------------------------------------- mapa de tráfego (hora × dia) */
.mt-mapa-rolagem { overflow: auto hidden; }
.mt-mapa { border-collapse: separate; border-spacing: 3px; width: 100%; }
.mt-mapa th { font-weight: var(--ui-font-weight-regular); color: var(--ui-color-base-3); }
.mt-mapa-hora {
  font-size: var(--ui-font-size-xs); text-align: center;
  font-variant-numeric: tabular-nums; padding-top: 4px;
}
.mt-mapa-dia { text-align: right; padding-right: 8px; white-space: nowrap; }
.mt-mapa-nome { display: block; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); }
.mt-mapa-data { display: block; font-size: var(--ui-font-size-xs); color: var(--ui-color-base-4); }
.mt-mapa td { padding: 0; }
.mt-cel {
  display: block; width: 100%; min-width: 16px; height: 18px;
  border-radius: var(--ui-border-radius-2xs, 3px);
  background: var(--ui-color-bg-content-secondary);
  box-shadow: inset 0 0 0 1px var(--ui-color-design-outline-stroke);
}
/* Uma cor só, do claro ao forte: a escala mede quantidade, não categoria. */
.mt-cel.n1 { background: color-mix(in srgb, var(--mt-in) 22%, transparent); box-shadow: none; }
.mt-cel.n2 { background: color-mix(in srgb, var(--mt-in) 45%, transparent); box-shadow: none; }
.mt-cel.n3 { background: color-mix(in srgb, var(--mt-in) 72%, transparent); box-shadow: none; }
.mt-cel.n4 { background: var(--mt-in); box-shadow: none; }
.mt-escala { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.mt-escala .mt-cel { width: 14px; min-width: 14px; height: 14px; }
.mt-escala .small { color: var(--ui-color-base-4); font-size: var(--ui-font-size-xs); }

/* --------------------------------------------------- canais e portais */
.mt-colunas { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mt-colunas > .card:only-child { grid-column: 1 / -1; }

.mt-lista { display: flex; flex-direction: column; gap: 16px; }
.mt-item-topo { display: flex; align-items: baseline; gap: 10px; }
.mt-item-nome { font-size: var(--ui-font-size-md); color: var(--ui-color-base-1); font-weight: var(--ui-font-weight-medium); }
.mt-item-total {
  margin-left: auto; font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1);
  font-variant-numeric: tabular-nums;
}
.mt-barra {
  height: 8px; margin: 7px 0 6px; border-radius: var(--ui-border-radius-pill);
  background: var(--ui-color-base-7); overflow: hidden;
}
.mt-barra-fill {
  /* A largura compara o canal com o maior; dentro dela as duas faixas mostram
     a divisão entre recebidas e enviadas, com 2px de respiro entre elas. */
  display: flex; gap: 2px; height: 100%;
}
.mt-barra-in, .mt-barra-out { height: 100%; }
.mt-barra-in  { background: var(--mt-in);  border-radius: var(--ui-border-radius-pill) 0 0 var(--ui-border-radius-pill); }
.mt-barra-out { background: var(--mt-out); border-radius: 0 var(--ui-border-radius-pill) var(--ui-border-radius-pill) 0; }
.mt-barra-in:only-child, .mt-barra-out:only-child { border-radius: var(--ui-border-radius-pill); }
.mt-item-detalhe {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3);
}
.mt-item-detalhe span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  .mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mt-stats { grid-template-columns: minmax(0, 1fr); }
  .mt-filtros { gap: 10px; }
  .mt-segmentado { width: 100%; }
  .mt-seg { flex: 1; justify-content: center; padding: 0 8px; }
  .mt-portal-form { margin-left: 0; width: 100%; }
  .mt-datas { width: 100%; padding-left: 0; border: 0; background: none; box-shadow: none; }
  .mt-data { flex: 1; min-width: 0; }
  .mt-select { width: 100%; min-width: 0; }
  .mt-legenda { margin-left: 0; width: 100%; padding-top: 6px; }
}