/* ============================================================
   DESSEM · Descolamentos (pages/dessem_descolamentos.py)
   Quando e por que o CMO de dois submercados se separa num mês. Mesma gramática
   das irmãs do grupo DESSEM — filtros em linha, chips de escolha, avisos ACIMA
   das seções, estados vazios com tom próprio. Só seletores
   `.dessem-descol-*` / `#dessem-descol-*`.

   Duas cores fogem das variáveis do tema, e só duas: o azul e o vermelhão de
   Okabe-Ito do sombreado (`--descol-barato` / `--descol-caro`). Elas são a
   MESMA cor que a figura Plotly desenha na faixa, e é justamente essa
   igualdade que liga o chip da tabela ao trecho do gráfico — puxá-las de
   `--accent`/`--danger` desfaria o vínculo. O par é seguro para daltonismo
   (nunca verde × vermelho puros) e vale nos dois temas: o que muda entre eles é
   o alfa, definido mais abaixo.
   ============================================================ */

:root {
  --descol-barato: 0, 114, 178;   /* Okabe-Ito azul  — sub2 mais BARATO */
  --descol-caro: 213, 94, 0;      /* Okabe-Ito vermelhão — sub2 mais CARO */
  /* Fundo do chip da tabela: no escuro precisa de mais corpo para se ver sobre
     `--card`; no claro, de menos, ou o texto por cima perde contraste. */
  --descol-chip-alfa: 0.30;
  --descol-borda-alfa: 0.60;
}
[data-bs-theme="light"] {
  --descol-chip-alfa: 0.18;
  --descol-borda-alfa: 0.55;
}

/* ------------------------------------------------------------ filter card --- */
.forecast-filter-card .card-body.dessem-descol-filter-body {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
}
/* Largura FIXA nos dois `<select>`: soltos com `flex: 1 1` eles esticam até a
   borda e um menu de doze meses ocupa a linha inteira. */
.dessem-descol-campo { flex: 0 1 170px; min-width: 0; }
/* Os chips (par de submercados e o switch do clip) ocupam a largura que
   precisarem e quebram juntos, depois dos seletores. */
.dessem-descol-campo-chips { flex: 1 1 340px; min-width: 0; }
.dessem-descol-acoes, .forecast-filter-card .dessem-descol-filter-body .forecast-actions {
  margin-left: auto;
}

/* ------------------------------------------------------------------ chips --- */
/* O input nativo sai do fluxo (não some: continua focável e visível ao leitor
   de tela) e quem carrega o estado é o rótulo, via `label_checked_class_name`.
   A marcação do dbc põe input e label como IRMÃOS, então `:has()` não é
   necessário. Vale para o `RadioItems` do par de submercados e para o
   `Checklist` de uma opção do clip: são a mesma pergunta visual. */
.dessem-descol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dessem-descol-chips .form-check {
  display: inline-flex; margin: 0; padding: 0; min-height: 0;
}
.dessem-descol-chip-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.dessem-descol-chip {
  display: inline-flex; align-items: center; margin: 0;
  padding: 5px 11px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--well);
  color: var(--text-dim); font-size: var(--fs-sm); font-weight: 550;
  line-height: 1.3; cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.dessem-descol-chip:hover { color: var(--text); border-color: var(--border); }
/* O anel interno dobra a espessura da borda: no tema CLARO o `--accent-mid` é
   um tingimento leve sobre branco e sozinho quase não distingue o marcado. */
.dessem-descol-chip-on {
  color: var(--text-strong); background: var(--accent-mid);
  border-color: var(--accent-edge);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
/* Foco de teclado: sem isto o chip fica invisível para quem navega por TAB,
   porque o contorno nativo mora no input, que está fora do fluxo. */
.dessem-descol-chip-input:focus-visible + .dessem-descol-chip {
  outline: 2px solid var(--accent-edge); outline-offset: 2px;
}

/* ------------------------------------------------------- estado e avisos --- */
.dessem-descol-filtros-estado {
  flex-basis: 100%; color: var(--quiet); font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.dessem-descol-filtros-estado:empty { display: none; }

/* Avisos ACIMA das seções: são a razão de um limite sumir do relatório ou de o
   clip ter usado o fallback — embaixo do gráfico ninguém os leria antes de
   estranhar o número. */
.dessem-descol-avisos:empty { display: none; }
.dessem-descol-aviso-lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.dessem-descol-aviso {
  padding: 4px 10px; color: var(--text); background: var(--warn-bg);
  border: 1px solid var(--warn-edge); border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: var(--lh-normal);
}
/* Selo no cabeçalho: quebra numa tela estreita sem empurrar o título. */
.dessem-descol-selo {
  display: flex; justify-content: flex-end; max-width: 100%;
  overflow-wrap: anywhere;
}
.dessem-descol-dica { color: var(--quiet); font-size: var(--fs-xs); }

/* ------------------------------------------------------------------- KPIs --- */
.dessem-descol-kpis .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--sp-4);
}
.dessem-descol-card { min-width: 0; background: var(--card); }

