:root {
    --brand-green: #276955;
    --brand-green-rgb: 39, 105, 85;
    --brand-green-dark: #1c4d3f;
    --brand-gold: #fac463;
    --brand-gold-rgb: 250, 196, 99;
}

/* Deixa o conteudo textual de todas as tabelas com o mesmo tamanho de <small> (.875em),
   independente de a celula usar a tag <small> explicitamente ou nao (algumas ja usavam,
   a maioria nao, gerando inconsistencia de tamanho entre tabelas/colunas). Th mantido no
   tamanho normal para preservar a hierarquia visual do cabecalho. */
.table td {
    font-size: .875em;
}

/* Badge do Bootstrap usa font-size: .75em relativo ao pai, entao dentro de uma <td>
   (.875em acima) ele encolhia em dobro (~.66em) e ficava ilegivel. Fixando em rem
   o badge fica com o mesmo tamanho dentro ou fora de tabelas. */
.table td .badge {
    font-size: .75rem;
}

/* Paineis de filtro/formularios rapidos (~17 telas, todas usando "card p-3 shadow-sm"):
   acento a esquerda na cor da marca e sombra mais suave, para dar identidade visual clara
   de "painel de controle" sem exigir alteracoes de markup em cada tela. */
.card.p-3.shadow-sm {
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--brand-green);
    border-radius: .5rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

/* Barra de resumo da selecao em listagens com checkbox (ex.: movement/list.html): mesmo
   acento verde a esquerda dos paineis de controle, com metricas lado a lado em vez do
   grid com coluna vazia usado antes. */
.selection-summary {
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--brand-green);
    border-radius: .5rem;
    background-color: #fff;
}

.selection-summary-metric {
    min-width: 11rem;
}

/* Melhorias gerais de UX para as listagens (~47 telas com tabela dentro de .table-responsive,
   nao afeta as tabelas curtas de detalhe/chave-valor que ficam fora desse wrapper):
   cabecalho fixo ao rolar, respiro extra nas celulas, numeros alinhados e hover na cor da marca. */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

.table td,
.table th {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.table td.text-end {
    font-variant-numeric: tabular-nums;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--brand-green-rgb), .06);
}

/* UX moderno de listagens: remove o zebra-striping (fundo alternado do table-striped),
   que competia visualmente com os badges de status coloridos, mantendo apenas as
   divisorias finas entre linhas ja nativas do .table do Bootstrap, mais o hover acima.
   Neutralizado via variavel CSS em vez de remover a classe table-striped de cada
   template, para nao exigir alteracao de markup. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}

/* Botao de acoes por linha (menu "..."), ex.: movement/list.html */
.btn-light:has(.bi-three-dots-vertical):hover,
.btn-light:has(.bi-three-dots-vertical):focus {
    background-color: rgba(var(--brand-green-rgb), .12);
    color: var(--brand-green);
}

td .status {
    text-align: left;
}

div .fragment {
    margin-bottom: 30px;
}

select[readonly] {
  background: #eee; /*Simular campo inativo - Sugestão @GabrielRodrigues*/
  pointer-events: none;
  touch-action: none;
}

input[readonly] {
  background: #eee; /*Simular campo inativo - Sugestão @GabrielRodrigues*/
  pointer-events: none;
  touch-action: none;
}

.btn-xs {
    padding: 2px 5px;
    font-size: 12px;
}

.date-container {
   display: flex;
   gap: 10px; /* Espaçamento entre os boxes */
   background: white;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 100%; /* 100% da largura da tela */
}

.date-box {
   display: flex;
   flex-direction: column;
   width: 50%; /* Cada box ocupa 50% da tela */
}

.hover-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.hover-card:hover {
    transform: translateY(-5px); /* levanta o card */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* sombra mais forte */
}

.app-layout {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.app-main-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.app-sidebar {
    width: 260px;
    background-color: #fff;
}

@media (min-width: 992px) {
    .app-sidebar {
        border-right: 1px solid #dee2e6;
        flex: 0 0 260px;
    }

    .app-layout.sidebar-collapsed .app-sidebar {
        display: none;
    }
}

.app-sidebar .offcanvas-header {
    border-bottom: 1px solid #dee2e6;
}

.app-header {
    border-bottom: 3px solid var(--brand-gold);
}

/* Botao "Filtrar" (bi-funnel), identificado pelo icone, sem alterar os demais
   btn-primary do app (ex.: acoes de confirmacao em modais). */
.btn-primary:has(.bi-funnel) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.bi-funnel):hover,
.btn-primary:has(.bi-funnel):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Qualquer botao de acao na linha do titulo da pagina (ao lado do h1), independente do
   icone: "Criar novo X", links para telas relacionadas (ex.: Arquivos de Obrigacao), etc. */
