/*
 * Estilos proprios do Apontoo, separados dos arquivos originais do tema
 * uBold (ver apotoo-06-tema-ubold-frontend.md, secao "Organizacao de
 * arquivos estaticos" -- nunca misturar customizacao nossa dentro dos
 * arquivos do tema, pra facilitar atualizar o tema no futuro).
 */

/*
 * Registro inativo em listagem (datagrid) -- decisao de 01/09/2026, ver
 * claude/apotoo-18-padrao-datagrid-auditoria.md. Cinza discreto (nao
 * vermelho, pra nao competir visualmente com alerta/erro de verdade do
 * sistema) + texto riscado. Usa a variavel de cor "secundaria" do
 * Bootstrap do proprio tema, em vez de uma cor fixa, pra acompanhar claro
 * e escuro automaticamente.
 */
tr.apontoo-linha-inativa td {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
}

tr.apontoo-linha-inativa .badge {
    text-decoration: none;
}

/*
 * Mesmo problema ja documentado abaixo pra ".apontoo-linha-removida":
 * texto dentro de input/select/textarea nao herda "text-decoration" do
 * elemento pai. A regra acima (".apontoo-linha-inativa td") ja bastava
 * pra listagem (texto solto, sem campo de formulario), mas essa mesma
 * classe passou a ser usada tambem ao vivo dentro do formset de culturas
 * de Area/Talhao (ver comum/static/comum/js/formset-remover-linha.js,
 * decisao de 01/09/2026), onde toda celula e um campo -- por isso essa
 * regra a mais, so pra quando a classe cai num campo de formulario. Sem
 * "pointer-events: none" aqui (diferente de ".apontoo-linha-removida"),
 * porque um registro so inativo ainda pode ser editado/reativado
 * normalmente -- so o que esta de fato marcado pra sair (removida) e que
 * trava a edicao.
 */
tr.apontoo-linha-inativa input,
tr.apontoo-linha-inativa select,
tr.apontoo-linha-inativa textarea {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
}

/*
 * Linha de um formset mestre-detalhe marcada pra remocao (botao de
 * lixeira em vez do checkbox DELETE cru do Django) -- decisao de
 * 01/09/2026, ver claude/apotoo-18-padrao-datagrid-auditoria.md e
 * comum/static/comum/js/formset-remover-linha.js. Vermelho bem sutil
 * (fundo) pra diferenciar de ".apontoo-linha-inativa" (cinza) -- aqui o
 * usuario esta prestes a excluir de verdade ao salvar, entao faz sentido
 * um aviso um pouco mais forte que "so inativo".
 *
 * ATUALIZACAO, mesmo dia: essa classe ficou sem uso depois que o
 * comportamento da lixeira mudou pra "confirmar e sumir na hora" (ver
 * formset-remover-linha.js) -- a linha marcada pra remocao agora some da
 * tela (classe "d-none"), nao fica visivel riscada esperando o salvar.
 * Mantive a regra aqui, sem remover, porque pode valer reaproveitar esse
 * estilo (risco + fundo vermelho) em algum outro fluxo futuro que precise
 * mostrar "isto vai ser removido" sem escender de vez.
 */
tr.apontoo-linha-removida {
    opacity: 0.55;
    background-color: rgba(220, 53, 69, 0.08);
}

tr.apontoo-linha-removida td {
    text-decoration: line-through;
}

/*
 * "text-decoration" na celula (regra acima) nao risca o TEXTO DENTRO de
 * input/select/textarea -- e uma limitacao normal do CSS em navegador
 * (elemento de formulario nao herda text-decoration do pai), nao um bug
 * deste sistema. Como quase toda celula do formset de culturas e um
 * campo de formulario (nao texto solto), a regra acima sozinha nao
 * mostrava risco nenhum na pratica -- so a leve mudanca de opacidade,
 * facil de nao perceber (bug real relatado pelo Francismar em
 * 01/09/2026, com print da tela mostrando a linha marcada sem nenhuma
 * diferenca visivel). Corrigido estilizando os proprios campos.
 *
 * "pointer-events: none" tambem desabilita clique/edicao nesses campos
 * enquanto a linha estiver marcada pra remocao -- nao faz sentido deixar
 * editar um dado que vai sumir ao salvar, e isso tambem evita o usuario
 * mexer sem querer e reativar a validacao completa da linha (mesma
 * pegadinha ja registrada pra linha extra em branco do formset, ver
 * apotoo-18). Os valores continuam sendo enviados no POST normalmente --
 * "pointer-events" e so visual/interacao, diferente do atributo HTML
 * "disabled", que faria o navegador parar de enviar o campo.
 */
