/* --------------------------------------------------------------------------
   Listas operacionais (Pedidos e Remessas): folha de livro-razao.
   Colunas agrupadas por assunto com uma aba na cor da divisoria: o que a FTD enviou (fio forte)
   e a nota fiscal (amarelo NF). O numero que vale (valor da NF) pesa mais que o de referencia (payload).
   -------------------------------------------------------------------------- */

.data-table--operacional {
    min-width: 78rem;
}

/* Linha das abas de grupo: so as celulas com nome desenham a aba; as vazias somem. */
.data-table--operacional .grupos-colunas th {
    padding: 0.5rem 0.7rem 0.3rem;
    border-bottom: 0;
    text-align: left;
}

.grupo-colunas {
    border-top: 2px solid var(--rule-strong);
    border-left: 1px solid var(--rule);
    background: var(--sheet-2);
    color: var(--ink-2);
}

.grupo-colunas--nf {
    border-top-color: var(--nf);
    background: var(--nf-soft);
    color: var(--nf-ink);
}

/* Fio de 1px separa os grupos de colunas de cima a baixo. */
.data-table--operacional .col-inicio-grupo {
    border-left: 1px solid var(--rule);
}

/* Folha mais justa que a tabela padrao: a largura ganha aqui evita rolagem horizontal em telas de notebook. */
.data-table--operacional th,
.data-table--operacional td {
    padding: 0.55rem 0.6rem;
}

/* Cabecalho numerico quebra em duas linhas (Prev. / recebimento); a celula define a largura da coluna. */
.data-table--operacional th.col-numerica {
    padding-left: 0.8rem;
    line-height: 1.25;
    vertical-align: bottom;
    white-space: normal;
}

.data-table--operacional th.col-sem-quebra {
    white-space: nowrap;
}

.data-table--operacional td.col-numerica {
    padding-left: 0.8rem;
}

.data-table--operacional .col-compacta {
    width: 1%;
    white-space: nowrap;
}

.data-table--operacional td.col-compacta {
    color: var(--ink-2);
}

/* Codigo e selo HML na mesma linha; o "Registro N | Omie X" abaixo continua quebrando normalmente. */
.data-table--operacional td:first-child {
    white-space: nowrap;
}

/* "FTD enviada com sucesso" cabe em duas linhas, nunca em tres (a pilula viraria um blob). */
.data-table--operacional .col-status-final {
    min-width: 9.5rem;
}

.data-table--operacional .artifact-badge {
    white-space: nowrap;
}

/* Acoes em ate duas fileiras compactas, alinhadas a direita, em vez de uma tira de 300px. */
.data-table--operacional .table-actions {
    white-space: normal;
}

.acoes-linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
    width: 11.5rem;
    margin-left: auto;
}

/* Valor que vale (NF) em destaque; valor de referencia (payload) mais discreto; vazio quase some. */
.data-table--operacional .valor-nf {
    color: var(--ink);
    font-weight: 650;
}

.data-table--operacional .valor-referencia {
    color: var(--ink-2);
}

.data-table--operacional .celula-vazia {
    color: var(--muted);
    font-weight: 400;
}

/* Data na primeira linha e hora embaixo, no mesmo ritmo do "Registro N" da primeira coluna. */
.col-atualizado {
    white-space: nowrap;
}

.celula-hora {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
}

/* Identificacao do registro fixa a esquerda enquanto as demais colunas rolam. */
.data-table--operacional thead th:first-child,
.data-table--operacional tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sheet);
    box-shadow: 1px 0 0 var(--rule);
}

.data-table--operacional tbody tr:hover td:first-child {
    background: #f8fafc;
}

@media (max-width: 720px) {
    .data-table--operacional thead th:first-child,
    .data-table--operacional tbody td:first-child {
        position: static;
        box-shadow: none;
    }
}