/* Contêiner do menu */
nav.site-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Garante que o conteúdo fique centralizado verticalmente */
    background-color: #c0c0c0; /* Cor de fundo do menu */
    color: white;
    padding: 10px 20px; /* 10px 20px: Espaço interno: top right bottom left */
    position: relative;
}

/* Menu esquerdo */
.site-nav-left {
    display: flex;
    align-items: center; /* Garante que o conteúdo fique centralizado verticalmente */
}

.site-menus, .site-header-home {
    cursor: pointer;
    padding: 10px;
}

.site-menus span, .site-header-home span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.site-menus span {
    background-image: url('/img/svg/svg_menu-svgrepo-com.svg');
}

.site-header-home span {
    background-image: url('/img/svg/svg_home_white-svgrepo-com.svg');
}

/* Menu central */
.site-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center; /* Garante que o conteúdo fique centralizado verticalmente */
    justify-content: center; /* Mantém o conteúdo centralizado horizontalmente */
    flex-direction: row; /* Mantém os elementos lado a lado */
}

.site-icon-favicon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/favicon.png');
    margin-right: 10px; /* Adiciona espaçamento entre o ícone e o título */
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
    .site-nav-center {
        flex-direction: column; /* Empilha os itens no celular */
        text-align: center;
    }
}

.site-header-title {
    font-size: 20px;
    font-weight: bold;
    color: #2a7b36;
    /* color: rgb(190, 115, 51); */
}

/* Menu direito */
.site-nav-right {
    display: flex;
    align-items: center; /* Garante que o conteúdo fique centralizado verticalmente */
}

.site-header-notifications span,
.site-header-login span,
.site-header-settings span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.site-header-notifications span {
    background-image: url('/img/svg/svg_bell-svgrepo-com.svg');
}

/* Ícone quando há notificações */
.site-header-notifications.true span {
    background-image: url('/img/svg/svg_alert-urgent-svgrepo-com.svg');
}

.site-header-login span {
    background-image: url('/img/svg/svg_login-circle-svgrepo-com.svg');
}

.site-header-settings span {
    background-image: url('/img/svg/svg_settings_white-gear-svgrepo-com.svg');
}    


/* Ajuste do dropdown para alinhar à direita */
.site-user-dropdown {
    position: relative; /* Permite posicionamento absoluto dentro do dropdown */
}

/* Perfil do usuário */
.site-user-profile {
    display: flex;
    align-items: center; /* Alinha os elementos verticalmente */
    gap: 10px; /* Espaçamento entre nome e imagem */
}

.site-user-profile-name {
    font-size: 16px;
    font-weight: bold;
}

.site-user-profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Espaçamento entre os elementos */
.site-header-notifications,
.site-header-login,
.site-header-settings,
.site-user-dropdown {
    margin-right: 10px;
}

/* Remover o espaçamento extra no último elemento */
.site-user-dropdown {
    margin-right: 0;
}

.site-user-dropdown .site-user-button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Dropdown alinhado à direita */
/* background-color: #f9f9f9; */
.site-user-dropdown .site-user-dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Alinha à direita */
    background-color: #f9f9f9;
    color: black;
    min-width: 150px;
    max-width: 200px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    text-align: right;
    overflow: hidden;
}

/* Ajuste dos links do dropdown */
.site-user-dropdown .site-user-dropdown-content a {
    display: block; /* Garante que os links fiquem um abaixo do outro */
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    text-decoration: none;
    color: black;
    /* line-height: 15px; Alinhamento vertical dos links */
}

.site-user-dropdown .site-user-dropdown-content a:hover {
    background-color: lightgray;
}

/* Exibir dropdown no hover (PC) */
@media (min-width: 768px) {
    .site-user-dropdown:hover .site-user-dropdown-content {
        display: block;
    }
}

/* Controlar exibição ao clicar */
.site-user-dropdown-content.active {
    display: block;
}

/* Ajuste do menu de navegação */
.site-menu-links {
    display: none;
    position: absolute;
    left: 0; /* 10px */
    background-color: white;
    color: black;
    padding: 5px; /* 5px */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    width: 300px;
}