main div:has(> h1.flex-grow-1) .btn-primary,
main div:has(> h1.flex-grow-1) .btn-success {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

main div:has(> h1.flex-grow-1) .btn-primary:hover,
main div:has(> h1.flex-grow-1) .btn-primary:focus,
main div:has(> h1.flex-grow-1) .btn-success:hover,
main div:has(> h1.flex-grow-1) .btn-success:focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botoes "Exportar" (fa-file-export), sem alterar os demais btn-success do app
   (ex.: desbloquear conta, aprovar em lote, disparar job). */
.btn-success:has(.fa-file-export) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-success:has(.fa-file-export):hover,
.btn-success:has(.fa-file-export):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botao "Atualizar Saldos" (bi-arrow-repeat), sem alterar o mesmo icone usado em
   dropdown-item (ex.: reprocessar boleto). */
.btn-primary:has(.bi-arrow-repeat) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.bi-arrow-repeat):hover,
.btn-primary:has(.bi-arrow-repeat):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botao "Importar Movimentacoes e Conciliar" (bi-cloud-download-fill): acao principal da
   tela de Jobs, preenchida em verde da marca para se destacar da acao secundaria abaixo. */
.btn-success:has(.bi-cloud-download-fill) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-success:has(.bi-cloud-download-fill):hover,
.btn-success:has(.bi-cloud-download-fill):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botao "Somente Conciliar": acao secundaria/mais restrita, em outline para nao competir
   visualmente com a acao principal (btn-outline-success nao e usado em mais nenhum lugar). */
.btn-outline-success {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

/* Botoes "Criar X" (bi-plus-circle-fill, fragments/icons::add()) e "Editar" (bi-pencil-square,
   fragments/icons::edit()) fora da linha de titulo, ex.: fragments/accountHolder/*.
   Confirmado: ambos os icones so aparecem em .btn-primary em todo o app, sem colisao. */
.btn-primary:has(.bi-plus-circle-fill),
.btn-primary:has(.bi-pencil-square) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.bi-plus-circle-fill):hover,
.btn-primary:has(.bi-plus-circle-fill):focus,
.btn-primary:has(.bi-pencil-square):hover,
.btn-primary:has(.bi-pencil-square):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botoes "Salvar" dos formularios de add/edit (~39 telas). Eram <input type="submit">
   sem icone (input nao aceita filhos e nao suporta ::before em nenhum navegador, por ser
   elemento substituido), convertidos para <button> equivalente com icone de check.
   Restrito a "main" para nao alcancar telas de login/forgot/reset, que sao standalone
   fora do layout principal. */
.btn-primary:has(.bi-check-lg) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.bi-check-lg):hover,
.btn-primary:has(.bi-check-lg):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botao "Enviar E-mail" (accountHolderBalanceHistory/list.html, icone bi-envelope-fill). */
.btn-primary:has(.bi-envelope-fill) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.bi-envelope-fill):hover,
.btn-primary:has(.bi-envelope-fill):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Acao "Excluir" dentro de menus dropdown (icone bi-trash-fill, fragments/icons::delete()):
   texto em vermelho para sinalizar acao destrutiva, igual aos botoes "Excluir" avulsos
   (que usam .btn-danger em vez de brand green - delete nao deve parecer uma acao positiva). */
.dropdown-item:has(.bi-trash-fill) {
    color: #dc3545;
}

.dropdown-item:has(.bi-trash-fill):hover,
.dropdown-item:has(.bi-trash-fill):focus {
    color: #fff;
    background-color: #dc3545;
}

/* Botao "Opcoes" (dropdown de acoes na tela de detalhe de Conta, icone fa-bars) e botoes
   "Transferir para..." (icone fa-money-bill-transfer, mesmo icone do fragments/icons::movements()). */
