/*
 * A `Cotação de preço` redesenhada (plano `docs/legado/compras/plano-redesenho-cotacao.md`,
 * aprovado em 07/10/2026). So as pecas que o tema nao tem:
 *
 *   - as quatro etapas da cotacao (`_CabecalhoCotacao.cshtml`) — Itens, Fornecedores,
 *     Apuracao e Ordens de compra —, a navegacao entre as paginas da rodada;
 *   - a janela larga da `Seleção de Produtos` (`_Modal.cshtml`, `data-largura="larga"`);
 *   - a grade editavel de `Digitar resposta` (`Digitar.cshtml`, onda 2, decisao 08): duas
 *     `<tr>` por item, a linha em edicao, a linha alterada e nao salva, o `salvo`;
 *   - o mapa da `Apuração` (`Apuracao.cshtml`, onda 3, decisoes 10 a 12): o cabecalho de cada
 *     fornecedor, a celula da oferta (marcada, vencedora, sem preco, travada) e a barra fixa do
 *     `Gerar OC`.
 *
 * Nenhuma cor literal: tudo de `--bs-*`, entao o modo escuro sai pronto do Metronic, como em
 * `alpha-grade.css` e `alpha-dica.css`.
 */

/* ---------------------------------------------------------------- as quatro etapas */

.fluxo-cotacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.fluxo-etapa {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1 1 0;
    min-width: 0;
    padding: .7rem 1.1rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    color: inherit;
}

.fluxo-etapa:hover {
    border-color: var(--bs-primary);
}

.fluxo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-gray-100);
    color: var(--bs-gray-600);
    font-weight: 700;
    font-size: 1.05rem;
}

.fluxo-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fluxo-titulo {
    color: var(--bs-gray-800);
    font-weight: 700;
    font-size: 1.05rem;
    /* Quebra so entre palavras: `Fornecedores` nunca vira `Fornecedor` + `es`. */
    overflow-wrap: normal;
    word-break: normal;
}

