table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: #46be8a;
}

.color-box-cor {
    border: 1px solid black;
    border-radius: 5px;
    width: 25px;
    float: left;
    height: 25px;
    color: #fff;
}

.color-box-descr {
    text-transform: uppercase;
    padding-left: 30px;
    height: 25px;
}

/* MX: select2 de Divisão de Venda — item em TRÊS linhas: código / descrição (quebra livre) /
   badge da categoria. Em vez de fundo pintado, o item tem BORDA na cor da categoria (inline no
   template, app.divisaoVenda.templateResultSelection em app.js) e o badge é vazado na mesma
   cor. Estrutura na base do combo de cliente (templateClienteComboBox). */
.dv-item-categoria {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.3;
}

.dv-item-categoria .dv-item-cod {
    font-weight: 700;
    color: #33383e;
}

.dv-item-categoria .dv-item-descr {
    color: #33383e;
    word-break: break-word;
}

.dv-item-categoria .dv-item-cat {
    margin-top: 3px;
}

.dv-badge-categoria {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    background-color: #fff;
}

.pointer {cursor: pointer;}
.progress, .progress-bar {cursor: progress;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

div.dataTables_wrapper div.dataTables_processing {
    height: auto;
}

/* ---------------------------------------------------------------------
   .row-flex — colunas da mesma linha com a mesma altura, sem JavaScript.

   O grid do Bootstrap 3 usa float: quando só algumas colunas têm
   .help-block, as alturas divergem, a coluna seguinte "engata" na anterior
   e a linha sai escalonada. Trocar a row para flex resolve na própria
   engine de layout — os itens de uma mesma linha esticam para a altura do
   mais alto (align-items: stretch é o default) e a quebra fica limpa.

   Preferível ao data-plugin="matchHeight" em formulário dentro de modal:
   o matchHeight MEDE e grava height inline, então precisa ser reexecutado
   ao abrir o modal (medir escondido dá altura 0), no resize da janela e a
   cada mudança de conteúdo — um .help-block preenchido por AJAX deixaria a
   altura obsoleta no mesmo instante. O flex não mede nada, só distribui.
   --------------------------------------------------------------------- */
.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.row-flex > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* Empurra o texto de ajuda para o rodapé da coluna. Com isso os campos de
   uma mesma linha ficam alinhados entre si mesmo quando as ajudas têm
   tamanhos diferentes — que é o desalinhamento que mais incomoda. */
.row-flex > [class*="col-"] > .help-block {
    margin-top: auto;
    margin-bottom: 0;
}

/* Faixa de texto longo sob a linha do DataTables (coluna com childRow: true).
   Vale para observação, histórico, descrição — texto que o usuário escreve em
   prosa e que, espremido numa célula da grade, estoura a altura da linha.

   Estrutura mora aqui; a COR mora no site-<cliente>.css via tokens --wn-nota-*,
   mesmo contrato do docs/tema/datatables.md. Sem a faixa no HTML o bloco é
   inerte, então atualizar o plugin não muda nada em quem não usa a flag. */
tr.wn-nota-row > td.wn-nota-cell {
    padding: 0 0 12px 0;
    border-top: 0;
}

.wn-nota {
    margin-left: 8px;
    padding: 1px 0 1px 12px;
    border-left: 3px solid var(--wn-nota-rule, #6b7c93);
    color: var(--wn-nota-ink, #303f50);
    font-size: 13px;
    line-height: 1.5;
    /* O aviso é escrito em parágrafos, acrescentados ao longo do tempo.
       Colapsar as quebras do autor destruiria a separação entre um episódio
       e outro — que é justamente o que dá sentido ao histórico. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   .menu-busca-* — busca de menus na navbar (layouts/_menuBusca.gsp).

   A linguagem visual copia o filtro do hub de suporte (suporte/index.gsp):
   campo com ícone à esquerda, badge de atalho à direita que some ao digitar.
   As cores são as de lá (#dfe3e6 borda, #b0bec5 texto secundário) para não
   inventar paleta nova.

   Mora aqui, e não num <style> do template, porque o template é renderizado
   DENTRO de um <ul> — um <style> ali fica fora do content model.

   Ver: webner-nucleo/docs/ui/busca-menu-navbar.md
   --------------------------------------------------------------------- */

/* O tema centraliza os itens da navbar pelo <a>: `.navbar-toolbar > li > a` leva
   `padding: 22px 0` + `line-height: 22px`, que somam exatamente os 66px de altura
   da navbar. O <li> deste componente contém uma <div>, não um <a>, então não pega
   nada disso e o campo encostaria no topo. Centraliza por flex em vez de repetir
   o padding: assim a conta não depende da altura do input, que muda com o tema. */
.navbar-toolbar > li.menu-busca-li {
    display: flex;
    align-items: center;
    height: 66px;
    padding: 0 15px;
}

/* `position: relative` é obrigatório: sem ele o ancestral posicionado mais
   próximo é a própria nav.site-navbar (navbar-fixed-top), e o ícone, o badge
   de atalho e o dropdown iriam para o canto da navbar inteira. */
.menu-busca-wrap {
    position: relative;
    width: 260px;
    max-width: 100%;
}

.menu-busca-wrap .form-control {
    padding-left: 30px;
    padding-right: 52px;
}

.menu-busca-icone {
    position: absolute;
    left: 11px;
    top: 50%;
    margin-top: -7px;
    color: #b0bec5;
}

.menu-busca-atalho {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -10px;
    padding: 0 5px;
    border: 1px solid #dfe3e6;
    border-radius: 3px;
    color: #b0bec5;
    font-size: 11px;
    line-height: 18px;
    pointer-events: none;
}

.menu-busca-wrap.is-ativo .menu-busca-atalho { display: none; }

/* ---------- dropdown de resultados ---------- */
.menu-busca-resultados {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 100%;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #dfe3e6;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.menu-busca-resultados.is-aberto { display: block; }

.menu-busca-item {
    display: block;
    padding: 6px 12px;
    color: #37474f;
    text-decoration: none;
    white-space: normal;
}

.menu-busca-item:hover,
.menu-busca-item:focus { color: #37474f; text-decoration: none; }

.menu-busca-item.is-focado,
.menu-busca-item:hover { background: #f3f7f9; }

.menu-busca-item-icone {
    display: inline-block;
    width: 1.2em;
    margin-right: 6px;
    text-align: center;
    color: #b0bec5;
}

.menu-busca-item-nome { font-weight: 600; }

.menu-busca-caminho {
    display: block;
    margin-left: calc(1.2em + 6px);
    font-size: 11px;
    color: #b0bec5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-busca-vazio,
.menu-busca-mais {
    display: none;
    margin: 0;
    padding: 8px 12px;
    color: #b0bec5;
    font-size: 12px;
}

.menu-busca-vazio.is-visivel,
.menu-busca-mais.is-visivel { display: block; }

/* Abaixo de 768px o .navbar-collapse ganha `max-height: 340px` + `overflow-y: auto`
   (bootstrap.css) e o `overflow: visible` só vale a partir de min-width: 768px —
   um dropdown absoluto seria cortado dentro da área rolável. Em mobile ele flui
   no fluxo normal. */
@media (max-width: 767px) {
    /* Dentro da área colapsada os itens empilham: a altura fixa de 66px e o float
       do tema deixariam o campo estreito e desalinhado do resto da lista. */
    .navbar-toolbar > li.menu-busca-li {
        display: block;
        float: none;
        width: 100%;
        height: auto;
        padding: 8px 15px;
    }

    .menu-busca-wrap { width: 100%; }

    .menu-busca-resultados {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: 220px;
        box-shadow: none;
    }
}

/* Chip de tag do CRM (app.formatters.tagsCrmChips). Fundo, cor e borda vem inline, derivados de
   TagsCrm.cor: pilula VAZADA (fundo a 12% + texto na cor escurecida), nao preenchida - preenchida
   a tag pesa mais que o dado principal da linha. Irmao visual do .kbn-chip do Kanban novo. */
.tag-crm-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    padding: 2px 9px;
    line-height: 1.5;
    margin: 1px 3px 1px 0;
    white-space: nowrap;
}