.btn-primary:has(.fa-bars),
.btn-primary:has(.fa-money-bill-transfer) {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:has(.fa-bars):hover,
.btn-primary:has(.fa-bars):focus,
.btn-primary:has(.fa-money-bill-transfer):hover,
.btn-primary:has(.fa-money-bill-transfer):focus {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Botoes "Voltar" (links de navegacao sem icone proprio, ex.: [[#{obligation.add.back}]]):
   estilo "outline" em vez de preenchido, para nao competir visualmente com a acao primaria
   da tela; icone de seta gerado via ::before (nao exige alterar as ~56 telas que os usam).
   :not(:has(i)) exclui os poucos casos de link com icone proprio (ex.: "Usuarios"). */
a.btn.btn-secondary:not(:has(i)) {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background-color: transparent;
    color: var(--brand-green);
    border-color: var(--brand-green);
}

a.btn.btn-secondary:not(:has(i))::before {
    font-family: "bootstrap-icons" !important;
    content: "\f12f";
    font-size: .9em;
    line-height: 1;
}

a.btn.btn-secondary:not(:has(i)):hover,
a.btn.btn-secondary:not(:has(i)):focus {
    background-color: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}

/* Mensagem de "lista vazia" (ex.: [[#{account.list.empty}]]), aplicada nas ~45 telas
   que seguem o padrao <div th:if="${x.empty}">[[#{y.list.empty}]]</div>. */
.empty-state {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.empty-state::before {
    font-family: "bootstrap-icons" !important;
    content: "\f52a";
    font-size: 1.1em;
    color: #adb5bd;
}

/* Titulo de pagina: barra de destaque a esquerda (gradiente dourado -> verde da marca) em vez
   de uma linha inferior, que ficava larga/solta demais ao lado de botoes de acao ou sozinha. */
main h1 {
    position: relative;
    padding-left: 1rem;
    font-weight: 700;
    color: #212529;
}

main h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--brand-gold), var(--brand-green));
}

main div:has(> h1.flex-grow-1) {
    align-items: center;
}

.app-toggle-btn {
    color: var(--brand-green);
    border-color: rgba(var(--brand-green-rgb), .35);
}

.app-toggle-btn:hover,
.app-toggle-btn:focus {
    color: #fff;
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.app-sidebar-brand {
    padding: 0 .5rem;
}

.app-sidebar .nav-link.sidebar-link {
    color: #495057;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-sidebar .nav-link.sidebar-link:hover {
    background-color: rgba(var(--brand-green-rgb), .07);
}

.app-sidebar .nav-link.sidebar-link.active {
    background-color: rgba(var(--brand-green-rgb), .12);
    color: var(--brand-green);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--brand-gold);
}

.app-sidebar .sidebar-heading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #adb5bd;
    letter-spacing: .05em;
    margin: 1rem 0 .25rem .75rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid rgba(var(--brand-gold-rgb), .5);
}

.stat-tile {
    border: 1px solid #e9ecef;
    border-left: 4px solid transparent;
    border-radius: .5rem;
}

.stat-tile-good {
    border-left-color: var(--brand-green);
}

.stat-tile-critical {
    border-left-color: #dc3545;
}

.stat-tile-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .75rem;
}

.stat-tile-label {
    font-size: .875rem;
    color: #495057;
    margin-bottom: .125rem;
}

.stat-tile-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #212529;
}

.stat-tile-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .625rem;
    border-radius: 999px;
    white-space: nowrap;
}

.stat-tile-good .stat-tile-badge {
    color: var(--brand-green-dark);
    background-color: rgba(var(--brand-green-rgb), .12);
}

.stat-tile-critical .stat-tile-badge {
    color: #842029;
    background-color: #f8d7da;
}

.pagination .page-link {
    color: var(--brand-green);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--brand-green-dark);
    background-color: rgba(var(--brand-green-rgb), .08);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
}

/* Abas (nav-tabs), ex.: fragments/accountHolder/accountHolder_tab.html. Indicador de aba
   ativa via box-shadow (nao mexe no sistema de bordas do Bootstrap para .nav-tabs/.active). */
.nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    color: #495057;
}

.nav-tabs .nav-link:hover:not(.disabled):not(.active) {
    color: var(--brand-green);
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: var(--brand-green);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--brand-green);
}

/* cria um “dot” consistente e alinhamento pendente (hanging indent) */
.bp-dot { padding-left: 0; margin: 0; }
.bp-dot li {
    position: relative; padding-left: 1rem; margin: .25rem 0;
    text-indent: 0;                 /* garante alinhamento das linhas seguintes */
}
.bp-dot li::before {
    content: "";
    position: absolute; left: 0; top: .58em;
    width: .35rem; height: .35rem; border-radius: 50%;
    background: #6c757d;            /* cinza Bootstrap */
}