/**
 * Preview da importação em lote dos itens da fatura (DUE) — chamado 5372.
 * Escopo: modal .exp-planilha-preview (exp-fatura-planilha-itens-dialogo.tpl.html).
 *
 * Toda regra é prefixada pela classe raiz. Sem !important, sem estilo inline e sem
 * `outline: none` — o indicador de foco é obrigatório (o Tab é o caminho até uma ação
 * irreversível).
 *
 * Estado NUNCA sinalizado só por cor (WCAG 2.1 AA, 1.4.1): o template já traz ícone +
 * texto em cada sinal; a cor abaixo é a terceira camada, não a única. Desligar esta
 * folha deve deixar a tela inteiramente compreensível.
 *   ui-estado-criar      -> neutro escuro (#334155)
 *   ui-estado-atualizar  -> neutro escuro (#334155)
 *   ui-estado-rejeitado  -> perigo  (Bootstrap alert-danger: #a94442)
 *
 * Cores da paleta contextual Bootstrap3/SmartAdmin já carregada e das escalas de cinza
 * do design system, com contraste >= 4.5:1. Valores diretos (sem var()/pré-processador),
 * pela mesma restrição documentada em styles/css/tokens.css.
 */

.exp-planilha-preview {
    font-size: 13px;
    color: #334155;
}

/* ========== CABEÇALHO ========== */
/* tabindex="-1" recebe foco programático; sem contorno o usuário de teclado não vê. */
.exp-planilha-preview .modal-title:focus,
.exp-planilha-preview .ui-preview-erro:focus,
.exp-planilha-preview .ui-preview-aplicado:focus,
.exp-planilha-preview .ui-preview-rejeitado:focus,
.exp-planilha-preview .ui-preview-falha:focus {
    outline: 2px solid #3276b1;
    outline-offset: 2px;
}

/* ========== PROGRESSO (lendo / analisando / aplicando) ========== */
.exp-planilha-preview .ui-preview-progresso__corpo {
    padding: 34px 16px;
    color: #64748b;
}
.exp-planilha-preview .ui-preview-progresso__icone {
    margin-bottom: 12px;
    color: #3276b1;
}
.exp-planilha-preview .ui-preview-progresso__titulo {
    color: #334155;
    margin-bottom: 6px;
}
.exp-planilha-preview .ui-preview-progresso__garantia {
    margin: 0;
}

/* ========== VAZIO ========== */
.exp-planilha-preview .ui-preview-vazio {
    padding: 28px 16px;
    color: #64748b;
}
.exp-planilha-preview .ui-preview-vazio h4 {
    color: #334155;
    margin-bottom: 6px;
}
.exp-planilha-preview .ui-preview-vazio__icone {
    color: #94a3b8;
}

