/*
 * BENEL Golden Path — TABELA DENSA (padrão da diretoria)
 * Letra pequena, sem espaço sobrando, cabeçalho petróleo, células de status preenchidas.
 * Serve para <table class="bn-tabela"> em HTML puro e para Jspreadsheet/jExcel (classe .bn-jss no container).
 *
 *   <link rel="stylesheet" href="benel-tokens.css">
 *   <link rel="stylesheet" href="benel-tabela-densa.css">
 *
 * Tamanhos: padrão 11px · .bn-tabela--10 (10px) · .bn-tabela--9 (9px, grade operacional tipo PLEX).
 * Referência viva: plex.benellog.com.br (Planejado x Executado).
 */
:root {
    --bn-tab-fonte: 11px;
    --bn-tab-fonte-cab: 10px;
    --bn-tab-linha: 1.25;
    --bn-tab-pad-y: 2px;
    --bn-tab-pad-x: 4px;
    --bn-tab-cab-fundo: var(--bn-petroleo, #00312e);
    --bn-tab-cab-texto: #ffffff;
    --bn-tab-borda: var(--bn-borda, #e2e8f0);
    --bn-tab-zebra: var(--bn-fundo-alt, #f6faf9);
    --bn-tab-hover: var(--bn-verde-50, #f7fee7);
    --bn-tab-somente-leitura: var(--bn-neutro-100, #f1f5f9);
    --bn-tab-selecao: var(--bn-verde, #86d105);
    --bn-tab-texto: var(--bn-texto, #00312e);
    --bn-tab-numero-linha: #64748b;
}

/* ---------------------------------------------------------------- HTML puro */
.bn-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-family: var(--bn-fonte, Inter, system-ui, sans-serif);
    font-size: var(--bn-tab-fonte);
    line-height: var(--bn-tab-linha);
    color: var(--bn-tab-texto);
    font-variant-numeric: tabular-nums;
    background: #fff;
}
.bn-tabela--10 { --bn-tab-fonte: 10px; --bn-tab-fonte-cab: 9px; }
.bn-tabela--9  { --bn-tab-fonte: 9px;  --bn-tab-fonte-cab: 9px; --bn-tab-pad-y: 1px; --bn-tab-pad-x: 3px; }
.bn-tabela--fixa { table-layout: fixed; }

.bn-tabela th,
.bn-tabela td {
    padding: var(--bn-tab-pad-y) var(--bn-tab-pad-x);
    border: 1px solid var(--bn-tab-borda);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.bn-tabela thead th {
    background: var(--bn-tab-cab-fundo);
    color: var(--bn-tab-cab-texto);
    font-size: var(--bn-tab-fonte-cab);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    border-color: rgb(255 255 255 / .18);
    position: sticky;
    top: 0;
    z-index: 2;
}
/* subcabeçalho (2ª linha de cabeçalho, ex.: dias da semana) */
.bn-tabela thead tr + tr th { font-weight: 600; opacity: .92; }
/* linha de grupo/total dentro do corpo, como "Certo | Errado | Dif %" */
.bn-tabela tr.bn-sub th,
.bn-tabela tr.bn-sub td { background: var(--bn-tab-cab-fundo); color: #fff; font-weight: 700; text-transform: uppercase; font-size: var(--bn-tab-fonte-cab); text-align: center; }
.bn-tabela tbody tr:nth-child(even) td { background: var(--bn-tab-zebra); }
.bn-tabela tbody tr:hover td { background: var(--bn-tab-hover); }
.bn-tabela tfoot td,
.bn-tabela tr.bn-total td { font-weight: 800; background: var(--bn-neutro-100, #f1f5f9); border-top: 2px solid var(--bn-tab-cab-fundo); }

/* coluna de nº da linha (como planilha) */
.bn-tabela .bn-n { width: 28px; text-align: center; color: var(--bn-tab-numero-linha); font-size: .85em; background: var(--bn-neutro-100, #f1f5f9) !important; }
/* alinhamentos */
.bn-tabela .bn-c { text-align: center; }
.bn-tabela .bn-d { text-align: right; }
.bn-tabela .bn-num { text-align: right; font-weight: 700; }
.bn-tabela .bn-suave { color: var(--bn-texto-suave, #64748b); }
.bn-tabela .bn-ro { background: var(--bn-tab-somente-leitura) !important; color: var(--bn-texto-suave, #64748b); }
.bn-tabela .bn-quebra { white-space: normal; }

/* ------------------------------------------------- células de status PREENCHIDAS
 * Na tabela densa o status pinta a célula inteira (leitura de longe), texto branco 700.
 * Mesma semântica das etiquetas de 07-componentes: sucesso, info, aviso, erro, neutro, marca.
 */
.bn-st { font-weight: 700; text-align: center; text-transform: uppercase; }
.bn-st--sucesso  { background: #009900 !important; color: #fff !important; }   /* EXECUTADO, ENTREGUE, OK */
.bn-st--info     { background: #036aff !important; color: #fff !important; }   /* EM ANDAMENTO, EM TRÂNSITO */
.bn-st--info-cl  { background: #cfe2ff !important; color: #0350c2 !important; }/* PLANEJADO (claro) */
.bn-st--aviso    { background: #f59e0b !important; color: #00312e !important; }/* PENDENTE, ATRASADO */
.bn-st--erro     { background: #eb1414 !important; color: #fff !important; }   /* NÃO EXEC, DESVIO, ERRO */
.bn-st--erro-cl  { background: #fdecec !important; color: #b20f0f !important; }/* NÃO PLANEJADO (claro) */
.bn-st--neutro   { background: #cbd5e1 !important; color: #00312e !important; }/* FOLGA, INATIVO */
.bn-st--marca    { background: #86d105 !important; color: #00312e !important; }/* ÚTIL, NOVO, DESTAQUE */
.bn-st--petroleo { background: #00312e !important; color: #fff !important; }   /* ROTINA, categoria fixa */
.bn-st--teal     { background: #0f9f8f !important; color: #fff !important; }   /* categoria extra */

/* mini-tabelas de resumo (cards de KPI: "Resumo", "Escala") */
.bn-mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bn-mini th, .bn-mini td { padding: 1px 3px; text-align: center; border: 1px solid var(--bn-tab-borda); font-weight: 700; }
.bn-mini thead th, .bn-mini tr.bn-sub th { background: var(--bn-tab-cab-fundo); color: #fff; font-size: 9px; text-transform: uppercase; }
.bn-mini tfoot td { background: var(--bn-neutro-100, #f1f5f9); font-weight: 600; color: var(--bn-texto-2, #475569); }
/* escala de trabalho (calendário mini) */
.bn-mini--escala td { color: #fff; border-color: #fff; }
.bn-mini--escala .d-trab  { background: #f59e0b; color: #00312e; }
.bn-mini--escala .d-folga { background: #94a3b8; }
.bn-mini--escala .d-fer   { background: #036aff; }
.bn-mini--escala .d-dom   { background: #eb1414; }
.bn-mini--escala .hoje    { outline: 2px solid #86d105; outline-offset: -2px; }

/* barra rolável fina na cor da marca */
.bn-tabela-rolagem { overflow: auto; max-height: 70vh; scrollbar-width: thin; scrollbar-color: #00312e #f1f5f9; border: 1px solid var(--bn-tab-borda); }
.bn-tabela-rolagem::-webkit-scrollbar { width: 8px; height: 8px; }
.bn-tabela-rolagem::-webkit-scrollbar-thumb { background: #00312e; border-radius: 4px; }

/* ------------------------------------------------- Jspreadsheet CE / jExcel v4
 * <div class="bn-jss" id="grade"></div>  +  BenelJss.criar('#grade', {...})  (modelos/jspreadsheet)
 */
.bn-jss .jexcel_container,
.bn-jss .jss_container { font-family: var(--bn-fonte, Inter, system-ui, sans-serif); font-size: var(--bn-tab-fonte) !important; width: 100%; }
.bn-jss .jexcel_content,
.bn-jss .jss_content { max-height: none !important; box-shadow: none !important; padding: 0 !important; }
.bn-jss .jexcel,
.bn-jss .jss { font-size: var(--bn-tab-fonte) !important; color: var(--bn-tab-texto); border-color: var(--bn-tab-borda) !important; font-variant-numeric: tabular-nums; }
.bn-jss .jexcel > thead > tr > td,
.bn-jss .jss > thead > tr > td {
    background: var(--bn-tab-cab-fundo) !important;
    color: var(--bn-tab-cab-texto) !important;
    font-weight: 700 !important;
    font-size: var(--bn-tab-fonte-cab) !important;
    text-transform: uppercase;
    padding: 3px 2px !important;
    border-color: rgb(255 255 255 / .18) !important;
    height: auto !important;
}
.bn-jss .jexcel > thead > tr > td.selected,
.bn-jss .jss > thead > tr > td.selected { background: var(--bn-petroleo-claro, #004743) !important; color: var(--bn-verde, #86d105) !important; }
.bn-jss .jexcel > tbody > tr > td,
.bn-jss .jss > tbody > tr > td {
    padding: var(--bn-tab-pad-y) var(--bn-tab-pad-x) !important;
    line-height: var(--bn-tab-linha);
    border-color: var(--bn-tab-borda) !important;
    font-size: var(--bn-tab-fonte) !important;
    height: auto !important;
}
.bn-jss .jexcel > tbody > tr:nth-child(even) > td,
.bn-jss .jss > tbody > tr:nth-child(even) > td { background-color: var(--bn-tab-zebra); }
.bn-jss .jexcel > tbody > tr > td.readonly,
.bn-jss .jss > tbody > tr > td.readonly { background-color: var(--bn-tab-somente-leitura); color: var(--bn-texto-suave, #64748b); }
/* coluna de nº da linha */
.bn-jss .jexcel > tbody > tr > td:first-child,
.bn-jss .jss > tbody > tr > td:first-child,
.bn-jss .jexcel > thead > tr > td:first-child,
.bn-jss .jss > thead > tr > td:first-child { width: 28px !important; min-width: 28px; max-width: 28px; font-size: .85em !important; }
.bn-jss .jexcel > tbody > tr > td:first-child,
.bn-jss .jss > tbody > tr > td:first-child { background: var(--bn-neutro-100, #f1f5f9) !important; color: var(--bn-tab-numero-linha) !important; }
/* seleção e cursor */
.bn-jss .jexcel > tbody > tr > td.highlight,
.bn-jss .jss > tbody > tr > td.highlight { background-color: rgb(134 209 5 / .14); }
.bn-jss .jexcel .highlight-top, .bn-jss .jss .highlight-top { border-top: 1px solid var(--bn-tab-selecao) !important; box-shadow: none; }
.bn-jss .jexcel .highlight-bottom, .bn-jss .jss .highlight-bottom { border-bottom: 1px solid var(--bn-tab-selecao) !important; }
.bn-jss .jexcel .highlight-left, .bn-jss .jss .highlight-left { border-left: 1px solid var(--bn-tab-selecao) !important; }
.bn-jss .jexcel .highlight-right, .bn-jss .jss .highlight-right { border-right: 1px solid var(--bn-tab-selecao) !important; }
.bn-jss .jexcel_corner, .bn-jss .jss_corner { background-color: var(--bn-verde, #86d105) !important; border-color: #fff !important; }
/* dropdown sem seta de fundo (fica limpo, como no PLEX) */
.bn-jss .jexcel > tbody > tr > td.jexcel_dropdown,
.bn-jss .jss > tbody > tr > td.jss_dropdown { background-image: none !important; padding-right: var(--bn-tab-pad-x) !important; }
.bn-jss input, .bn-jss select, .bn-jss .jexcel_textarea { font-size: var(--bn-tab-fonte) !important; font-family: inherit; }
.bn-jss .jexcel_pagination, .bn-jss .jss_pagination { font-size: 11px; padding: 4px 0; }
.bn-jss .jexcel_filter, .bn-jss .jss_filter { font-size: 11px; margin-bottom: 4px; }

/* ------------------------------------------------- modo escuro (opcional) */
[data-tema="escuro"] .bn-tabela,
[data-tema="escuro"] .bn-jss .jexcel, [data-tema="escuro"] .bn-jss .jss { background: #0b1f1d; color: #e2e8f0; }
[data-tema="escuro"] { --bn-tab-borda: #1e3a37; --bn-tab-zebra: #0f2826; --bn-tab-hover: #12322f; --bn-tab-somente-leitura: #10221f; --bn-tab-cab-fundo: #001f1d; }

/* ------------------------------------------------- impressão: mantém cores e densidade */
@media print {
    .bn-tabela, .bn-jss { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bn-tabela thead th { position: static; }
    .bn-tabela-rolagem { max-height: none; overflow: visible; border: 0; }
}