/* ============================================================================
   style.css — Estilos do painel principal (index.php) + Personalização.
   ============================================================================ */

/* ===== Base da tabela do painel ===== */
body { font-family: Calibri, "Segoe UI", Arial, sans-serif; }
.sep-r { border-right: 3px solid #000 !important; }
td, th { white-space: nowrap; }
.cell { width: 22px; min-width: 22px; text-align: center; border: 1px solid #000; }
/* Cabecalho sempre visivel ao rolar a pagina */
thead th { position: sticky; top: 0; z-index: 20; }
thead th.sticky { z-index: 30; }
/* PERFORMANCE: layout fixo (nao mede todas as linhas) + render sob demanda. */
table { table-layout: fixed; }
/* Dezenas que repetiram entre os 2 ultimos concursos -> verde mais claro */
.rep2 { background: #92d050 !important; color: #000 !important; }
tbody tr { content-visibility: auto; contain-intrinsic-size: auto 28px; }

/* ===== PERSONALIZAÇÃO: variáveis CSS injetadas via JS ===== */
:root {
  --pers-sorteado: #00b050;
  --pers-fdc: #ffc000;
  --pers-ausente: #acb9ca;
  --pers-rep2: #92d050;
  --pers-cno: #262626;
  --pers-multiplo10: #ff0000;
  --pers-cabecalho: #7030a0;
  --pers-freq10: #1a3fc4;
  --pers-previsao: #9dc3ff;
  --pers-badge-ausente: #002060;
  --pers-qtd-bom: #00b050;
  --pers-qtd-longo: #ffc7ce;
  --pers-borda: #000000;
  --pers-row-height: 0.125rem;
}

/* Aplica as cores customizadas via CSS vars */
.pers-sorteado   { background-color: var(--pers-sorteado) !important; color: #000 !important; }
.pers-fdc-cell   { background-color: var(--pers-fdc) !important; color: #000 !important; }
.pers-ausente    { background-color: var(--pers-ausente) !important; color: #000 !important; }
.pers-rep2       { background-color: var(--pers-rep2) !important; color: #000 !important; }

/* Hover nas linhas */
.pers-hover tbody tr:hover td { filter: brightness(0.88); cursor: pointer; }

/* Zebra */
.pers-zebra tbody tr:nth-child(even) td:not([class*="bg-lf-"]):not([class*="pers-"]) { background-color: #f8f8f8 !important; }

/* Coluna oculta */
.pers-col-hidden { display: none !important; }

/* Tamanhos de fonte */
.pers-font-mini  table  { font-size: 8px !important; }
.pers-font-small table  { font-size: 10px !important; }
.pers-font-med   table  { font-size: 13px !important; }
.pers-font-big   table  { font-size: 17px !important; }

/* Alturas das linhas */
.pers-row-compact tbody td { padding-top: 0 !important; padding-bottom: 0 !important; }
.pers-row-normal  tbody td { padding-top: 2px !important; padding-bottom: 2px !important; }
.pers-row-spacious tbody td { padding-top: 6px !important; padding-bottom: 6px !important; }

/* Cor de borda customizada */
.pers-borda-custom td, .pers-borda-custom th { border-color: var(--pers-borda) !important; }
.pers-borda-custom .sep-r { border-right-color: var(--pers-borda) !important; }

/* Zero à esquerda: quando desabilitado, remove o 0 visual */
.pers-no-zero .cell { font-variant-numeric: tabular-nums; }

/* Tab ativa */
.pers-tab.active { border-bottom-color: #f97316; color: #ea580c; }

/* Dez button toggle */
.dez-check:checked + .dez-btn { background-color: #7030a0; color: white; border-color: #7030a0; }
.dez-check:not(:checked) + .dez-btn { background-color: white; color: #7030a0; border-color: #7030a0; opacity: 0.45; }