/* Estilo para site-menu-type */
.site-menu-type {
    margin-bottom: 7px; /* Espaço entre grupos */
    padding: 5px 7px; /* Espaço interno */
    background-color: #f5f5f5; /* Fundo leve para destacar o grupo */
    border-left: 4px solid #2a7b36; /* Borda colorida para indicar hierarquia */
    font-size: 16px; /* Tamanho da fonte do título */
    font-weight: bold; /* Título em negrito */
    color: #333; /* Cor do texto do título */
}

.site-menu-type:empty::before {
    content: none; /* Evita exibir título em grupos sem nome (ex.: Sair) */
}

/* Ajustar itens dentro de site-menu-type */
.site-menu-type > .site-menu-link,
.site-menu-type > .site-submenus {
    margin-left: 10px; /* Recuo para indicar hierarquia dentro do grupo */
}

/* Espaçamento entre os links do menu */
.site-menu-link {
    display: flex;
    align-items: center; /* Mantém ícone e texto alinhados verticalmente */
    width: 100%; /* Garante que o hover abranja toda a largura */
    padding: 5px 5px; /* Ajuste para espaçamento interno */
    margin-bottom: 8px; /* Espaço vertical entre os links */
    text-decoration: none;
    border-left: 1px solid gray; /* Borda fina à esquerda */
    border-bottom: 1px solid gray; /* Borda fina abaixo */
    font-weight: bold;
    color: gray;
    font-size: 14px;
}

.site-menu-link:last-child {
    margin-bottom: 0; /* Remove o espaço do último item */
}

.site-menu-link:hover {
    background-color: lightgray;
}

.site-menu-link.actual {
    background-color: #bdecb6;
}

/* Exibir menu ao passar o mouse (PC) */
@media (min-width: 768px) {
    .site-menus:hover .site-menu-links {
        display: block;
    }
}

/* Controlar exibição ao clicar */
.site-menu-links.active {
    display: block;
}

/* Estilos do submenu */
.site-submenus {
    position: relative;
    display: flex; /* Mantém o título e a seta na mesma linha */
    align-items: center; /* Alinha verticalmente */
    justify-content: space-between; /* Distribui o texto e a seta corretamente */
    cursor: pointer;
}

.site-submenu-title {
    display: flex;
    align-items: center; /* Mantém ícone e texto alinhados verticalmente */
    width: 100%; /* Garante que o hover abranja toda a largura */
    /* flex-grow: 1; Permite que o texto ocupe o espaço disponível */
    padding: 5px 5px; /* Ajuste para espaçamento interno */
    margin-bottom: 8px; /* Espaço vertical entre os links */
    border-left: 1px solid gray; /* Borda fina à esquerda */
    border-bottom: 1px solid gray; /* Borda fina abaixo */
    text-decoration: none;
    font-weight: bold;
    color: gray;
    font-size: 14px;
}

.site-submenu-title:last-child {
    margin-bottom: 0; /* Remove o espaço do último item */
}

.site-submenu-title:hover {
    background-color: lightgray;
}

.site-submenu-title.actual {
    background-color: #bdecb6;
}

/* Ícone de seta indicando submenu */
.site-submenus::after {
    content: ">";
    font-size: 14px;
    color: black;
    margin-left: 8px; /* Espaço entre o texto e a seta */
}

/* Oculta o submenu por padrão */
.site-submenu-links {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    width: 300px;
}

/* Estilo dos links do submenu */
.site-submenu-link {
    display: flex;
    align-items: center; /* Mantém ícone e texto alinhados verticalmente */
    width: 100%; /* Garante que o hover abranja toda a largura */
    padding: 5px 8px; /* Ajuste para espaçamento interno. Aumentado padding-left para recuo visual (era 5px) */
    margin-bottom: 8px; /* Espaço vertical entre os links */
    text-decoration: none;
    color: gray;
    font-size: 12px;
}

.site-submenu-link:last-child {
    margin-bottom: 0; /* Remove o espaço do último item */
}

.site-submenu-link:hover {
    background-color: lightgray;
}

.site-submenu-link.actual {
    background-color: #bdecb6;
}

/* Exibir submenu ao passar o mouse (PC) */
@media (min-width: 768px) {
    .site-submenus:hover .site-submenu-links {
        display: block;
    }
}

/* Controlar exibição ao clicar */
.site-submenu-links.active {
    display: block;
}