tr.apontoo-linha-removida input,
tr.apontoo-linha-removida select,
tr.apontoo-linha-removida textarea {
    text-decoration: line-through;
    background-color: rgba(220, 53, 69, 0.12);
    pointer-events: none;
}

/*
 * Zebra na arvore de fechamento de colaborador (folhapagamento) -- so
 * na linha de COLABORADOR (nivel 0), pedido do Francismar em
 * claude/apotoo-58. As linhas filhas (atividade/modelo/ticket) ja se
 * diferenciam pelo recuo crescente (padding-left, ver
 * folhapagamento/static/folhapagamento/js/fechamento.js), entao zebrar
 * so o nivel de cima basta pra guiar o olho sem competir com essa
 * indentacao. "--bs-tertiary-bg" e a variavel de fundo "neutro" do
 * Bootstrap 5.3 do proprio tema uBold -- acompanha claro/escuro
 * sozinha, mesmo raciocinio das variaveis ja usadas acima neste
 * arquivo.
 */
tr.apontoo-linha-colaborador-zebra {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/*
 * Card do ticket -- nivel mais interno da arvore de fechamento de
 * colaborador. Pedido do Francismar em claude/apotoo-58: o ticket
 * deixou de ser uma linha comum (poucas colunas) e virou um card com
 * todos os dados do lancamento, dentro da MESMA tabela (uma celula so,
 * com colspan -- ver desenharTicket, em fechamento.js), sem quebrar a
 * estrutura de arvore que o resto da tela usa.
 */
.apontoo-card-ticket {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
}

.apontoo-card-ticket dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.25rem 1rem;
    margin-bottom: 0;
}

.apontoo-card-ticket dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    margin-bottom: 0.0625rem;
}

.apontoo-card-ticket dd {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-emphasis-color, #000);
    font-weight: 500;
}

/*
 * Cabecalho do card do ticket (numero + selo de conferencia) --
 * separado do corpo por uma linha, pra ficar claro que "Ticket no X" e
 * o TITULO do card, nao mais um rotulo igual aos de baixo (DATA E
 * HORA, AREA/TALHAO etc.). Pedido do Francismar em claude/apotoo-60,
 * depois de ver a tela em producao: os titulos e os rotulos internos
 * estavam com peso visual parecido demais.
 */
.apontoo-card-ticket-cabecalho {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.375rem;
}

.apontoo-card-ticket-titulo {
    font-size: 0.9375rem;
    font-weight: 700;
}

/*
 * Ticket, atividade, modelo ou colaborador DESMARCADO na arvore de
 * fechamento -- ou seja, EXCLUIDO desta rodada de fechamento (nao
 * confundir com "apontoo-linha-inativa", usada no resto do sistema
 * pra registro genuinamente inativo). Pedido do Francismar em
 * claude/apotoo-60, depois de testar em producao: o cinza discreto de
 * "apontoo-linha-inativa" nao deixava claro que aquele ticket ia FICAR
 * DE FORA do pagamento se confirmasse agora -- aqui o significado e
 * mais forte, entao o visual precisa ser mais forte tambem (vermelho,
 * nao cinza).
 */
