/* ==========================================================
   Aba "Gerencial" do Painel do PDV (Fase 5, Tarefa 4).
   So tokens do design system; sem cor literal. Tabela larga rola
   POR DENTRO do cartao (.table-responsive), nunca no documento.
   ========================================================== */
.pdvg-filtros { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.pdvg-filtros__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.pdvg-nota { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 72ch; flex: 1 1 320px; }
.pdvg-filtros__acoes { display: flex; gap: var(--space-2); }
.pdvg-filtros__periodo { display: flex; gap: var(--space-3); min-width: 0; }
.pdvg-filtros__periodo input { min-width: 150px; }

.pdvg-subs { margin-bottom: var(--space-4); max-width: 100%; }
.pdvg-corpo { min-width: 0; }
.pdvg-corpo .metric-strip-cf { margin-bottom: var(--space-4); }
.pdvg-corpo .metric-cf__label { white-space: normal; text-wrap: balance; }
.pdvg-sub { font-size: var(--text-md); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-2); }
.pdvg-sub:first-child { margin-top: 0; }

/* Frase que diz a base do bloco (Recebido x Comandas fechadas). */
.pdvg-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.pdvg-base__texto { flex: 1 1 280px; min-width: 0; max-width: 78ch; }
.pdvg-nota-base, .pdvg-legenda { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); max-width: 78ch; }
.pdvg-legenda .pdvg-chip { margin-left: var(--space-1); }

/* Aviso (cobertura parcial, corte da lista, erro): palavra + icone + filete, nunca so cor.
   Superficie neutra nos dois temas (os fundos "soft" viram bloco brilhante no escuro). */
.pdvg-aviso {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--bg-muted); color: var(--text-primary);
  border-left: 4px solid var(--color-warning);
  font-size: var(--text-sm);
}
.pdvg-aviso i { margin-top: 2px; color: var(--color-warning); flex: none; }
.pdvg-aviso.is-erro { border-left-color: var(--color-danger); }
.pdvg-aviso.is-erro i { color: var(--color-danger); }

/* Chip: classe ABC, base, tipo de ocorrencia. Neutro nos dois temas; o destaque e a primaria suave. */
.pdvg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1.4;
  padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
  background: var(--bg-muted); color: var(--text-primary);
}
.pdvg-chip.is-destaque { background: var(--color-primary-soft); color: var(--color-primary); }
.pdvg-chip.is-aviso i { color: var(--color-warning); }

.pdvg-bloco { padding: var(--space-5); margin-bottom: var(--space-4); min-width: 0; }
.pdvg-canvas { position: relative; height: 260px; min-width: 0; }

/* Tabela alternativa do grafico (leitor de tela e quem prefere numeros). */
.pdvg-alt { margin-top: var(--space-3); font-size: var(--text-sm); }
.pdvg-alt summary { cursor: pointer; color: var(--text-secondary); padding: var(--space-2) 0; min-height: 44px; display: flex; align-items: center; }
.pdvg-alt summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-control); }
.pdvg-total-linha { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.pdvg-atalho { margin: 0 0 var(--space-4); }

/* Tabelas */
.pdvg-mesa { margin-bottom: var(--space-4); min-width: 0; }
.pdvg-mesa table.table-cf { min-width: 760px; }
.pdvg-mesa .pdvg-busca { padding: var(--space-3) var(--space-4) 0; }
.pdvg-mesa .pdvg-paginas { padding: var(--space-3) var(--space-4); }
.pdvg-mesa tbody td, .pdvg-mesa tfoot td, .pdvg-mesa tfoot th { vertical-align: middle; font-variant-numeric: tabular-nums; }
.pdvg-mesa td.pdvg-nome { white-space: normal; overflow-wrap: anywhere; min-width: 180px; font-weight: var(--fw-medium); }
.pdvg-mesa td.pdvg-motivo { white-space: normal; overflow-wrap: anywhere; min-width: 200px; }
.pdvg-mesa td.pdvg-quando { white-space: nowrap; }
.pdvg-sub-linha { display: block; font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-secondary); }
.pdvg-total th, .pdvg-total td { font-weight: var(--fw-bold); border-top: 2px solid var(--border-color); background: var(--bg-muted); }
.pdvg-delta { font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .pdvg-filtros { padding: var(--space-4); }
  .pdvg-filtros__periodo { flex: 1 1 100%; }
  .pdvg-filtros__periodo .period-filter-cf { flex: 1 1 0; min-width: 0; }
  .pdvg-filtros__periodo input { min-width: 0; width: 100%; font-size: 16px; }
  .pdvg-filtros__acoes { flex: 1 1 100%; }
  .pdvg-filtros__acoes .btn-cf { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .pdvg-bloco { padding: var(--space-4); }
  .pdvg-canvas { height: 220px; }
  .pdvg-mesa .lp-search-input { font-size: 16px; }
}