.fluxo-desc {
    overflow: hidden;
    color: var(--bs-gray-600);
    font-size: .85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fluxo-linha {
    flex-shrink: 0;
    width: 28px;
    height: 2px;
    background: var(--bs-gray-300);
}

.fluxo-etapa.atual {
    border-color: var(--bs-primary);
    background: var(--bs-primary-light);
}

.fluxo-etapa.atual .fluxo-num {
    background: var(--bs-primary);
    color: var(--bs-primary-inverse);
}

.fluxo-etapa.atual .fluxo-titulo {
    color: var(--bs-primary);
}

.fluxo-etapa.concluida .fluxo-num,
.fluxo-etapa.concluida .fluxo-num i {
    background: var(--bs-success-light);
    color: var(--bs-success);
}

/*
 * Ate 1280 px: duas etapas por linha, sem o traco. Com o menu lateral aberto, abaixo disso as
 * quatro numa linha so ficam com menos de 200 px cada e o titulo nao cabe (bancada da onda 5).
 * No celular, uma por linha.
 */
@media (max-width: 1279.98px) {
    .fluxo-cotacao {
        gap: .5rem;
    }

    .fluxo-etapa {
        flex: 1 1 calc(50% - .5rem);
    }

    .fluxo-linha {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .fluxo-etapa {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------- a janela da `Seleção de Produtos` */

/* `UPesqRequisicaoPendente.dfm` e a janela larga do recorte: duas grades lado a lado. */
.modal-dialog.cotacao-modal-larga {
    max-width: 95vw;
}

/* ---------------------------------------------------- a grade de `Digitar resposta` */

/* As duas `<tr>` de um item (os campos e, embaixo, `Marca` / `Ofertado`) leem como uma so. */
.table.grade-digitar tr.digitar-a {
    border-bottom-width: 0;
}

.grade-digitar .digitar-qtde {
    width: 5.5rem;
}

.grade-digitar .digitar-preco {
    width: 6.5rem;
}

.grade-digitar .digitar-taxa {
    width: 4.75rem;
}

.grade-digitar .digitar-prazo {
    width: 4rem;
}

/* A linha em edicao — as duas `<tr>` do item. */
.grade-digitar tr.digitar-atual > td {
    background-color: var(--bs-primary-light);
}

/* Alterada e nao salva: a faixa na borda esquerda (a celula do `+` ocupa as duas `<tr>`). */
.grade-digitar tr.digitar-a.digitar-suja > td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-warning);
}

/* Gravando: a linha espera a resposta do servidor. */
.grade-digitar tr.digitar-gravando > td {
    opacity: .6;
}

.grade-digitar .digitar-salvo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.grade-digitar .digitar-salvo.d-none {
    display: none !important;
}

/* ------------------------------------------------------------- o mapa da `Apuração` */

/* Uma coluna por fornecedor: nome, codigo da cotacao + condicao, e o status quando nao respondeu. */
.table.mapa > thead > tr > th {
    vertical-align: bottom;
}

.mapa th.mapa-forn {
    min-width: 168px;
    text-align: center;
}

.mapa .mapa-forn-nome {
    display: block;
    color: var(--bs-gray-800);
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}

.mapa .mapa-forn-sub {
    display: block;
    margin-top: .15rem;
    color: var(--bs-gray-600);
    font-size: .8rem;
    font-weight: 500;
}

.table.mapa > tbody > tr > td.mapa-cel {
    padding: .35rem .4rem;
}

/* Item ja comprado: a linha inteira fica de fundo cinza (a celula do `Vencedor` continua verde). */
.table.mapa > tbody > tr.mapa-comprada > td {
    background-color: var(--bs-gray-100);
}

/* A celula da oferta — um botao: clique marca, outro clique na linha troca (decisao 09). */
.celula {
    position: relative;
    display: block;
    width: 100%;
    min-height: 64px;
    padding: .45rem .6rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: .55rem;
    background: var(--bs-body-bg);
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.celula:hover {
    border-color: var(--bs-primary);
}

.celula .c-unit,
.celula .c-total,
.celula .c-meta {
    display: block;
}

.celula .c-unit {
    color: var(--bs-gray-900);
    font-size: 1rem;
    font-weight: 700;
}

.celula .c-unit small {
    color: var(--bs-gray-600);
    font-size: .75rem;
    font-weight: 500;
}

.celula .c-total {
    color: var(--bs-gray-700);
    font-size: .82rem;
}

.celula .c-meta {
    color: var(--bs-gray-500);
    font-size: .78rem;
}

/* `Menor preço` / `Vencedor` no canto de cima; o preco desce para nao ficar por baixo. */
.celula .c-selo {
    position: absolute;
    top: .4rem;
    left: .45rem;
}

.celula.com-selo .c-unit {
    margin-top: 1.45rem;
}

/* Os dois selos na mesma oferta (`Menor preço` e `Menor custo`, divergencia 1164): um embaixo do outro, e o preco desce
   mais uma linha. */
.celula .c-selo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
}

.celula.com-selo.dois-selos .c-unit {
    margin-top: 2.9rem;
}

.celula .c-radio {
    position: absolute;
    bottom: .45rem;
    left: .5rem;
    width: 16px;
    height: 16px;
    border: 2px solid var(--bs-gray-400);
    border-radius: 50%;
    background: var(--bs-body-bg);
}

.celula.marcada {
    padding: calc(.45rem - 1px) calc(.6rem - 1px);
    border: 2px solid var(--bs-primary);
    background: var(--bs-primary-light);
}

.celula.marcada .c-radio {
    border-color: var(--bs-primary);
    background: radial-gradient(circle, var(--bs-primary) 45%, var(--bs-body-bg) 50%);
}

.celula.vencedora {
    padding: calc(.45rem - 1px) calc(.6rem - 1px);
    border: 2px solid var(--bs-success);
    background: var(--bs-success-light);
    cursor: default;
}

/* Sem preco (`não cotou`, `aguardando`...) e o item fora da cotacao: tracejada, sem marcacao. */
.celula.vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: transparent;
    color: var(--bs-gray-500);
    font-size: .8rem;
    text-align: center;
    cursor: not-allowed;
}

.celula.vazia:hover,
.celula.bloqueada:hover {
    border-color: var(--bs-gray-200);
}

/* As demais ofertas do item comprado: aparecem, mas apagadas e sem marcacao. */
.celula.bloqueada {
    opacity: .55;
    cursor: default;
}

/* A amostra da `Legenda`: a celula marcada em miniatura. */
.celula.mapa-amostra {
    display: inline-block;
    width: 34px;
    min-height: 22px;
    padding: 0;
}

/*
 * A barra do `Gerar OC`, fixa no pe da janela enquanto o card esta na tela. Acima da coluna fixa
 * `grade-acoes` da grade `Cotações` do `+` (`z-index: 1`, `alpha-grade.css`) e abaixo do header e da
 * sidebar do tema (`104` a `110`).
 */
.mapa-rodape {
    position: sticky;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid var(--bs-gray-200);
    background: var(--bs-body-bg);
    box-shadow: 0 -6px 18px rgba(var(--bs-dark-rgb), .05);
}

/*
 * `Criação de Cotação` (onda 4 do redesenho): a mensagem da conta e o bloco do link na previa do
 * e-mail saem como o e-mail de texto sai — as quebras de linha valem.
 */
.cotacao-envio-mensagem {
    white-space: pre-wrap;
}

.cotacao-envio-linha:last-child {
    border-bottom: 0 !important;
}