/* Responsividade */
@media (max-width: 768px) {
    .site-header-title, .current-view, .site-user-profile-name
    {
        display: none;
    }
    .site-menu-links {
        width: 90%;
    }
}

/* Responsividade para telas menores (celular) */
@media (max-width: 768px) {
    /* Ocultar o conteúdo do submenu */
    .site-submenu-links {
        display: none !important; /* Garante que o submenu não seja exibido, mesmo com a classe active */
    }

    /* Opcional: Tornar o site-submenu-title visível como um link normal */
    .site-submenu-title {
        display: flex !important; /* Garante que o título seja visível */
        cursor: pointer; /* Mantém a aparência clicável */
        pointer-events: auto; /* Permite cliques no título */
    }

    /* Opcional: Impedir que o submenu seja ativado ao clicar */
    .site-submenus:hover .site-submenu-links,
    .site-submenu-links.active {
        display: none !important; /* Sobrescreve qualquer tentativa de exibir o submenu */
    }
}

/* Adiciona ícone específico baseado na classe */
.site-menu-link::before, .site-submenu-title::before, .site-submenu-link::before
{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px; /* Espaço entre o ícone e o texto */
}

/* Ícones individuais */
.icon-home::before {
    background-image: url('/img/svg/svg_home_black-svgrepo-com.svg');
}

.icon-about::before {
    background-image: url('/img/svg/svg_book-formula-information-svgrepo-com.svg');
}

.icon-contact::before {
    background-image: url('/img/svg/svg_mail-svgrepo-com.svg');
}

.icon-login::before {
    background-image: url('/img/svg/svg_login-circle-svgrepo-com.svg');
}

.icon-logout::before {
    background-image: url('/img/svg/svg_logout-circle-svgrepo-com.svg');
}

.icon-admin::before {
    background-image: url('/img/svg/svg_admin-with-cogwheels-svgrepo-com.svg');
}

.icon-search::before {
    background-image: url('/img/svg/svg_people-search-svgrepo-com.svg');
}

.icon-users::before {
    background-image: url('/img/svg/svg_users-user-svgrepo-com.svg');
}

.icon-person::before {
    background-image: url('/img/svg/svg_account-box-svgrepo-com.svg');
}

.icon-profile::before {
    background-image: url('/img/svg/svg_profile-svgrepo-com.svg');
}

.icon-edit::before {
    background-image: url('/img/svg/svg_edit-svgrepo-com.svg');
}

.icon-historia::before {
    background-image: url('/img/svg/icon_world-svgrepo-com.svg');
}

.icon-brasil::before {
    background-image: url('/img/svg/icon_brazil-brazil-svgrepo-com.svg');
}

.icon-comeco-de-pista::before {
    background-image: url('/img/svg/icon_circle-xmark-svgrepo-com.svg');
}

.icon-institucional::before {
    background-image: url('/img/svg/icon_meeting-consider-deliberate-about-meet-svgrepo-com.svg');
}

.icon-services::before {
    background-image: url('/img/svg/icon_meeting-consider-deliberate-about-meet-svgrepo-com.svg');
}

.icon-project::before {
    background-image: url('/img/svg/icon_project-presentation-svgrepo-com.svg');

}
.icon-method::before {
    background-image: url('/img/svg/icon_pattern-security-svgrepo-com.svg');
}

.icon-programs::before {
    background-image: url('/img/svg/icon_fleur-de-lis-2-svgrepo-com.svg');
}

.icon-lobinho::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-escoteiro::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-senior::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-pioneiro::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-adulto::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-doador::before {
    background-image: url('/img/svg/icon_check-all-svgrepo-com.svg');
}

.icon-events::before {
    background-image: url('/img/svg/icon_calendar-svgrepo-com.svg');
}

.icon-words::before {
    background-image: url('/img/svg/icon_cubes-abc-svgrepo-com.svg');
}

.icon-card::before {
    background-image: url('/img/svg/icon_card-2-svgrepo-com.svg');
}

.icon-table::before {
    background-image: url('/img/svg/icon_table-rows-svgrepo-com.svg');
}

.icon-list::before {
    background-image: url('/img/svg/icon_list-ordered-svgrepo-com.svg');
}

.icon-roles::before {
    background-image: url('/img/svg/icon_server-02-svgrepo-com.svg');
}