/* complemento.css — o que o bundle do legado NÃO cobre, e só isso.
 *
 * Substitui o `theme.css` (tema próprio "calm data-dense"), retirado quando o
 * cliente decidiu por layout idêntico ao legado. Ver
 * docs/specs/00-DECISAO-layout-identico-ao-legado.md.
 *
 * ┌─ A REGRA QUE FAZ ESTE ARQUIVO SER SEGURO ──────────────────────────────┐
 * │ Nada aqui pode redefinir elemento base nem classe do Bootstrap 3:      │
 * │ sem `body`, `a`, `.row`, `.col-*`, `.btn`, `.table`, `.panel`,         │
 * │ `.form-control`, `.input-group`. Foi exatamente essa disputa de camada │
 * │ base que quebrou a produção em `62dee67` — menu, cabeçalho e botões.   │
 * │ Só classes NOSSAS, que o `CssUniqueMin` não conhece.                   │
 * └────────────────────────────────────────────────────────────────────────┘
 *
 * Cores tiradas do próprio legado: links #337AB7 / #428BCA, linhas #E4E4E4 e
 * #DDD, realce #F5F5F5, azul da barra #225BC6.
 */

/* ------------------------------------------------------------------ Casca */

/* A região dos modais é `position:absolute; width:100%; height:100%` e, sem
 * ancestral posicionado, resolve isso contra a JANELA — um vidro invisível de
 * 1440x900 sobre a página inteira. Medido: `elementFromPoint(720, 400)` devolvia
 * essa div, ou seja, NENHUM botão, link ou campo recebia clique. Ela é
 * transparente, então o screenshot não denuncia nada.
 *
 * Não mexemos na geometria (mexer nela derruba o layout — está anotado no
 * protótipo). Só devolvemos o clique a quem está embaixo, mantendo-o para o
 * modal que por acaso seja montado ali dentro. */
.mox-modal-region { pointer-events: none; }
.mox-modal-region > * { pointer-events: auto; }

/* Marca do tenant. Na produção isto é um <style> inline gerado pela master
   page, com exatamente esta regra (conferido no DOM e replicado no protótipo). */
.mox-sidebar .navbar-brand,
.modal-header {
  background: url('../legacy/images/lojadocuteleiro-menu-60x70.png') center center no-repeat;
}

/* O "Sair" do legado é um <a> no dropdown; aqui é um <button> dentro de um
   form POST (o Django 5 recusa logout por GET). Só devolve a aparência do item
   de menu — as medidas vêm de `.dropdown-menu>li>a` do próprio bundle. */
.dropdown-menu > li > form { margin: 0; }
.btnSair {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 5px 15px 5px 25px; line-height: 20px; color: #777; white-space: nowrap;
}
.btnSair:hover { color: #262626; background-color: #F5F5F5; }
.btnSair [class*="glyphicons"] { margin-right: 5px; }

/* A busca do legado é um `<div class="input-group filtros">`; aqui é um `<form>`
 * de verdade, para funcionar sem JavaScript. Só que `.mox-header-filter form`
 * tem `margin-bottom: 25px` — e isso engordava a barra de ações em exatos 25px
 * (91 contra os 66 do protótipo, medidos lado a lado). */
.mox-header-filter form.filtros { margin-bottom: 0; }

/* --------------------------------------------------------------- Formulários */
.page-title { font-size: 18px; font-weight: bold; color: #61606B; margin: 0 0 16px; }
.field-error { font-size: 12px; color: #A94442; }
.form-help { font-size: 12px; color: #888; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 16px; }

/* ---------------------------------------------------------------- Grades */

/* `thead-fixed` promete cabeçalho fixo, e no legado quem cumpre é JavaScript:
 * `Utilitario.js` CLONA o <thead> num `thead.visible` com `position:fixed` e
 * corrige a margem e a largura de cada célula a cada rolagem e a cada resize.
 * São umas cem linhas de acerto de pixel, presas ao ciclo de vida do WebForms.
 *
 * Aqui o mesmo efeito sai de uma regra: dentro de `.content`, que agora tem
 * `max-height` e rola, `position:sticky` prega o cabeçalho sozinho. Mesmo
 * resultado visível, sem o clone — e sem as regras `thead.visible` do bundle,
 * que só valem quando aquela classe existe, e ela nunca é adicionada.
 *
 * O `box-shadow` está aqui porque `border-collapse:collapse` (do
 * `.table-bordered`) descarta a borda de célula grudada: sem ele o cabeçalho
 * fica sem a linha de baixo justamente quando passa por cima das linhas. */
.content .table.thead-fixed thead th {
  position: sticky; top: 0; z-index: 2;
  background-color: #FFF;
  box-shadow: inset 0 -1px 0 #DDD, inset 0 1px 0 #DDD;
}

.table .no-rows td { color: #888; }
/* O legado pinta valor no grid com `style` inline; estas duas classes são
   nossas, do Extrato e do Fluxo de Caixa, onde a coluna inteira tem sinal. */
.valor-c { color: #3C763D; font-weight: bold; }
.valor-d { color: #A94442; font-weight: bold; }
.subtotal td { font-weight: bold; background-color: #F5F5F5; }
.sem-borda-direita { border-right: none !important; }

/* ------------------------------------------------------------------ Cartões */
/* KPIs do Fluxo de Caixa e do Dashboard — o protótipo os reconstrói como
   `.mox-kpi`, com estas mesmas medidas. */
.mox-cards { margin-bottom: 4px; }
.mox-card {
  border: 1px solid #DDD; background: #FFF; padding: 14px 16px; margin-bottom: 20px;
}
.mox-card .card-label {
  display: block; font-size: 11px; color: #888; text-transform: uppercase;
}
.mox-card .card-value { display: block; font-size: 22px; font-weight: bold; margin-top: 4px; }
.mox-card.destaque .card-value { color: #337AB7; }

/* -------------------------------------------------------------------- Árvore */
/* Plano de Contas e Centro de Custo. Medidas iguais às do `.mox-no-*` do
   protótipo, que veio da observação da produção. */
.fieldset-tree ul, .fieldset-tree ol { list-style: none; padding: 0; margin: 0; }
.tree-row {
  padding: 6px 8px; border-bottom: 1px solid #E4E4E4;
  display: flex; align-items: center; gap: 8px;
}
.tree-row:hover { background-color: #F5F5F5; }
.tree-name { color: #333; }
.tree-name .no-nome { color: #999; font-style: italic; }
.tree-tag {
  display: inline-block; min-width: 70px; font-weight: bold; color: #337AB7;
}
.tree-actions { margin-left: auto; visibility: hidden; }
.tree-row:hover .tree-actions { visibility: visible; }
.tree-leaf { padding-left: 24px; }
.tree-empty { color: #888; padding: 18px; }
.tree-raiz-filial > .tree-row { background-color: #F5F5F5; font-weight: bold; }
.tree-inline-form { padding: 8px 8px 8px 32px; border-bottom: 1px solid #E4E4E4; }
details.tree-branch > summary { cursor: pointer; list-style: none; }
details.tree-branch > summary::-webkit-details-marker { display: none; }
details.tree-branch > summary .tree-name::before {
  content: "\25B8"; color: #428BCA; font-size: 12px; display: inline-block;
  width: 18px; transition: transform .1s;
}
details.tree-branch[open] > summary .tree-name::before { transform: rotate(90deg); }

/* --------------------------------------------------------------------- Login */
/* `login.css` do legado cobre a tela; estas são as mensagens de erro, que no
   legado vêm de um Label do ASP.NET sem classe própria. */
.login-alert { margin: 10px 0 0; }