/* Estilos do Fluxo de Caixa (complementa o Bootstrap 5) */
:root {
    --marca: #1f4e79;
    --marca-escura: #163a5a;
    --menu-largura: 240px;
}

.bg-marca { background-color: var(--marca); }
.text-marca { color: var(--marca); }
.btn-marca { --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--marca-escura); --bs-btn-hover-border-color: var(--marca-escura); --bs-btn-hover-color: #fff; }

body { background: #f5f7fa; }
.fundo-login { background: linear-gradient(160deg, #eef3f8 0%, #dfe8f2 100%); min-height: 100vh; }

/* Menu lateral */
.menu-lateral { background: #fff; }
@media (min-width: 992px) {
    .menu-lateral { width: var(--menu-largura); flex-shrink: 0; min-height: calc(100vh - 56px); position: sticky; top: 56px; align-self: flex-start; }
}
.menu-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a94a6; padding: .9rem 1.25rem .3rem; }
.menu-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 1.25rem; color: #334155; text-decoration: none; border-left: 3px solid transparent; }
.menu-item:hover { background: #f1f5f9; color: var(--marca); }
.menu-item.active { background: #e8f0f8; color: var(--marca); border-left-color: var(--marca); font-weight: 600; }
.menu-item .bi { font-size: 1.05rem; }

.conteudo { min-width: 0; }

/* Cabeçalho das páginas */
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.cabecalho-pagina h1 { font-size: 1.4rem; margin: 0; }

.card { border: 1px solid #e3e8ef; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.table > :not(caption) > * > * { padding: .55rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 600; background: #f8fafc; }
.valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor-negativo { color: #b42318; }

/* Árvore do plano de contas */
.nivel-1 { padding-left: 1.75rem !important; }
.nivel-2 { padding-left: 3.25rem !important; }
.linha-sintetica td { font-weight: 600; background: #f8fafc; }

/* Matriz de permissões */
.matriz-permissoes td:first-child { min-width: 260px; }

/* Auditoria: JSON legível */
.json-auditoria { font-size: .78rem; max-width: 420px; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* Formulários estreitos (sem style inline por causa da CSP) */
.largura-form { max-width: 520px; }
.largura-form-lg { max-width: 860px; }

/* Etapa 3B: grades de lançamento */
.largura-horas { width: 120px; }
.largura-valor { width: 150px; }
.grade-meses input { min-width: 110px; }

/* Etapa 4: grades de fluxo de caixa */
.tabela-fluxo { font-size: .82rem; }
.tabela-fluxo th, .tabela-fluxo td { white-space: nowrap; }
.tabela-fluxo th:first-child, .tabela-fluxo td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; }
.tabela-fluxo thead th:first-child { background: #f8fafc; }
.tabela-fluxo .linha-secao td { background: #f1f5f9; font-weight: 600; }
.tabela-fluxo .linha-total td { font-weight: 600; border-top: 1px solid #cbd5e1; }
.tabela-fluxo .linha-saldo td { font-weight: 700; background: #f8fafc; }
.tabela-fluxo .prevista { background-color: #f5f9ff; font-style: italic; }
.tabela-fluxo .linha-secao td.prevista, .tabela-fluxo .linha-saldo td.prevista { background-color: #e8f0fb; }
.tabela-fluxo .categoria { padding-left: 1.5rem !important; }
.legenda-previsto { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; background: #e8f0fb; border: 1px solid #c7d7ee; border-radius: 3px; }
.grafico { position: relative; height: 280px; }
.grafico-baixo { position: relative; height: 240px; }
.detalhe-dia td { background: #fafbfc; font-size: .8rem; }
.grade-cenario input { min-width: 92px; font-size: .8rem; padding: .2rem .35rem; text-align: right; }
/* filtros no cabeçalho ficam lado a lado (o Bootstrap estica os campos a 100%) */
.cabecalho-pagina form .form-select, .cabecalho-pagina form .form-control { width: auto; max-width: 100%; }
.cabecalho-pagina > form { max-width: 100%; min-width: 0; }
@media (max-width: 575.98px) {
    .cabecalho-pagina form .form-select, .cabecalho-pagina form .form-control { width: 100%; }
    .tabela-fluxo th:first-child, .tabela-fluxo td:first-child { min-width: 150px; white-space: normal; }
}