/* ============================================================================
   relatorios.css — a tela de Relatorios inteira.

   Substitui os <style> que cada web component do D2Kbal carregava dentro de
   si (relatorios-view.js, dashboard-view.js, comissao*-view.js, curvaabc,
   dre, estatisticas, formaspagamento, mediavendedor, top30, transferencia,
   vendaterminal — cada um com 60 a 130 linhas de CSS repetido) e as classes
   Tailwind que estavam no relatorios.html.

   Aqui tudo sai dos tokens do tema (--card-bg, --primary, --text-muted...),
   entao a tela acompanha os presets da Personalizacao. Os componentes do
   D2Kbal usavam cores fixas (#1f2937, #e5e7eb) com `.dark` por cima; nada
   disso e necessario quando a paleta e uma variavel.
   ============================================================================ */

/* ---------------------------------------------------------------- */
/* Central de relatorios (a grade de cartoes)                         */
/* ---------------------------------------------------------------- */

.rel-sub {
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--text-muted);
}

.rel-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
}

.rel-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .8rem .9rem;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.rel-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.rel-card:active { transform: translateY(0); }

.rel-card-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  font-size: 1.1rem;
}

.rel-card-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.rel-card-texto strong {
  font-size: .88rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-card-texto small {
  font-size: .72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-card-seta {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: .5;
  font-size: .8rem;
  transition: transform .18s, opacity .18s, color .18s;
}

.rel-card:hover .rel-card-seta {
  opacity: 1;
  color: var(--primary);
  transform: translateX(4px);
}

/* ---------------------------------------------------------------- */
/* Cabecalho do relatorio aberto + filtros                            */
/* ---------------------------------------------------------------- */

.rel-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .9rem;
}

.rel-titulo {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.rel-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.rel-btn:hover { border-color: var(--primary); }

.rel-btn--primario {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}

.rel-periodo { margin-bottom: .75rem; }

.rel-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin-bottom: .9rem;
}

.rel-campo {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 12rem;
  flex: 1;
}

.rel-campo > span {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.rel-campo select {
  height: 2.4rem;
  padding: 0 .6rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: .85rem;
}

/* ---------------------------------------------------------------- */
/* Blocos genericos do conteudo                                       */
/* ---------------------------------------------------------------- */

.rel-conteudo { min-height: 6rem; }

.rel-grupo-titulo {
  margin: 1.1rem 0 .7rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.rel-conteudo > .rel-grupo-titulo:first-child { margin-top: 0; }

.rel-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.rel-bloco-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--card-border);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
}

.rel-bloco-head--ok      { box-shadow: inset 4px 0 0 var(--success); }
.rel-bloco-head--warn    { box-shadow: inset 4px 0 0 var(--warning); }
.rel-bloco-head--danger  { box-shadow: inset 4px 0 0 var(--danger); }
.rel-bloco-head--info    { box-shadow: inset 4px 0 0 var(--info); }

.rel-vazio {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.rel-vazio i {
  display: block;
  font-size: 2.6rem;
  margin-bottom: .8rem;
  opacity: .4;
}

.rel-vazio p { margin: 0; font-size: .9rem; }

/* ---------------------------------------------------------------- */
/* Tabelas (Estatisticas Cliente, Media Vendedor, Relatorio Grupo)    */
/* ---------------------------------------------------------------- */

.rel-tabela-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 1rem;
}

.rel-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  white-space: nowrap;
}

.rel-tabela thead th {
  padding: .6rem .75rem;
  text-align: left;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--card-border);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}

.rel-tabela tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
}

.rel-tabela tbody tr:last-child td { border-bottom: 0; }
.rel-tabela tbody tr:hover td { background: var(--primary-soft); }

.rel-td-nome { font-weight: 600; white-space: normal; min-width: 12rem; }
.rel-td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- */
/* Cartao de funcionario (Comissao Avancada / Comissao Geral)         */
/* ---------------------------------------------------------------- */

.rel-func-card {
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  margin-bottom: .7rem;
  overflow: hidden;
  transition: border-left-color .15s, box-shadow .15s;
}

.rel-func-card:hover {
  border-left-color: var(--success);
  box-shadow: var(--shadow);
}

.rel-func-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--card-border);
}

.rel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--info);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

.rel-func-nome { font-size: .88rem; font-weight: 700; color: var(--text); }

.rel-func-body { padding: .7rem .9rem; }

.rel-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .4rem;
  margin-bottom: .35rem;
  font-size: .82rem;
}

.rel-linha:last-child { margin-bottom: 0; }
.rel-par { display: inline-flex; align-items: baseline; gap: .35rem; }
.rel-k { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.rel-k i { color: var(--primary); font-size: .78rem; }
.rel-v { color: var(--text); font-weight: 700; white-space: nowrap; }
.rel-v--ok { color: var(--success); }
.rel-sep { color: var(--card-border); margin: 0 .4rem; user-select: none; }

@media (max-width: 575px) {
  .rel-sep { display: none; }
  .rel-par { flex: 0 0 100%; }
}

.rel-total-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .7rem;
  padding: .8rem 1.1rem;
  margin-top: 1rem;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
}

.rel-total-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.rel-total-label i { color: var(--success); font-size: 1rem; }
.rel-total-valor { font-size: 1.2rem; font-weight: 800; color: var(--success); }

/* ---------------------------------------------------------------- */
/* Dashboard: cartoes, podio e graficos                               */
/* ---------------------------------------------------------------- */

.rel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}

.rel-kpi {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.rel-kpi-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--bg-surface-2);
  font-size: 1rem;
}

.rel-kpi-txt { display: flex; flex-direction: column; min-width: 0; }
.rel-kpi-txt small { font-size: .72rem; color: var(--text-muted); }
.rel-kpi-txt strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rel-podio { padding: .3rem 0; }

