/* =========================================
   CITY CHURCH | ACADEMIA BACKSITE
   IDENTIDADE VISUAL 2026

   BASE: ACADEMIA LETICIA VESCOVI

   PRETO + BRANCO + TERRACOTA
========================================= */


/* =========================================
   01. VARIAVEIS DA IDENTIDADE
========================================= */

:root {
    --city-preto: #101010;
    --city-preto-hover: #202020;

    --city-branco: #FFFFFF;
    --city-offwhite: #F8F5F0;

    --city-terracota: #B98C73;
    --city-terracota-hover: #986D56;

    --city-borda: #DCC8B9;
}


/* =========================================
   02. LOGIN - BOTAO ENTRAR
========================================= */

.auth form .auth-form-btn {
    background-color: var(--city-terracota) !important;
    border-color: var(--city-terracota) !important;
    color: var(--city-preto) !important;
    font-weight: 600;
    transition: all .25s ease;
}

.auth form .auth-form-btn:hover {
    background-color: var(--city-terracota-hover) !important;
    border-color: var(--city-terracota-hover) !important;
    color: var(--city-branco) !important;
}


/* =========================================
   03. MENU SUPERIOR
========================================= */

.navbar .navbar-menu-wrapper,
.navbar .navbar-brand-wrapper {
    background-color: var(--city-preto) !important;
}

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item .nav-link {
    color: var(--city-branco) !important;
}

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item .nav-link:hover {
    color: var(--city-terracota) !important;
}

.dropdown .dropdown-toggle:after {
    color: var(--city-terracota) !important;
}


/* =========================================
   04. BOTOES DE LOGIN E CADASTRO
========================================= */

/* BOTAO ENTRAR */

#guest-login-button {
    color: var(--city-branco) !important;
    border-color: var(--city-terracota) !important;
    background-color: transparent !important;
}

#guest-login-button:hover {
    background-color: var(--city-branco) !important;
    border-color: var(--city-branco) !important;
    color: var(--city-preto) !important;
}


/* BOTAO CADASTRAR */

a#guest-register-button {
    background-color: var(--city-terracota) !important;
    border-color: var(--city-terracota) !important;
    color: var(--city-preto) !important;
    font-weight: 600;
}

a#guest-register-button:hover {
    background-color: var(--city-terracota-hover) !important;
    border-color: var(--city-terracota-hover) !important;
    color: var(--city-branco) !important;
}


/* =========================================
   05. PERFIL DO USUARIO
========================================= */

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item.nav-profile
.nav-link .nav-profile-text p {
    color: var(--city-branco) !important;
}


/* =========================================
   06. FUNDO PRINCIPAL DA ACADEMIA
========================================= */

.bg-backsite {
    background-color: var(--city-preto) !important;
}


/* =========================================
   07. MENU LATERAL
========================================= */

.sidebar {
    background-color: var(--city-preto) !important;
}

.sidebar .nav .nav-item.nav-category {
    color: var(--city-terracota) !important;
}

.sidebar .nav .nav-item .nav-link .menu-title {
    color: var(--city-branco) !important;
    transition: color .25s ease;
}

.sidebar .nav .nav-item .nav-link:hover .menu-title {
    color: var(--city-terracota) !important;
}


/* =========================================
   08. SUBMENUS
========================================= */

.sidebar .nav.sub-menu .nav-item .nav-link {
    color: var(--city-branco) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: var(--city-terracota) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: var(--city-terracota) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar .nav.sub-menu .nav-item
.nav-link.active:before {
    color: var(--city-terracota) !important;
}


/* =========================================
   09. ITEM ATIVO NO MENU
========================================= */

.sidebar .nav .nav-item.active > .nav-link:before {
    background-color: var(--city-terracota) !important;
}

.sidebar .nav .nav-item.active
> .nav-link .menu-title {
    color: var(--city-terracota) !important;
}


/* =========================================
   10. ICONES DO MENU
========================================= */

.sidebar .nav .nav-item .nav-link .mdi:before,
.navbar .mdi:before {
    color: var(--city-terracota) !important;
}

.sidebar .nav .nav-item .nav-link .icon-bg {
    background-color: var(--city-preto-hover) !important;
}

.sidebar .nav .nav-item .nav-link
i.menu-arrow:before {
    color: var(--city-branco) !important;
}


/* =========================================
   11. AREAS AUXILIARES
========================================= */

/* Limitado aos elementos de navegacao
   para evitar alterar componentes
   que tambem utilizam a classe p-0. */

.navbar .p-0,
.sidebar .p-0 {
    background-color: var(--city-preto) !important;
}


/* =========================================
   12. MENU RECOLHIDO
========================================= */

.sidebar-icon-only .sidebar .nav .nav-item
.hover-open .nav-link .menu-title {
    background-color: var(--city-preto) !important;
    color: var(--city-branco) !important;
}

.sidebar-icon-only .sidebar .nav .nav-item
.hover-open .collapse,
.sidebar-icon-only .sidebar .nav .nav-item
.hover-open .collapsing {
    background-color: var(--city-preto) !important;
}


/* =========================================
   13. DROPDOWN DO MENU SUPERIOR
========================================= */

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item.dropdown
.dropdown-menu.navbar-dropdown {
    background-color: var(--city-branco) !important;
}

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item.dropdown
.dropdown-menu.navbar-dropdown .dropdown-item {
    color: var(--city-preto) !important;
}

.navbar .navbar-menu-wrapper
.navbar-nav .nav-item.dropdown
.dropdown-menu.navbar-dropdown .dropdown-item:hover {
    background-color: var(--city-offwhite) !important;
    color: var(--city-terracota-hover) !important;
}


/* =========================================
   14. TEXTOS NAS AREAS ESCURAS
========================================= */

.navbar .text-dark,
.sidebar .text-dark {
    color: var(--city-branco) !important;
}


/* =========================================
   15. LOGOTIPO MINIATURA
========================================= */

/* Mantem o comportamento do
   codigo original da Leticia.

   O logotipo principal deve ser
   cadastrado na plataforma. */

img.logo-mini-img {
    display: none !important;
}


/* =========================================
   16. MODAIS
========================================= */

.modal-body .text-dark {
    color: var(--city-preto) !important;
}


/* =========================================
   17. AJUSTES DE RESPONSIVIDADE
========================================= */

@media (max-width: 991px) {

    .navbar .navbar-brand-wrapper,
    .navbar .navbar-menu-wrapper {
        background-color: var(--city-preto) !important;
    }

    .sidebar {
        background-color: var(--city-preto) !important;
    }

    .sidebar .nav .nav-item .nav-link .menu-title {
        color: var(--city-branco) !important;
    }

}


/* =========================================
   18. ACESSIBILIDADE
========================================= */

@media (prefers-reduced-motion: reduce) {

    .auth form .auth-form-btn,
    .sidebar .nav .nav-item .nav-link .menu-title {
        transition: none !important;
    }

}