/* ===========================================================================
   Potencial Baterias — /comercial/potencial-baterias
   Só tokens --theme-* / --comerc-*: nenhuma cor literal nova, para o claro e o
   escuro saírem certos sem duplicar regra. Este arquivo mora na RAIZ de
   assets/ de propósito: o Dash percorre assets/ com os.walk, que entrega os
   arquivos da raiz ANTES dos de assets/css/, então assets/css/zz_theme_dark.css
   continua vencendo a cascata do tema escuro. Renomear quebra isso.
   =========================================================================== */

.pb-page {
  display: block;
}

/* ── workspace: premissas + conteúdo ─────────────────────────────────────── */
.pb-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Recolhido pelo callback clientside: só CSS, o DOM não desmonta e os State
   seguem legíveis. */
.pb-workspace.pb-side-oculta {
  grid-template-columns: 0 minmax(0, 1fr);
}

.pb-workspace.pb-side-oculta .pb-sidebar {
  display: none;
}

@media (max-width: 1100px) {
  .pb-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pb-content {
  min-width: 0;   /* sem isto o grid estoura quando a DataTable é larga */
}

/* ── barra de premissas ──────────────────────────────────────────────────── */
.pb-sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  background: var(--theme-panel);
}

/* O topo (título + Atualizar) fica visível enquanto a lista rola. */
.pb-side-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px 10px;
  background: var(--theme-panel);
  border-bottom: 1px solid var(--theme-line);
}

.pb-side-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pb-side-titulo {
  font-family: var(--theme-serif);
  font-size: 1.2rem;
  margin: 0;
  color: var(--theme-ink);
}

.pb-side-colapsa {
  background: transparent;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  color: var(--theme-mut);
  padding: 3px 8px;
  cursor: pointer;
}

.pb-side-colapsa:hover,
.pb-side-colapsa:focus-visible {
  color: var(--theme-ink);
  border-color: var(--theme-ink);
}

/* Atualizar: a única ação que calcula. Mesmo par de cores do .chip.gr. */
.pb-btn-atualizar {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--theme-bg);
  background: var(--comerc-green-dark, var(--comerc-green));
  cursor: pointer;
  transition: box-shadow .15s ease;
}

.pb-btn-atualizar:hover {
  filter: brightness(1.05);
}

.pb-btn-atualizar:focus-visible {
  outline: 2px solid var(--theme-ink);
  outline-offset: 2px;
}

/* Premissa mudou e ainda não foi aplicada: anel em volta do botão + a frase
   logo abaixo (a cor nunca carrega o recado sozinha). */
.pb-btn-atualizar.pb-pendente-on {
  box-shadow: 0 0 0 3px var(--comerc-green-lighter, var(--theme-line));
}

.pb-pendente {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--theme-ink);
}

.pb-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.pb-btn-preset {
  padding: 5px 8px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: transparent;
  color: var(--theme-mut);
  font-size: .78rem;
  cursor: pointer;
}

.pb-btn-preset:hover,
.pb-btn-preset:focus-visible {
  color: var(--theme-ink);
  border-color: var(--theme-ink);
}

.pb-status {
  margin-top: 8px;
  color: var(--theme-mut);
  font-size: .78rem;
  line-height: 1.4;
}

.pb-status:empty {
  display: none;
}

.pb-status-erro {
  color: var(--theme-ink);
}

.pb-erro:not(:empty) {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--theme-ink);
  border-radius: 4px;
  background: var(--theme-panel2);
  color: var(--theme-ink);
  font-size: .78rem;
}

/* ── grupos recolhíveis ──────────────────────────────────────────────────── */
.pb-grupo {
  border-bottom: 1px solid var(--theme-line);
}

.pb-grupo:last-child {
  border-bottom: 0;
}

.pb-grupo-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--theme-ink);
}

.pb-grupo-summary::-webkit-details-marker {
  display: none;
}

.pb-grupo-titulo {
  font-weight: 600;
  font-size: .92rem;
}

