/* Área de toque mínima de 44px: a usuária real acessa pelo celular. */
.btn,
.form-control,
.form-select {
    min-height: 44px;
}

/* Botão só com ícone (ex.: as setas "‹"/"›" de navegação de dia/semana):
   min-height já garante os 44px de altura, mas um caractere sozinho não
   preenche os 44px de LARGURA só com o padding padrão do Bootstrap
   (ficava com uns 30px) — min-width fecha o quadrado de toque. */
.btn-icone {
    min-width: 44px;
}

.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   Identidade visual — "Sessão"

   Sobrescreve as variáveis CSS do Bootstrap 5.3 em vez de trocar classes
   nos templates: os componentes continuam sendo .btn-primary, .bg-primary
   etc., só a cor por trás muda. Duas camadas são necessárias:

   1) --bs-primary / --bs-primary-rgb no :root — cobre as classes utilitárias
      que já leem essas variáveis (.bg-primary, .text-primary, .border-primary,
      links).
   2) Várias classes de componente (.btn-primary, .btn-outline-primary, os
      estados :focus de formulário, o checkbox marcado, a barra de progresso)
      vêm do Bootstrap com a cor #0d6efd "cravada" em variáveis PRÓPRIAS de
      cada componente (--bs-btn-bg e afins), não em var(--bs-primary) — essas
      precisam ser sobrescritas uma a uma, feito abaixo.

   Não redefinimos as variáveis "-subtle"/"-text-emphasis" de --bs-primary
   nem as cores semânticas (sucesso/erro/aviso): nenhuma tela usa essas
   variantes hoje, e as cores semânticas continuam comunicando estado, não
   marca (pedido explícito do TCC).
   ========================================================================== */
:root {
    --bs-primary: #0f6b5f;
    --bs-primary-rgb: 15, 107, 95;
    --sessao-primary-hover: #0a544a;
    --sessao-primary-hover-rgb: 10, 84, 74;

    --bs-body-bg: #f6f8f7;
    --bs-body-color: #16211f;

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--sessao-primary-hover);
    --bs-link-hover-color-rgb: var(--sessao-primary-hover-rgb);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--sessao-primary-hover);
    --bs-btn-hover-border-color: var(--sessao-primary-hover);
    --bs-btn-active-bg: var(--sessao-primary-hover);
    --bs-btn-active-border-color: var(--sessao-primary-hover);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-link {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sessao-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

/* Largura confortável de leitura em telas grandes: o Bootstrap já limita
   .container a até 1320px por padrão, mas nosso conteúdo (formulários e
   listas estreitas) fica mais legível com um teto menor. Abaixo de 960px
   o container continua 100% da largura disponível — não afeta o celular. */
main.container {
    max-width: 960px;
}

/* Saldo: vermelho "deve" / verde "em haver" precisam continuar
   claramente distintos do verde-azulado da marca (--bs-primary). O tom de
   "em haver" foi ajustado para um verde mais puro (menos azulado) do que
   a cor da marca, para não ficarem parecidos a um olhar rápido no celular. */
.saldo-credor {
    color: #1e7a34;
    font-weight: 600;
}

.saldo-devedor {
    color: #b02a37;
    font-weight: 600;
}

.saldo-zerado {
    color: #495057;
    font-weight: 600;
}

/* Tela de login: sem navbar (ver base.html), cartão centralizado na tela
   inteira em vez de colado no topo.

   O flex do body centraliza o seu ÚNICO filho, o <main class="container">
   — não o cartão. O <main> tem a largura do container (até 960px, ver
   main.container acima), e o cartão (400px) ficava encostado na esquerda
   DENTRO dele: em 1920px, 268px à esquerda do centro. Por isso o cartão
   precisa se centralizar sozinho dentro do <main> (margin-inline: auto),
   e o <main> desta tela não leva o pb-5 das outras (ver main_class em
   base.html) — senão o centro vertical sobe 24px. */
body.pagina-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.cartao-login {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
}

/* Barra do resumo anual (Painel): CSS puro, sem biblioteca de gráficos —
   o sistema precisa funcionar offline na apresentação. Uma cor só (a
   primária), largura proporcional ao maior mês do ano (calculada no
   servidor, ver resumo_ano() em views.py). */
.barra-mes {
    background-color: var(--bs-tertiary-bg, #e9ecef);
    border-radius: .25rem;
    height: 1rem;
    overflow: hidden;
}

.barra-mes-preenchida {
    background-color: var(--bs-primary);
    height: 100%;
}