/**
 * Padrao visual compartilhado dos menus MyPharm.
 * Este arquivo deve ser carregado depois dos estilos de cada modulo.
 */

:root {
    --mp-menu-width: 252px;
    --mp-menu-collapsed-width: 72px;
    --mp-menu-header-height: 116px;
    --mp-menu-item-height: 42px;
    --mp-menu-item-radius: 8px;
    --mp-menu-font-size: 0.84rem;
    --mp-menu-icon-size: 1rem;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout {
    --sidebar-width: var(--mp-menu-width);
    --sidebar-collapsed: var(--mp-menu-collapsed-width);
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar {
    width: var(--mp-menu-width);
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar.collapsed {
    width: var(--mp-menu-collapsed-width);
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-header {
    box-sizing: border-box;
    flex: 0 0 var(--mp-menu-header-height);
    width: 100%;
    min-height: var(--mp-menu-header-height);
    height: var(--mp-menu-header-height);
    padding: 16px 18px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-brand-logo--expanded {
    width: 100%;
    max-width: 168px;
    max-height: 76px;
    border-radius: 6px;
    object-fit: contain;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-brand-logo--collapsed {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-toggle {
    right: -15px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 50%;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-nav {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    padding: 12px 10px 16px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--mp-menu-item-height) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 10px !important;
    border: 0;
    border-radius: var(--mp-menu-item-radius) !important;
    font-family: var(--mp-font-ui, 'Inter', sans-serif);
    font-size: var(--mp-menu-font-size) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-align: left;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item > i,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-icon {
    flex: 0 0 20px;
    width: 20px;
    margin: 0;
    font-size: var(--mp-menu-icon-size);
    line-height: 1;
    text-align: center;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item:hover,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-toggle:hover,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group.is-open > .nav-group-toggle {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

[data-theme="light"] :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item:hover,
[data-theme="light"] :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-toggle:hover,
[data-theme="light"] :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group.is-open > .nav-group-toggle {
    background: var(--bg-card-hover, #f8fafc);
    color: var(--text-primary, #0f172a);
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item.active,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group.is-active > .nav-group-toggle,
[data-theme="light"] :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item.active,
[data-theme="dark"] :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item.active {
    background: rgba(230, 57, 70, 0.11);
    color: var(--primary, #e63946);
    box-shadow: inset 3px 0 0 var(--primary, #e63946);
    font-weight: 600;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-item.active > i,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group.is-active > .nav-group-toggle > i {
    color: var(--primary, #e63946);
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-section-title {
    box-sizing: border-box;
    padding: 14px 12px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-top {
    margin-bottom: 5px;
    padding-bottom: 7px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group {
    margin: 0;
}

#gcApp.app-layout > .sidebar .gc-sidebar-tablist {
    gap: 3px !important;
    margin-bottom: 3px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-submenu-inner {
    padding: 3px 0 6px 4px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .nav-group-submenu .nav-item {
    min-height: 36px !important;
    padding: 0 10px 0 38px !important;
    border-radius: 7px !important;
    font-size: 0.79rem !important;
    font-weight: 500;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar.collapsed .nav-item,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar.collapsed .nav-group-toggle {
    justify-content: center;
    min-height: var(--mp-menu-item-height) !important;
    padding: 0 10px !important;
    gap: 0 !important;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar.collapsed .nav-item.active {
    box-shadow: none;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-footer {
    box-sizing: border-box;
    flex: 0 0 72px;
    min-height: 72px;
    padding: 12px 14px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-footer .user-info {
    min-height: 46px;
    gap: 10px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-footer button.user-info {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-footer button.user-info:focus-visible {
    outline: 2px solid var(--primary, #e63946);
    outline-offset: 3px;
    border-radius: 6px;
}

:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-avatar-wrap,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-avatar-wrap .avatar-img,
:is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-avatar-wrap .perfil-foto-inicial {
    width: 36px;
    min-width: 36px;
    height: 36px;
}

/* O Visitador usa menu horizontal no desktop e gaveta no celular. */
.visitador-nav {
    gap: 3px;
}

.visitador-nav-link {
    box-sizing: border-box;
    min-height: var(--mp-menu-item-height);
    padding: 0 12px;
    gap: 8px;
    border-radius: var(--mp-menu-item-radius);
    font-size: var(--mp-menu-font-size);
    font-weight: 600;
    letter-spacing: 0;
}

.visitador-nav-link i {
    width: 20px;
    font-size: var(--mp-menu-icon-size);
    text-align: center;
}

.visitador-nav-link.active,
[data-theme="light"] .visitador-nav-link.active {
    background: rgba(230, 57, 70, 0.11);
    color: var(--primary, #e63946);
}

.visitador-nav-drawer {
    width: min(86vw, 300px);
    max-width: 300px;
}

.visitador-nav-drawer-link {
    box-sizing: border-box;
    min-height: var(--mp-menu-item-height);
    margin: 2px 8px;
    width: calc(100% - 16px);
    padding: 0 12px;
    gap: 10px;
    border: 0;
    border-radius: var(--mp-menu-item-radius);
    font-size: var(--mp-menu-font-size);
}

.visitador-nav-drawer-link i {
    width: 20px;
    font-size: var(--mp-menu-icon-size);
}

.visitador-nav-drawer-link.active,
.visitador-nav-drawer-link.active i,
[data-theme="light"] .visitador-nav-drawer-link.active {
    color: var(--primary, #e63946);
}

.visitador-nav-drawer-link.active,
[data-theme="light"] .visitador-nav-drawer-link.active {
    background: rgba(230, 57, 70, 0.11);
}

@media (max-width: 768px) {
    :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar,
    :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar.collapsed {
        width: min(86vw, 300px) !important;
    }

    :is(#appLayout, #gcApp, #vdApp, #ceApp, #mfApp, #bonusApp, #entApp).app-layout > .sidebar .sidebar-header {
        flex-basis: 104px;
        min-height: 104px;
        height: 104px;
    }
}