tr.apontoo-linha-fora-fechamento td {
    color: var(--bs-danger, #dc3545);
    text-decoration: line-through;
}

tr.apontoo-linha-fora-fechamento .badge {
    text-decoration: none;
}

/*
 * O card do ticket ja tem risco em cada dt/dd (herdado da regra acima,
 * que aplica a TODAS as celulas da linha) -- aqui so acrescenta o
 * contorno e o fundo vermelhos, pra o card inteiro "saltar aos olhos"
 * como fora do fechamento mesmo em quem so olhar por cima, sem ler o
 * texto riscado.
 */
tr.apontoo-linha-fora-fechamento .apontoo-card-ticket {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: var(--bs-danger, #dc3545);
    border-left-width: 0.25rem;
}

/*
 * Checkbox da arvore de fechamento -- pedido do Francismar em
 * claude/apotoo-60: o quadradinho desmarcado (contorno claro padrao do
 * Bootstrap) ficava "apagado" demais no meio de tanta linha/card.
 * Contorno mais grosso e mais escuro so aqui, sem mudar o checkbox
 * padrao usado no resto do sistema.
 */
#apotoo-tabela-arvore-fechamento .form-check-input {
    border-width: 2px;
    border-color: var(--bs-secondary-color, #6c757d);
}

/*
 * Histórico de fechamentos (folhapagamento, claude/apotoo-64): destaque
 * da linha do lote conforme a reversão, pedido do Francismar em
 * 29/09/2026. Amarelo quando só alguns colaboradores foram revertidos,
 * vermelho quando o fechamento inteiro foi. O tom é sutil de propósito
 * (fundo), o significado já vem do selo de situação ao lado; a borda da
 * esquerda ajuda a bater o olho numa lista longa.
 * ".apontoo-linha-revertida" é a mesma ideia pra UM colaborador dentro do
 * painel do lote.
 */
tr.apontoo-linha-lote-parcial > td {
    background-color: rgba(255, 193, 7, 0.10);
}

tr.apontoo-linha-lote-parcial > td:first-child {
    box-shadow: inset 3px 0 0 #ffc107;
}

tr.apontoo-linha-lote-revertido > td {
    background-color: rgba(220, 53, 69, 0.08);
}

tr.apontoo-linha-lote-revertido > td:first-child {
    box-shadow: inset 3px 0 0 #dc3545;
}

tr.apontoo-linha-revertida > td {
    background-color: rgba(220, 53, 69, 0.06);
}


/*
 * Painel do lote de fechamento (folhapagamento/_lote_detalhe.html):
 * - ".apontoo-linha-clicavel": linha da lista de colaboradores que, ao
 *   clique, filtra os tickets logo abaixo; ".apontoo-linha-selecionada" é a
 *   escolhida no momento.
 * - ".apontoo-celula-cortada": texto longo (atividade, forma de pagamento)
 *   que corta com reticências em vez de quebrar a linha da tabela de tickets.
 */
tr.apontoo-linha-clicavel { cursor: pointer; }
tr.apontoo-linha-selecionada > td {
    box-shadow: inset 0 0 0 100px rgba(var(--bs-primary-rgb), 0.14);
    font-weight: 600;
}
td.apontoo-celula-cortada {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Conferência: ticket fechado em folha fica esmaecido, pra o conferente ver de longe que não há mais o que fazer nele. */
tr.apontoo-linha-fechada > td { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

/*
 * Titulo de secao do menu lateral (hoje: Cliente / Fazenda / Producao e
 * Servicos / Relatorios -- ver claude/apotoo-110). Pedido do Francismar
 * em 18/10/2026, depois de ver o menu em producao: o tema uBold desenha
 * esse titulo com a MESMA cor do item de menu comum, so que a 70% do
 * tamanho (ver ubold/static/scss/structure/_sidenav.scss) -- um estilo
 * pensado pra ficar discreto num painel administrativo denso, mas no
 * nosso caso o titulo precisa ser reconhecido de cara como fronteira de
 * modulo, inclusive por um usuario com pouca familiaridade com tela,
 * sendo orientado por telefone (dar pra dizer "olha onde esta escrito
 * FAZENDA" e a pessoa achar sem procurar).
 *
 * A cor usa a propria variavel de "destaque ao passar o mouse" do tema
 * (--theme-sidenav-item-hover-color) em vez de uma cor fixa nossa,
 * porque essa variavel ja muda sozinha junto com a cor do menu lateral
 * que cada fazenda escolhe em Configuracoes da fazenda (clara, escura,
 * cinza, gradiente, imagem) E junto com o tema visual da fazenda (uBold
 * tem varias "peles" aqui dentro, nao so uma) -- o tema ja garante, pra
 * cada uma dessas combinacoes, um tom de destaque com contraste bom
 * contra o fundo daquele menu. Uma cor fixa nossa funcionaria bem numa
 * combinacao e ficaria ilegivel (ou quase invisivel) em outra.
 *
 * O seletor ".side-nav .side-nav-title" repete o mesmo usado pelo tema
 * (nao so ".side-nav-title") de proposito: precisa da mesma
 * especificidade CSS pra essa regra ganhar por ordem de carga (este
 * arquivo entra depois do app.min.css em partials/head-css.html), sem
 * precisar de "!important".
 */
.side-nav .side-nav-title {
    color: var(--theme-sidenav-item-hover-color);
    font-size: 0.8125rem;
}

/*
 * Barra de atalhos aos itens de menu mais usados -- segunda faixa
 * horizontal, abaixo da topbar, decisao completa em
 * claude/apotoo-117-barra-atalhos-mais-usados-menu-lateral-desenho.md.
 * Template: ubold/templates/partials/barra_atalhos.html, incluido em
 * ubold/templates/layouts/vertical.html logo depois da topbar.
 *
 * Cor de fundo e dos itens usando as MESMAS variaveis do menu lateral
 * (--theme-sidenav-bg, --theme-sidenav-item-color,
 * --theme-sidenav-item-hover-color/-bg) de proposito -- a ideia,
 * decidida com o Francismar, e essa faixa se ler como uma EXTENSAO do
 * menu lateral (mesma cor, mesma familia visual), nao uma terceira
 * barra com identidade propria, pra diferenciar claramente da topbar
 * (clara/escura conforme --theme-topbar-bg) sem introduzir uma cor
 * nova no sistema. Como essas variaveis ja mudam sozinhas conforme a
 * fazenda escolhe a cor do menu lateral em Configuracoes da fazenda
 * (clara, escura, cinza, gradiente, imagem) e conforme o tema
 * claro/escuro, esta faixa acompanha automaticamente, sem nenhum
 * `if` daqui.
 *
 * "margin-inline-start: var(--theme-sidenav-width)" reproduz o mesmo
 * recuo que ".app-topbar" e ".content-page" do proprio tema usam (ver
 * ubold/static/scss/structure/_topbar.scss e _sidenav.scss) pra nao
 * atravessar o menu lateral -- nos breakpoints "condensed" (menu
 * encolhido, telas medias) e "offcanvas" (menu escondido, celular) o
 * tema troca o atributo "data-sidenav-size" na tag <html> via
 * JavaScript (ver ubold/static/js/app.js, _adjustLayout) e so entao
 * aplica outro recuo -- por isso os dois blocos abaixo usam os MESMOS
 * seletores de atributo que o tema usa, em vez de inventar um
 * media query novo que teria que adivinhar o breakpoint certo.
 *
 * "position: sticky" com "top: var(--theme-topbar-height)" faz a
 * faixa colar bem embaixo da topbar (que tambem e sticky, no topo
 * absoluto) ao rolar a tela, em vez de rolar junto com o conteudo --
 * e exatamente o comportamento de "barra de atalhos sempre a mao" que
 * motivou a funcionalidade.
 */
.apontoo-barra-atalhos {
    position: sticky;
    top: var(--theme-topbar-height);
    z-index: 1000;
    margin-inline-start: var(--theme-sidenav-width);
    background: var(--theme-sidenav-bg);
    border-bottom: 1px solid var(--theme-sidenav-border-color, transparent);
    transition: margin-left 0.25s ease-in-out;
}

.apontoo-barra-atalhos-itens {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding-inline: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.apontoo-barra-atalhos-itens::-webkit-scrollbar {
    display: none;
}

.apontoo-barra-atalhos-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.apontoo-barra-atalhos-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.75rem;
    padding-inline: 0.625rem;
    color: var(--theme-sidenav-item-color);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: none;
}

.apontoo-barra-atalhos-link i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.apontoo-barra-atalhos-item:hover .apontoo-barra-atalhos-link,
.apontoo-barra-atalhos-link:focus {
    color: var(--theme-sidenav-item-hover-color);
    background-color: var(--theme-sidenav-item-hover-bg);
}

/*
 * Botao de fixar/desfixar -- discreto por padrao (so aparece "forte"
 * no hover do item ou quando o item ja esta fixado), pra nao disputar
 * atencao com o icone/rotulo, que e o que importa de verdade na
 * faixa. O pino preenchido (".fixado") fica na cor de destaque do
 * menu o tempo todo, mesmo sem hover, pra o usuario identificar de
 * cara quais dos 6 itens ele fixou manualmente.
 */
.apontoo-barra-atalhos-form-fixar {
    display: flex;
    align-items: center;
}

.apontoo-barra-atalhos-botao-fixar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    color: var(--theme-sidenav-item-color);
    opacity: 0.45;
    border-radius: 0.25rem;
}

.apontoo-barra-atalhos-botao-fixar .apontoo-icone-pin {
    width: 0.8125rem;
    height: 0.8125rem;
}

.apontoo-barra-atalhos-item:hover .apontoo-barra-atalhos-botao-fixar {
    opacity: 1;
}

.apontoo-barra-atalhos-botao-fixar:hover {
    color: var(--theme-sidenav-item-hover-color);
    background-color: var(--theme-sidenav-item-hover-bg);
}

.apontoo-barra-atalhos-botao-fixar.fixado {
    color: var(--theme-sidenav-item-hover-color);
    opacity: 1;
}

/* Menu "condensed" (telas medias, ~768px-1140px) -- recuo menor, mesmo valor que ".app-topbar"/".content-page" usam nesse estado (ver _sidenav.scss). */
html[data-sidenav-size='condensed'] .apontoo-barra-atalhos {
    margin-inline-start: var(--theme-sidenav-width-sm);
}

/*
 * Menu "offcanvas" (celular, menu lateral escondido) -- decisao do
 * Francismar: nessa largura de tela a faixa de atalhos some, o menu
 * lateral comum (acessivel pelo botao de hamburguer da topbar) já
 * resolve a navegacao sem competir por espaco numa tela pequena.
 */
html[data-sidenav-size='offcanvas'] .apontoo-barra-atalhos {
    display: none;
}