/* Sobrescrever o gradiente da toolbar padrão do PrimeFaces */
.ui-toolbar.ui-widget-header {
    background: var(--primary-color) !important;
    background-image: none !important;
    color: white !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* Remove o arredondamento por padrão */
}

/* Estilos base */
.main-header-toolbar {
    border: none !important;
    padding: 8px 15px !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.main-header-toolbar .ui-toolbar-group-left,
.main-header-toolbar .ui-toolbar-group-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.main-header-toolbar .ui-toolbar-group-left {
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
}
.main-header-toolbar .ui-toolbar-group-right {
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
}

.main-header-toolbar .title {
    font-size: 1.3em;
    margin-left: 15px;
    white-space: nowrap;
    color: white;
}

.info-login {
    margin-right: 10px;
    color: white;
}

/* Menu principal */
.main-menu {
    background-color: var(--primary-color) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 0 4px 4px !important; /* Arredondado apenas na parte inferior */
    padding: 0 !important;
    margin: 0 !important;
}

.main-menu .ui-menu-list .ui-menuitem-link,
.main-menu .ui-menubar-options {
    color: white !important;
}

.main-menu .ui-menuitem-text {
    color: white !important;
}

.main-menu .ui-submenu-icon {
    color: white !important;
}

/* Ajustes específicos para submenus no desktop */
.ui-menubar .ui-menuitem-link .ui-menuitem-text {
    color: white !important;
}

/* item text branco apenas para submenu */
.ui-menubar .ui-widget-content .ui-menuitem-link .ui-menuitem-text {
    color: var(--text-color) !important; /* Texto preto nos submenus */
}

/* Submenu dropdown (fundo branco, texto preto) */
.ui-menubar .ui-submenu-list {
    background-color: white !important;
}

.ui-menubar .ui-submenu-list .ui-menuitem-link .ui-menuitem-text {
    color: var(--text-color) !important;
}

/* Ícone de triangulo branco no menu principal */
.main-menu.ui-menubar .ui-menuitem > .ui-menuitem-link > .ui-icon {
    color: white !important;
}

/* Manter o triângulo preto nos submenus (dropdown) */
.main-menu.ui-menubar .ui-submenu-list .ui-menuitem > .ui-menuitem-link > .ui-icon {
    color: black !important;
}

.ui-menu-dynamic {
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
}

/* Ajustes para o menu mobile */
.mobile-overlay-menu {
    width: 100vw !important; /* Estende para o tamanho da página */
    max-width: 100vw !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
    left: 0 !important; /* Alinha à esquerda da página */
}

.mobile-overlay-menu .ui-menu-list {
    width: 100% !important;
}

.mobile-overlay-menu .ui-submenu-list {
    max-width: 90% !important;
}

.mobile-overlay-menu .ui-menuitem-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 65vw !important;
}

.mobile-overlay-menu .ui-menuitem-link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    line-height: 1.3 !important;
}

.mobile-overlay-menu .ui-menu-parent > span {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Responsividade */
.mobile-only {
    display: none !important;;
}

.desktop-only {
    display: block !important;;
}

.ui-button.ui-button-secondary .ui-button-icon-left {
    color: white !important;
}

.ui-button.ui-button-secondary {
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin-left: 5px;
}

@media screen and (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;;
    }

    /* Arredondamento para a toolbar em modo mobile */
    .ui-toolbar.ui-widget-header {
        border-radius: 0 0 10px 10px !important;
    }

    /* Remover arredondamento do menu mobile */
    .main-menu {
        border-radius: 0 !important;
    }

    .main-header-toolbar {
        display: flex;
        flex-direction: column;
    }

    .main-header-toolbar .title {
        font-size: 1em;
        margin-left: 8px;
    }

    .info-login {
        font-size: 0.9em;
        margin-right: 5px;
    }

    .ui-button {
        padding: 0.5em !important;
        font-size: 1.1em !important;
    }

    .mobile-menu-button {
        font-size: 1.5em !important;
        margin: 5px !important;
        background-color: transparent !important;
        background-image: none !important;
        border-color: rgb(145 145 145 / 43%) !important;
    }

    .mobile-menu-button .ui-button-icon-left {
        color: var(--primary-color) !important;
    }

    .ui-menu.ui-overlay-panel {
        width: 100vw !important;
        max-height: 80vh !important;
        left: 0 !important;
    }

    /* Ajuste do posicionamento do conteúdo do menu */
    .mobile-overlay-menu .ui-menu-list {
        width: 100% !important;
        padding-right: 15px !important;
    }

    /* Corrige o problema de submenu em telas pequenas */
    .mobile-overlay-menu .ui-submenu-list {
        position: relative !important;
        width: 95% !important;
        margin-left: 10px !important;
    }
}