/* Ajuste de Preços por Tabelas [AT-32]: estilos da tela (prefixo .att-). Tema claro/escuro via variaveis do styles.css. */
:root {
    --att-entrada-bg: #e6f4ea;
    --att-entrada-fg: #1e6b34;
    --att-linha-entrada-bg: #f1faf4;
    --att-edit-bg: #fffbe6;
    --att-edit-borda: #e0b400;
    --att-aviso-bg: #fff4e0;
    --att-aviso-fg: #8a5200;
    --att-erro-bg: #fdecea;
    --att-erro-fg: #b3261e;
    --att-ok-bg: #e6f4ea;
    --att-ok-fg: #1e6b34;
    --att-diff-bg: #fff8d6;
}

:root.dark-theme {
    --att-entrada-bg: #16341f;
    --att-entrada-fg: #7fd69a;
    --att-linha-entrada-bg: #14271b;
    --att-edit-bg: #2a2512;
    --att-edit-borda: #b89500;
    --att-aviso-bg: #33260f;
    --att-aviso-fg: #f0b45a;
    --att-erro-bg: #3a1a18;
    --att-erro-fg: #ff8a80;
    --att-ok-bg: #16341f;
    --att-ok-fg: #7fd69a;
    --att-diff-bg: #332f12;
}

/* Grade com cabecalho fixo */
.att-grade-wrapper {
    max-height: calc(100vh - 280px);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
}

.att-grade {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--text-dark);
}

.att-grade th,
.att-grade td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    text-align: left;
}

.att-grade thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--header-bg);
    color: var(--text-dark);
    font-weight: 700;
}

.att-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.att-grade th.att-col-num {
    text-align: right;
}

/* Selo de entrada e linha com entrada destacada */
.att-selo-entrada {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--att-entrada-bg);
    color: var(--att-entrada-fg);
    font-size: 12px;
    font-weight: 600;
}

.att-linha-entrada td {
    background: var(--att-linha-entrada-bg);
}

/* Celula editavel */
.att-celula-editavel {
    min-width: 90px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-dark);
    text-align: right;
    font: inherit;
}

.att-celula-editavel:focus {
    outline: 2px solid var(--olist-green);
    outline-offset: 0;
}

.att-celula-alterada {
    background: var(--att-edit-bg);
    border-color: var(--att-edit-borda);
}

/* Alertas por linha */
.att-alerta {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.att-alerta-aviso {
    background: var(--att-aviso-bg);
    color: var(--att-aviso-fg);
}

.att-alerta-erro {
    background: var(--att-erro-bg);
    color: var(--att-erro-fg);
}

/* Barra de estado */
.att-barra-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--header-bg);
    color: var(--text-light);
    font-size: 13px;
}

.att-barra-estado strong {
    color: var(--text-dark);
}

.att-estado-ok {
    color: var(--att-ok-fg);
}

.att-estado-erro {
    color: var(--att-erro-fg);
}

/* Tela de conferencia da importacao */
.att-conferencia {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-dark);
}

.att-conferencia-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.att-conferencia-linha-ok td {
    background: var(--att-ok-bg);
}

.att-conferencia-linha-erro td {
    background: var(--att-erro-bg);
    color: var(--att-erro-fg);
}

.att-conferencia-diff {
    background: var(--att-diff-bg);
    font-weight: 600;
}

/* Barra de filtros da grade [AT-26a]: so' o layout; o formato do campo vem de .campo-padrao (styles.css) */
.att-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.att-filtro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-light);
    font-size: 13px;
}

.att-filtro.att-filtro-check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    color: var(--text-dark);
}

.att-filtros-acoes {
    display: flex;
    gap: 8px;
}

/* Barra de acoes do lote e selo de trava Olist */
.att-lote-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.att-selo-trava {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.att-selo-trava-desligada {
    background: var(--border-color);
    color: var(--text-light);
}

.att-selo-trava-habilitada {
    background: var(--att-ok-bg);
    color: var(--att-ok-fg);
}

.att-alerta-ok {
    background: var(--att-ok-bg);
    color: var(--att-ok-fg);
}

.att-btn-enviar-olist {
    cursor: pointer;
}

.att-lote-acoes-aviso {
    display: inline-block;
}

/* Esqueleto da tela: filtros, grade e paginacao (AT-25) */
.att-tela {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-dark);
}

.att-area-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.att-area-grade {
    min-width: 0;
}

.att-paginacao {
    display: flex;
    align-items: center;
    gap: 8px;
}

.att-paginacao-info {
    color: var(--text-light);
    font-size: 13px;
}

.att-aviso-sobre-grade {
    margin-bottom: 8px;
}

/* Painel do lote (AT-31c): passos do estado, abas e historico */
.att-painel-lote {
    margin-top: 12px;
}

.att-estado-passo {
    padding: 2px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-light);
}

.att-estado-atual {
    border-color: var(--att-ok-fg);
    background: var(--att-ok-bg);
    color: var(--att-ok-fg);
    font-weight: 600;
}

.att-abas {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.att-aba {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
    background: var(--header-bg);
    color: var(--text-light);
    cursor: pointer;
}

.att-aba-ativa {
    color: var(--text-dark);
    font-weight: 600;
}

.att-historico-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.att-envio-olist-desligado {
    color: var(--att-aviso-fg);
    font-size: 13px;
}

.att-historico {
    min-width: 0;
}

.att-historico-resultado {
    min-width: 0;
}

/* [AT-28d] Preco novo editavel: campo, margem ao vivo, alertas e erro do salvar na propria celula */
.att-col-preco-novo {
    min-width: 150px;
}

.att-edicao-preco {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.att-edicao-input {
    width: 100px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.att-edicao-input[aria-invalid="true"] {
    border-color: var(--att-erro-fg);
}

.att-edicao-margem {
    font-size: 12px;
}

.att-edicao-alertas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.att-edicao-erro {
    font-size: 12px;
    color: var(--att-erro-fg);
    user-select: text;
}

.att-btn-copiar-sugerido {
    margin-left: 6px;
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
}

/* [AT-29] Edicao em massa e painel de impacto */
.att-massa,
.att-massa-filtro,
.att-massa-regra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.att-massa {
    flex-direction: column;
    align-items: stretch;
}

.att-massa-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.att-massa-campo[hidden] {
    display: none;
}

.att-massa-rotulo,
.att-massa-cartao-rotulo {
    color: var(--text-light);
}

.att-massa-tabela-area {
    max-height: 320px;
    overflow: auto;
}

.att-massa-tabela {
    width: 100%;
    border-collapse: collapse;
}

.att-massa-tabela th,
.att-massa-tabela td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.att-massa-num {
    text-align: right;
}

.att-massa-resumo-cartoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.att-massa-cartao {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.att-massa-cartao-valor {
    font-size: 18px;
    font-weight: 600;
}

.att-massa-motivos-ignorada {
    color: var(--att-aviso-fg);
}

.att-massa-motivos-bloqueada {
    color: var(--att-erro-fg);
}