/* ---------------------------------------------------------------- legenda --- */
/* A faixa sombreada é a única coisa da figura SEM entrada na legenda do Plotly
   (`vrect` é shape, não traço). Esta legenda é a dela — e o texto ao lado do
   quadradinho não é decoração: cor sozinha não é rótulo. */
.dessem-descol-legenda {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-3);
  color: var(--text-dim); font-size: var(--fs-xs);
}
.dessem-descol-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.dessem-descol-sw {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border-soft);
}

/* ---------------------------------------------------------------- tabelas --- */
/* A tabela rola AQUI, dentro do card: a página nunca rola para o lado. */
.dessem-descol-rolagem { max-width: 100%; overflow-x: auto; }
.dessem-descol-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  color: var(--text); font-size: var(--fs-sm);
}
.dessem-descol-tabela th,
.dessem-descol-tabela td {
  padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.dessem-descol-tabela thead th {
  background: var(--bg-elevated); color: var(--quiet);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
/* O intervalo «01/08 13:30 – 01/08 19:00» não pode quebrar no meio: partido em
   duas linhas, o leitor passa a ler duas datas soltas. */
.dessem-descol-celula-periodo { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Chip do tipo de descolamento: a MESMA cor da faixa do gráfico, mais opaca. É
   o que liga a linha da tabela ao trecho sombreado sem repetir a legenda. */
.dessem-descol-chip-tipo {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-md);
  border: 1px solid transparent; color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.dessem-descol-chip-barato {
  background: rgba(var(--descol-barato), var(--descol-chip-alfa));
  border-color: rgba(var(--descol-barato), var(--descol-borda-alfa));
}
.dessem-descol-chip-caro {
  background: rgba(var(--descol-caro), var(--descol-chip-alfa));
  border-color: rgba(var(--descol-caro), var(--descol-borda-alfa));
}

/* ------------------------------------------------------------ estado vazio --- */
/* Cada vazio com TOM próprio: mês sem rodada, mês com CMO de um lado só, banco
   fora do ar, mês que não descolou nenhuma meia-hora, mês sem série de
   intercâmbio para cruzar, mês descolado sem bloco contínuo e nenhum mês
   escolhido. A mesma caixa cinza para todos ensinaria o usuário a ignorá-los.
   Todo `tipo=` que a página emite tem o seu modificador abaixo. */
.dessem-descol-vazio {
  padding: var(--sp-5) var(--sp-4); text-align: center;
  border-left: 3px solid var(--border);
}
.dessem-descol-vazio-titulo {
  color: var(--text); font-size: var(--fs-md); font-weight: 600;
  margin-bottom: var(--sp-2);
}
.dessem-descol-vazio-texto {
  color: var(--text-dim); font-size: var(--fs-sm); margin: 0 auto var(--sp-2);
  max-width: 62ch; line-height: var(--lh-normal);
}
.dessem-descol-vazio-dica {
  color: var(--quiet); font-size: var(--fs-xs); margin: 0 auto;
  max-width: 62ch; line-height: var(--lh-normal);
}
.dessem-descol-vazio--erro { border-left-color: var(--danger); }
.dessem-descol-vazio--sem-deck,
.dessem-descol-vazio--sem-par { border-left-color: var(--warn); }
/* «O mês não descolou» é RESPOSTA, não falha: fica no tom neutro-positivo, ao
   contrário dos outros quatro. */
.dessem-descol-vazio--colado { border-left-color: var(--ok); }
.dessem-descol-vazio--sem-intercambio { border-left-color: var(--info); }
/* Descolou, mas nenhuma sequência fechou bloco: também é resposta, não falha. */
.dessem-descol-vazio--sem-periodo { border-left-color: var(--ok); }
/* Nenhum mês escolhido ainda: neutro, é o estado de partida. */
.dessem-descol-vazio--sem-selecao { border-left-color: var(--quiet); }

/* --------------------------------------------------------------- estreito --- */
@media (max-width: 1100px) {
  .dessem-descol-kpis .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .forecast-filter-card .dessem-descol-filter-body .forecast-actions { margin-left: 0; }
}
@media (max-width: 620px) {
  .dessem-descol-campo, .dessem-descol-campo-chips { flex-basis: 100%; }
  .dessem-descol-kpis .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}