:root {
    --bs-primary: #2C5F8A;
    --bs-primary-rgb: 44, 95, 138;
    --bs-font-sans-serif: 'Inter', sans-serif;
    --bs-border-radius: 0.5rem;
}

body {
    background-color: #f8f9fa;
}

.sidebar {
    min-height: calc(100vh - 56px);
    background-color: #1e3a5f;
}

/* Offcanvas mobile: herda cores da sidebar mas sem o min-height fixo */
.offcanvas.sidebar {
    min-height: unset;
    background-color: #1e3a5f;
}

.sidebar .nav-link {
    color: rgba(255,255,255,0.75);
    padding: 0.65rem 1rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
    border-radius: var(--bs-border-radius);
}

.sidebar .nav-link .bi {
    width: 1.25em;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.card-saldo {
    border-left: 4px solid var(--bs-primary);
}

.card-saldo.realizado {
    border-left-color: #198754;
}

.card-saldo.projetado {
    border-left-color: #0d6efd;
}

.card-saldo.obrigacoes {
    border-left-color: #dc3545;
}

.card-saldo.recebimentos {
    border-left-color: #198754;
}

.badge-alerta-atrasado {
    font-size: 0.875rem;
    cursor: pointer;
}

.badge-alerta-vencendo {
    font-size: 0.875rem;
    cursor: pointer;
}

.table-responsive thead th {
    white-space: nowrap;
}

/* Bootstrap 5 aplica --bs-table-bg nas células, sobrepondo o background do thead.
   Esta regra garante que bg-primary text-white funcione em cabeçalhos de tabela. */
thead.bg-primary th {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Sub-tabela de parcelas: bordas suaves derivadas da cor primária */
.parcelas-detalhe table td {
    border-bottom-color: rgba(44, 95, 138, 0.18) !important;
}

/* Linhas ímpares: azul muito claro */
.parcelas-detalhe table tbody tr[class*="parcela-foco-"]:nth-child(odd) td {
    background-color: #eaf3fb;
}

/* Linhas pares: azul um tom acima */
.parcelas-detalhe table tbody tr[class*="parcela-foco-"]:nth-child(even) td {
    background-color: #d2e7f6;
}

/* EM FOCO: esmaece parcelas fora do status selecionado */
form.foco-ativo tr[class*="parcela-foco-"] {
    opacity: 0.12 !important;
    filter: grayscale(80%) !important;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
form.foco-ativo tr.em-foco {
    opacity: 1 !important;
    filter: none !important;
}

/* h:messages renderiza <ul class="alert"><li class="alert-*">
   O Bootstrap precisa de alert + alert-* no mesmo elemento.
   Aqui o <ul> vira container neutro e cada <li> fica como alert box. */
ul.alert {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    background: none !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
}

ul.alert > li {
    display: block;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid transparent;
    font-size: 0.9rem;
}

ul.alert > li.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

ul.alert > li.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

ul.alert > li.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

ul.alert > li.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* nav-tabs — linha e aba ativa na cor primária do sistema.
   Sobrescreve as variáveis CSS do Bootstrap para evitar conflito de
   especificidade com btn-link (que força background: transparent). */
.nav-tabs {
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-color: var(--bs-primary);
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: var(--bs-primary);
    --bs-nav-tabs-link-active-border-color: var(--bs-primary) var(--bs-primary) var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

.nav-tabs .nav-link {
    margin-bottom: -2px;
    color: var(--bs-primary);
    border-color: transparent;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: rgba(44, 95, 138, 0.25) rgba(44, 95, 138, 0.25) transparent;
    background-color: rgba(44, 95, 138, 0.06);
    color: var(--bs-primary);
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

.mf-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #1E90FF;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    cursor: help;
    margin-left: 0.3rem;
    vertical-align: middle;
    user-select: none;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
.mf-info:hover, .mf-info:focus {
    background-color: #1268cc;
    outline: none;
}

/* Agenda de Pendências — indicação visual de urgência */
.agenda-atrasada td { background-color: #f3c5c5; border-color: #f87171 !important; }
.agenda-urgente  td { background-color: #f5e2a2; border-color: #fbb90c !important; }

/* Patches da legenda: mesmos background-colors das linhas + borda para visibilidade */
.agenda-legenda-atrasada,
.agenda-legenda-urgente {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
    vertical-align: middle;
}
.agenda-legenda-atrasada { background-color: #f3c5c5; border: 1px solid #f87171 !important; }
.agenda-legenda-urgente  { background-color: #f5e2a2; border: 1px solid #fbb90c !important; }

/* Linha de totalização do rodapé — Bootstrap 5 aplica --bs-table-bg diretamente
   nas células, por isso o !important é necessário (mesma razão da regra do thead). */
.agenda-tfoot-total td { background-color: #e2e3e5 !important; }