.rel-podio-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-podio-linha:last-child { border-bottom: 0; }

.rel-medalha,
.rel-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  color: #111;
  flex: 0 0 auto;
}

.rel-medalha--ouro,   .rel-rank--ouro   { background: #ffc107; }
.rel-medalha--prata,  .rel-rank--prata  { background: #c0c4cc; }
.rel-medalha--bronze, .rel-rank--bronze { background: #cd7f32; color: #fff; }
.rel-rank--comum {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  border: 1px solid var(--card-border);
}

.rel-podio-nome { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rel-podio-nome strong { font-size: .85rem; font-weight: 700; color: var(--text); }
.rel-podio-nome small { font-size: .72rem; color: var(--text-muted); }
.rel-podio-valor { font-size: .9rem; font-weight: 800; color: var(--text); }
.rel-podio-vazio {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
}

/* O ApexCharts monta o SVG dentro deste container; a altura vem das opcoes
   do grafico, a largura e a do bloco. */
.rel-grafico { padding: .6rem; min-height: 24rem; }

/* ---------------------------------------------------------------- */
/* Curva ABC                                                          */
/* ---------------------------------------------------------------- */

.rel-lista { list-style: none; margin: 0; padding: 0; }

.rel-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-item:last-child { border-bottom: 0; }

.rel-classe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
}

.rel-classe--ok     { background: var(--success); }
.rel-classe--warn   { background: var(--warning); color: #111; }
.rel-classe--danger { background: var(--danger); }

.rel-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rel-item-info strong { font-size: .84rem; font-weight: 600; color: var(--text); }
.rel-item-info small { font-size: .72rem; color: var(--text-muted); }

.rel-item-valores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.rel-item-valores strong { font-size: .85rem; font-weight: 800; color: var(--text); }
.rel-item-valores small { font-size: .72rem; color: var(--success); }

/* ---------------------------------------------------------------- */
/* DRE                                                               */
/* ---------------------------------------------------------------- */

.rel-dre-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 1rem;
}

.rel-dre { width: 100%; border-collapse: collapse; font-size: .85rem; }

.rel-dre th {
  padding: .6rem .9rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}

.rel-dre td {
  padding: .6rem .9rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

.rel-dre tr:last-child th,
.rel-dre tr:last-child td { border-bottom: 0; }

.rel-dre-ind { color: var(--text-muted); font-weight: 500; font-size: .75rem; }
.rel-dre-pos { color: var(--text); }
.rel-dre-neg { color: var(--danger); }
.rel-dre-destaque { background: var(--bg-surface-2); }
.rel-dre-destaque td { color: var(--success); }

/* ---------------------------------------------------------------- */
/* Formas de pagamento                                                */
/* ---------------------------------------------------------------- */

.rel-pag-card { padding: .2rem 0; }

.rel-pag-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-pag-linha:last-child { border-bottom: 0; }

.rel-pag-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  flex: 0 0 auto;
}

.rel-pag-nome { flex: 1; font-size: .85rem; font-weight: 600; color: var(--text); }

.rel-pag-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rel-pag-stats small { font-size: .72rem; color: var(--text-muted); }
.rel-pag-stats strong { font-size: .88rem; font-weight: 800; color: var(--text); }

.rel-pag-vazio {
  padding: 1.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .82rem;
}

/* ---------------------------------------------------------------- */
/* Top 30                                                             */
/* ---------------------------------------------------------------- */

.rel-produto-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.rel-produto-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-produto-linha:last-child { border-bottom: 0; }

.rel-produto-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rel-produto-info small { font-size: .7rem; color: var(--text-muted); }
.rel-produto-info strong { font-size: .84rem; font-weight: 600; color: var(--text); }

.rel-produto-stats { display: flex; flex-direction: column; align-items: flex-end; }
.rel-produto-stats small { font-size: .72rem; color: var(--text-muted); }
.rel-produto-stats strong { font-size: .88rem; font-weight: 800; color: var(--text); }

/* ---------------------------------------------------------------- */
/* Venda por terminal                                                 */
/* ---------------------------------------------------------------- */

.rel-terminal-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.rel-terminal-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-terminal-linha:last-child { border-bottom: 0; }

.rel-terminal-info {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-muted);
}

.rel-terminal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: .8rem;
}

.rel-terminal-valor { font-size: .95rem; font-weight: 800; color: var(--text); }

/* ---------------------------------------------------------------- */
/* Transferencia                                                      */
/* ---------------------------------------------------------------- */

.rel-transf-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rel-transf-linha {
  position: relative;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--card-border);
}

.rel-transf-linha:last-child { border-bottom: 0; }

.rel-transf-titulo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
  padding-right: 8rem;
}

.rel-transf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}

.rel-tag {
  padding: .12rem .5rem;
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rel-tag--origem  { background: rgba(0, 121, 230, .15); color: #0079e6; }
.rel-tag--destino { background: rgba(44, 168, 127, .15); color: #2ca87f; }

.rel-transf-valor {
  position: absolute;
  top: .8rem;
  right: .9rem;
  text-align: right;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}

.rel-transf-valor small {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rel-transf-info {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-size: .74rem;
  color: var(--text-muted);
}

.rel-totais {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: .9rem;
  padding: .9rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-surface-2);
}

.rel-total-item { text-align: right; }
.rel-total-item small {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rel-total-item strong { font-size: 1.05rem; font-weight: 800; color: var(--text); }

@media (max-width: 600px) {
  .rel-transf-valor { position: static; text-align: left; margin-bottom: .4rem; }
  .rel-transf-titulo { padding-right: 0; }
  .rel-totais { flex-direction: column; align-items: flex-end; gap: .6rem; }
}