/* ========== NÍVEL 1 — RESUMO AGREGADO ========== */
.exp-planilha-preview .ui-preview-resumo {
    display: block;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.exp-planilha-preview .ui-preview-resumo__item {
    display: inline-block;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 16px;
}
.exp-planilha-preview .ui-preview-resumo__item .fa {
    margin-right: 3px;
}
.exp-planilha-preview .ui-preview-resumo__total {
    color: #64748b;
    font-weight: 400;
}

/* Tokens de estado: 3ª camada do sinal (ícone e texto já vêm do template). */
.exp-planilha-preview .ui-estado-criar { color: #334155; }
.exp-planilha-preview .ui-estado-atualizar { color: #334155; }
.exp-planilha-preview .ui-estado-rejeitado { color: #a94442; }

/* ========== NÍVEL 2 — AVISOS ========== */
.exp-planilha-preview .alert {
    padding: 8px 10px;
    margin-bottom: 8px;
}
.exp-planilha-preview .alert .fa {
    margin-right: 4px;
}
.exp-planilha-preview .ui-preview-aviso-leitura__lista {
    list-style: none;
    padding: 6px 0 0;
    margin: 0;
}
.exp-planilha-preview .ui-preview-aviso-leitura__coluna {
    display: inline-block;
    margin-right: 10px;
    white-space: nowrap;
}
.exp-planilha-preview .ui-preview-aviso-leitura__coluna:after {
    content: "·";
    margin-left: 10px;
    color: #94a3b8;
}
.exp-planilha-preview .ui-preview-aviso-leitura__coluna:last-child:after {
    content: "";
    margin-left: 0;
}
.exp-planilha-preview .ui-preview-aviso-stale__acao {
    margin-left: 8px;
}

/* ========== NÍVEL 3 — LINHAS REJEITADAS ========== */
.exp-planilha-preview .ui-preview-erros {
    margin-top: 12px;
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
}
.exp-planilha-preview .ui-preview-erros__titulo {
    display: inline-block;
    margin: 0 12px 6px 0;
    font-weight: 700;
    color: #a94442;
}
.exp-planilha-preview .ui-preview-erros__agregacao {
    display: inline-block;
    margin: 0 0 6px;
    color: #64748b;
}
.exp-planilha-preview .ui-preview-erros__coluna-top {
    margin-right: 10px;
    white-space: nowrap;
}
.exp-planilha-preview .ui-preview-erros__baixar {
    margin-bottom: 8px;
}

/* Densidade: ~12 linhas visíveis sem rolar a página inteira do modal. */
.exp-planilha-preview .ui-preview-erros__tabela {
    font-size: 12px;
    margin-bottom: 0;
}
.exp-planilha-preview .ui-preview-erros__tabela > thead > tr > th,
.exp-planilha-preview .ui-preview-erros__tabela > tbody > tr > td {
    padding: 4px 6px;
    vertical-align: top;
}
.exp-planilha-preview .ui-preview-erros__busca {
    padding: 6px 6px;
    background: #fafbfc;
}
.exp-planilha-preview .ui-preview-erros__col-linha { width: 70px; }
.exp-planilha-preview .ui-preview-erros__col-coluna { width: 170px; }
.exp-planilha-preview .ui-preview-erros__col-recebido { width: 26%; }

.exp-planilha-preview .ui-preview-erro__linha {
    color: #a94442;
    font-weight: 600;
}
.exp-planilha-preview .ui-preview-erro__linha .fa {
    margin-right: 3px;
}
/* Valor recebido e esperado são texto livre: quebram em vez de esticar a tabela. */
.exp-planilha-preview .ui-preview-erro__recebido,
.exp-planilha-preview .ui-preview-erro__esperado {
    word-break: break-word;
}

/* O corpo do modal rola; a página por trás não. */
.exp-planilha-preview .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* ========== APLICADO ========== */
.exp-planilha-preview .ui-preview-aplicado {
    padding: 20px 8px;
}
.exp-planilha-preview .ui-preview-aplicado__titulo {
    margin-top: 0;
    color: #3c763d;
}
.exp-planilha-preview .ui-preview-aplicado__detalhe {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.exp-planilha-preview .ui-preview-aplicado__detalhe > li {
    line-height: 1.7;
}

/* ========== REJEITADO / FALHA ========== */
.exp-planilha-preview .ui-preview-rejeitado,
.exp-planilha-preview .ui-preview-falha {
    padding: 28px 16px;
    color: #64748b;
}
.exp-planilha-preview .ui-preview-rejeitado h4,
.exp-planilha-preview .ui-preview-rejeitado__icone {
    color: #a94442;
}
.exp-planilha-preview .ui-preview-falha h4,
.exp-planilha-preview .ui-preview-falha__icone {
    color: #8a6d3b;
}
/* Mensagem do servidor verbatim: preserva a lista de colunas que faltam no cabeçalho. */
.exp-planilha-preview .ui-preview-rejeitado__mensagem,
.exp-planilha-preview .ui-preview-falha__mensagem {
    margin: 10px auto 0;
    max-width: 640px;
    color: #334155;
    white-space: pre-wrap;
}

/* ========== RODAPÉ ========== */
.exp-planilha-preview .ui-preview-rodape .btn + .btn {
    margin-left: 6px;
}
.exp-planilha-preview .ui-preview-rodape .btn .fa {
    margin-right: 4px;
}

/* ========== SELETOR DE ARQUIVO (fora do modal) ==========
 * exp-processo-fatura.tpl.html traz <input type="file" hidden> como seletor do SO,
 * disparado só por abrirUploadPlanilhaItens(). O atributo `hidden` NÃO basta:
 * bootstrap.min.css define input[type=file]{display:block} — especificidade (0,1,1) —
 * que vence [hidden]{display:none} — (0,1,0) — da normalize embutida no mesmo arquivo,
 * e o input aparecia solto no topo da tela ("Escolher arquivo / Nenhum arquivo escolhido").
 * Esta regra é (0,2,1) e esta folha carrega depois do bootstrap (index.html): vence sem
 * !important e sem estilo inline. O `hidden` continua no template pela acessibilidade. */
input[type="file"].ui-upload-oculto {
    display: none;
}

/* ===== Resumo em frases (cartões clicáveis = filtro da lista) ===== */
.exp-planilha-preview .ui-resumo {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}
.exp-planilha-preview .ui-resumo__cartao {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.exp-planilha-preview .ui-resumo__cartao[disabled] {
    cursor: default;
    opacity: .55;
}
.exp-planilha-preview .ui-resumo__cartao:not([disabled]):hover { background: #f8fafc; }
.exp-planilha-preview .ui-resumo__cartao--CRIAR { border-left-color: #3c763d; }
.exp-planilha-preview .ui-resumo__cartao--ATUALIZAR { border-left-color: #3276b1; }
.exp-planilha-preview .ui-resumo__cartao--REJEITADA { border-left-color: #a94442; }
.exp-planilha-preview .ui-resumo__numero {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}
.exp-planilha-preview .ui-resumo__cartao--CRIAR .ui-resumo__numero { color: #3c763d; }
.exp-planilha-preview .ui-resumo__cartao--ATUALIZAR .ui-resumo__numero { color: #3276b1; }
.exp-planilha-preview .ui-resumo__cartao--REJEITADA .ui-resumo__numero { color: #a94442; }
.exp-planilha-preview .ui-resumo__texto { font-size: 13px; line-height: 1.25; }
.exp-planilha-preview .ui-resumo__rodape {
    color: #64748b;
    font-size: 12px;
    margin-bottom: 12px;
}

/* ===== Lista linha a linha ===== */
.exp-planilha-preview .ui-linhas__filtros { margin-bottom: 6px; }
.exp-planilha-preview .ui-linhas__filtros .btn { margin-right: 4px; }
.exp-planilha-preview .ui-linhas__tabela { font-size: 12px; margin-bottom: 6px; }
.exp-planilha-preview .ui-linhas__tabela > thead > tr > th { color: #64748b; font-weight: 600; }
.exp-planilha-preview .ui-linhas__tabela > tbody > tr > td { vertical-align: top; }
.exp-planilha-preview .ui-linhas__col-linha { width: 50px; }
.exp-planilha-preview .ui-linhas__col-acao { width: 120px; white-space: nowrap; }
.exp-planilha-preview .ui-linhas__col-item { width: 90px; white-space: nowrap; }
.exp-planilha-preview .ui-linhas__novo { color: #3c763d; font-weight: 600; }
.exp-planilha-preview .ui-linhas__posicao { display: block; color: #94a3b8; }
.exp-planilha-preview .ui-linhas__descricao {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
}
.exp-planilha-preview .ui-linhas__coluna {
    display: inline-block;
    margin: 0 4px 2px 0;
    padding: 0 6px;
    background: #eff6ff;
    border-radius: 3px;
    color: #1e40af;
}
.exp-planilha-preview .ui-linhas__mudo { color: #94a3b8; }
.exp-planilha-preview .ui-linhas__mensagens { margin: 2px 0 0; padding-left: 16px; }
.exp-planilha-preview .ui-linhas__mensagens--erro { color: #a94442; }
.exp-planilha-preview .ui-linhas__mensagens--aviso { color: #8a6d3b; }

.exp-planilha-preview .ui-acao { font-weight: 600; }
.exp-planilha-preview .ui-acao--CRIAR { color: #3c763d; }
.exp-planilha-preview .ui-acao--ATUALIZAR { color: #3276b1; }
.exp-planilha-preview .ui-acao--IGUAL { color: #94a3b8; font-weight: normal; }
.exp-planilha-preview .ui-acao--REJEITADA { color: #a94442; }
.exp-planilha-preview .ui-linha--REJEITADA > td { background: #fdf3f3; }

.exp-planilha-preview .ui-preview-aplicado__rejeitadas { color: #a94442; }