/* Identidade ÁgapeCore: paleta e tipografia do painel de diretrizes da marca */
:root {
    --agape-marinho: #092D4C;
    --agape-azul: #326696;
    --agape-azul-claro: #639ACC;
    --agape-dourado: #D8B572;
    --agape-fundo: #F4F6F9;

    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
    --bs-body-color: #1d2b3a;
    --bs-primary: var(--agape-azul);
    --bs-primary-rgb: 50, 102, 150;
    --bs-link-color-rgb: 50, 102, 150;
    --bs-link-hover-color-rgb: 9, 45, 76;
}

/* fundo só no body: --bs-body-bg também pinta cards e campos, que devem ficar brancos */
body { background: var(--agape-fundo); }

h1, h2, h3, .h1, .h2, .h3 { color: var(--agape-marinho); font-weight: 700; }

.btn-primary {
    --bs-btn-bg: var(--agape-marinho);
    --bs-btn-border-color: var(--agape-marinho);
    --bs-btn-hover-bg: var(--agape-azul);
    --bs-btn-hover-border-color: var(--agape-azul);
    --bs-btn-active-bg: var(--agape-azul);
    --bs-btn-active-border-color: var(--agape-azul);
    --bs-btn-disabled-bg: var(--agape-marinho);
    --bs-btn-disabled-border-color: var(--agape-marinho);
}
.btn-outline-primary {
    --bs-btn-color: var(--agape-marinho);
    --bs-btn-border-color: var(--agape-marinho);
    --bs-btn-hover-bg: var(--agape-marinho);
    --bs-btn-hover-border-color: var(--agape-marinho);
    --bs-btn-active-bg: var(--agape-marinho);
    --bs-btn-active-border-color: var(--agape-marinho);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--agape-azul-claro);
    box-shadow: 0 0 0 .2rem rgba(99, 154, 204, .3);
}
.form-check-input:checked { background-color: var(--agape-marinho); border-color: var(--agape-marinho); }
.page-link { color: var(--agape-marinho); }
.active > .page-link { background-color: var(--agape-marinho); border-color: var(--agape-marinho); }

.card { border: 0; border-radius: .75rem; box-shadow: 0 1px 3px rgba(9, 45, 76, .08); }
.table > thead th {
    color: var(--agape-azul);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Menu lateral */
/* background-image porque o .offcanvas-lg do Bootstrap força background-color transparente no desktop */
.menu {
    --bs-offcanvas-width: 250px;
    background-image: linear-gradient(var(--agape-marinho), var(--agape-marinho));
    width: 250px;
}
.menu-marca img { height: 38px; }
.menu-marca span { color: #fff; font-size: 1.25rem; font-weight: 700; }
.menu-marca em { color: var(--agape-dourado); font-style: normal; }
.menu-igreja { color: var(--agape-azul-claro); font-size: .8rem; }
.menu .nav-link {
    color: rgba(255, 255, 255, .75);
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: .65rem 1.25rem;
}
.menu .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.menu .nav-link.active {
    color: var(--agape-dourado);
    border-left-color: var(--agape-dourado);
    background: rgba(255, 255, 255, .06);
    font-weight: 600;
}
.menu .btn-sair { color: rgba(255, 255, 255, .6); }
.menu .btn-sair:hover { color: #fff; }

@media (min-width: 992px) {
    .menu { position: fixed; inset: 0 auto 0 0; }
    .conteudo { margin-left: 250px; }
}

.indicador-icone {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(216, 181, 114, .2); color: #9a7630; font-size: 1.3rem;
}
.indicador-valor { color: var(--agape-marinho); font-size: 1.75rem; font-weight: 700; line-height: 1; }

/* Login */
.login { min-height: 100vh; background: linear-gradient(160deg, var(--agape-marinho), #0d3b63); }
.login .card { max-width: 400px; }
.login-logo img { height: 64px; }
.login-logo span { color: #fff; font-size: 2.25rem; font-weight: 700; letter-spacing: -.01em; }
.login-logo em { color: var(--agape-dourado); font-style: normal; }
.login-rodape, .login-rodape a { color: rgba(255, 255, 255, .8); }
.login-rodape a { color: var(--agape-dourado); font-weight: 600; }

.btn-dourado {
    --bs-btn-color: var(--agape-marinho);
    --bs-btn-bg: var(--agape-dourado);
    --bs-btn-border-color: var(--agape-dourado);
    --bs-btn-hover-color: var(--agape-marinho);
    --bs-btn-hover-bg: #e4c68c;
    --bs-btn-hover-border-color: #e4c68c;
    --bs-btn-active-color: var(--agape-marinho);
    --bs-btn-active-bg: #e4c68c;
    --bs-btn-active-border-color: #e4c68c;
    font-weight: 600;
}