/* Complementos ao Bootstrap — só o que ele não resolve sozinho. */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body { padding-bottom: 1rem; } }

.nav-inferior {
    position: fixed; inset: auto 0 0 0; z-index: 1030;
    display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: .5rem 0; font-size: .75rem; text-decoration: none; color: var(--bs-secondary-color);
}
.nav-inferior a i { font-size: 1.35rem; }
.nav-inferior a.active, .navbar .nav-link.active { color: var(--bs-primary); font-weight: 600; }

.valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-paga .nome-conta { text-decoration: line-through; opacity: .7; }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

/* Visão anual: 1ª coluna fixa ao rolar para o lado */
.grade { font-size: .85rem; }
.grade th:first-child, .grade td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--bs-body-bg); min-width: 9rem;
}
.grade thead th { position: sticky; top: 0; z-index: 3; }
.grade thead th:first-child { z-index: 4; }
.grade td.celula { cursor: pointer; text-align: right; }
.grade td.celula:hover { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.grade td.celula.paga { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.grade tr.grupo td { background: var(--bs-tertiary-bg); font-weight: 600; }
.tabela-rolagem { max-height: 75vh; }