.pb-grupo-icone {
  color: var(--theme-mut);
  font-size: .75rem;
  transition: transform .15s ease;
}

.pb-grupo[open] .pb-grupo-icone {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .pb-grupo-icone,
  .pb-btn-atualizar {
    transition: none;
  }
}

.pb-grupo-corpo {
  padding: 0 14px 12px;
}

/* ── campos ──────────────────────────────────────────────────────────────── */
.pb-campo {
  margin-top: 10px;
}

.pb-campo:first-child {
  margin-top: 0;
}

.pb-rotulo-linha {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.pb-rotulo {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--theme-mut);
}

.pb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.pb-duo .pb-campo {
  margin-top: 0;
}

.pb-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.pb-trio .input-group-text {
  padding: 0 5px;
  font-size: .7rem;
}

.pb-mini {
  min-width: 0;
}

.pb-mini-rotulo {
  display: block;
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--theme-mut);
}

/* Spinner nativo do input number come ~16px e cobre o ultimo digito nos
   campos estreitos (170 aparecia como 17). Digitar e o caminho aqui. */
.pb-sidebar input[type=number]::-webkit-inner-spin-button,
.pb-sidebar input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pb-sidebar input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  padding-left: 6px;
  padding-right: 6px;
}

.pb-radio label,
.pb-check label {
  display: block;
  font-size: .84rem;
  color: var(--theme-ink);
  margin-bottom: 3px;
  cursor: pointer;
}

.pb-radio input,
.pb-check input {
  margin-right: 6px;
}

.pb-radio-inline label {
  display: inline-block;
  margin-right: 12px;
}

.pb-switch {
  margin-top: 10px;
  font-size: .84rem;
}

/* ── ajuda em tooltip ────────────────────────────────────────────────────── */
.pb-info-slot {
  display: inline-flex;
  align-items: center;
}

.pb-info-btn {
  background: transparent;
  border: 0;
  padding: 0 2px;
  color: var(--theme-dim);
  font-size: .75rem;
  cursor: help;
}

.pb-info-btn:hover,
.pb-info-btn:focus-visible {
  color: var(--theme-ink);
}

.pb-info-tip {
  max-width: 320px;
  text-align: left;
}

/* ── coluna de conteúdo ──────────────────────────────────────────────────── */
.pb-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}

.pb-kpis {
  margin-bottom: 14px;
}

.pb-zero {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--theme-ink);
  border-radius: 4px;
  background: var(--theme-panel2);
  color: var(--theme-ink);
  font-size: .88rem;
}

.pb-sec-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pb-sec-body {
  margin-top: 10px;
}

/* Seletor segmentado (métrica da matriz, recorte da tabela). */
.pb-seg label {
  margin: 0 0 0 4px;
  padding: 3px 10px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  font-size: .8rem;
}

.pb-seg input {
  margin-right: 4px;
}

.pb-rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

@media (max-width: 900px) {
  .pb-rank-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pb-tabela td.pb-num,
.pb-tabela th.pb-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pb-nota {
  color: var(--theme-mut);
  font-size: .84rem;
  line-height: 1.5;
  margin: 8px 0 0;
}

.pb-nota:empty {
  display: none;
}

/* ── aba Unidades ────────────────────────────────────────────────────────── */
.pb-unid-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pb-unid-barra .pb-seg label:first-child {
  margin-left: 0;
}

.pb-contagem {
  color: var(--theme-mut);
  font-size: .84rem;
}

.pb-export {
  margin-left: auto;
}

.pb-motivos {
  flex-basis: 100%;
  margin-top: 6px;
}

.pb-export-msg {
  flex-basis: 100%;
  margin-top: 0;
}

/* ── CAPEX por faixa de racks (barra Comercial) ─────────────────────────── */
.pb-capex-faixas[hidden] {
  display: none;
}

.pb-capex-tabela {
  width: 100%;
  font-size: .84rem;
}

.pb-capex-legenda {
  caption-side: top;
  color: var(--theme-mut);
  padding: 0 0 4px;
  text-align: left;
}