/* ============================
   Tabelas – Dashboard (refactor)
   ============================ */

:root{
  --tbl-bg:            var(--pylo-card-bg, #fff);
  --tbl-radius:        var(--pylo-radius, 12px);
  --tbl-shadow:        0 2px 10px rgba(0,0,0,.06);
  --tbl-border:        #eef2f7;
  --tbl-border-weak:   #f6f7fb;
  --tbl-head-bg:       #fff;
  --tbl-head-color:    #0f172a;
  --tbl-row-odd:       #fcfcfd;
  --tbl-row-hover:     #f3f5f9;
  --tbl-title:         #e46700;
  --tbl-font:          var(--pylo-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji");
  --tbl-font-mono:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ----- Card/Wrapper ----- */
.table{
  background: var(--tbl-bg);
  border-radius: var(--tbl-radius);
  box-shadow: var(--tbl-shadow);
  padding: 16px;
  overflow: hidden;            /* esconde sombras internas */
}

.table h3{
  margin: 0 0 10px;
  font: 600 14px/1.2 var(--tbl-font);
  color: var(--tbl-title);
}

.table > div{
  position: relative;
  overflow: auto;
  border-radius: 10px;
  /* sombras sutis quando estiver rolando */
  --sh: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 0/100% 10px no-repeat,
        linear-gradient(to top,    rgba(0,0,0,.08), rgba(0,0,0,0)) 0 100%/100% 10px no-repeat;
  background:
    var(--bg-shadows, none);
}
.table > div.is-scrolling{
  --bg-shadows: var(--sh);
}

/* ativa/desativa sombra no scroll via JS bem leve */
.table > div::-webkit-scrollbar{ height: 10px; width: 10px; }
.table > div::-webkit-scrollbar-thumb{ background: #d8dee9; border-radius: 10px; }
.table > div:hover::-webkit-scrollbar-thumb{ background: #c3ccda; }

/* ----- Tabela ----- */
.table table{
  width: 100%;
  border-collapse: collapse;
  font: 500 13px/1.35 var(--tbl-font);
  color: #0f172a;
}

/* Cabeçalho fixo */
.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tbl-head-bg);
  color: var(--tbl-head-color);
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--tbl-border);
  white-space: nowrap;
}

/* Células */
.table tbody td{
  padding: 12px;
  border-bottom: 1px solid var(--tbl-border-weak);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listras + hover */
.table tbody tr:nth-child(odd){ background: var(--tbl-row-odd); }
.table tbody tr:hover{ background: var(--tbl-row-hover); }

/* --------- Mini-log (Últimos publicados) ---------- */
.table.latest > div{ max-height: 520px; }

/* primeira coluna sticky (Quando) */
.table.latest thead th:first-child,
.table.latest tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--tbl-head-bg);
}

/* largura mínima por coluna (ajuste conforme as colunas do mini-log) */
.table.latest thead th:nth-child(1),
.table.latest tbody td:nth-child(1){ min-width: 140px; } /* Quando */
.table.latest thead th:nth-child(2),
.table.latest tbody td:nth-child(2){ min-width: 90px;  font-family: var(--tbl-font-mono); } /* Slug */
.table.latest thead th:nth-child(3),
.table.latest tbody td:nth-child(3){ min-width: 360px; white-space: normal; } /* Produto */
.table.latest thead th:nth-child(4),
.table.latest tbody td:nth-child(4){ min-width: 70px;  text-transform: lowercase; } /* Prov. */
.table.latest thead th:nth-child(5),
.table.latest tbody td:nth-child(5){ min-width: 220px; } /* Categoria */
.table.latest thead th:nth-child(6),
.table.latest tbody td:nth-child(6){ min-width: 120px; } /* Cupom */

/* Se o mini-log tiver colunas de preço a partir da 7ª:
   Old | Base | Final | Cupom (R$) | Desc. (R$) | Economia (R$) | % OFF */
.table.latest thead th:nth-child(n+7),
.table.latest tbody td:nth-child(n+7){
  min-width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table.latest thead th:last-child,
.table.latest tbody td:last-child{
  min-width: 80px;            /* % OFF */
}

/* números/valores sempre alinhados à direita */
.table td.num, .table th.num,
.table td.money, .table th.money{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* links discretos em células */
.table a{
  color: #0ea5e9;
  text-decoration: none;
}
.table a:hover{ text-decoration: underline; }

/* ----- Tabelas comparativas menores (Top X) ----- */
.table.campaigns > div,
.table.categories > div,
.table.slugs > div,
.table.referers > div,
.table.providers > div{
  max-height: 420px;
}

/* Alinhar colunas numéricas à direita nos blocos de ranking */
.table.campaigns td:nth-last-child(-n+2),
.table.categories td:nth-last-child(-n+2),
.table.providers td:nth-last-child(-n+2),
.table.slugs     td:nth-last-child(-n+2),
.table.referers  td:nth-last-child(-n+2){
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- Responsivo ----- */
@media (max-width: 992px){
  .table.latest thead th:nth-child(3),
  .table.latest tbody td:nth-child(3){ min-width: 280px; }
  .table.latest > div{ max-height: 60vh; }
}
@media (max-width: 720px){
  .table{ padding: 12px; }
  .table thead th, .table tbody td{ padding: 10px; }
  .table.latest thead th:nth-child(1),
  .table.latest tbody td:nth-child(1){ min-width: 120px; }
  .table.latest thead th:nth-child(3),
  .table.latest tbody td:nth-child(3){ min-width: 220px; }
}

/* ----- Mini-log ocupa a linha inteira ----- */

/* Se .dashboard-rankings estiver em CSS GRID */
.dashboard-rankings .table.latest {
  grid-column: 1 / -1;   /* span em todas as colunas */
}

/* Se .dashboard-rankings estiver em FLEX (fallback) */
.dashboard-rankings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.dashboard-rankings .table {          /* as demais tabelas continuam lado a lado */
  flex: 1 1 48%;
  min-width: 340px;                   /* evita ficar estreita demais */
}
.dashboard-rankings .table.latest {    /* mini-log pega 100% da linha */
  flex: 0 0 100%;
}

/* Mini-log: sem scroll horizontal e mais compacto */
.table.latest { overflow: hidden; }
.table.latest > div { overflow-x: visible; }
.table.latest table { table-layout: auto; font-size: 12.5px; }

/* Produto e Categoria podem quebrar linha */
.table.latest thead th:nth-child(3),
.table.latest tbody td:nth-child(3),
.table.latest thead th:nth-child(5),
.table.latest tbody td:nth-child(5) {
  white-space: normal;
  word-break: break-word;
  max-width: 420px; /* ajuste se quiser */
}

/* Números alinhados à direita e sem quebrar */
.table.latest thead th:nth-child(n+7),
.table.latest tbody td:nth-child(n+7) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}