/* Consistent outline icons; selection is shown through icon and label color. */
@media (max-width: 760px) {
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab {
        background: transparent !important; background-image: none !important;
        box-shadow: none !important; border: 0 !important;
        color: var(--ep-muted, #637e91) !important;
        gap: 5px !important; -webkit-tap-highlight-color: transparent;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab:is(.active, :hover, :active),
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-menu[open] > .employee-mobile-tab {
        color: var(--ep-brand, #00877d) !important;
        background: transparent !important; box-shadow: none !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab > .ep-nav-icon {
        display: grid !important; place-items: center; position: static !important;
        width: 24px !important; height: 24px !important; min-width: 24px !important;
        padding: 0 !important; margin: 0 !important; border: 0 !important;
        background: none !important; box-shadow: none !important;
        mask: none !important; -webkit-mask: none !important;
        transform: none !important; color: inherit !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .ep-nav-icon svg {
        display: block; width: 24px; height: 24px; overflow: visible; color: inherit;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab strong {
        color: inherit !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab::before,
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab::after,
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .ep-nav-icon::before,
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .ep-nav-icon::after {
        display: none !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab:focus-visible {
        outline: 2px solid var(--ep-brand, #00877d); outline-offset: -2px;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-panel {
        min-width: 174px !important; padding: 5px !important; gap: 2px !important;
        background: var(--ep-surface, #fff) !important; color: var(--ep-text, #243247) !important;
        border: 1px solid var(--ep-border, #e3e8ef) !important; border-radius: 13px !important;
        box-shadow: 0 8px 24px #00000020 !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-panel a {
        justify-content: flex-start !important; min-height: 40px !important; padding: 10px 12px !important;
        border: 0 !important; border-radius: 8px !important; background: transparent !important;
        color: var(--ep-text, #243247) !important; font-size: 12px !important; font-weight: 500 !important;
        text-align: left !important; text-decoration: none; box-shadow: none !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-panel a:is(:hover, :focus-visible, :active) {
        background: var(--ep-soft, #e7f4ef) !important; color: var(--ep-brand, #00877d) !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-panel a:focus-visible {
        outline: 1px solid var(--ep-brand, #00877d) !important; outline-offset: -2px;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab {
        transition: color 180ms ease, transform 110ms ease-out !important;
        transform-origin: center 65%;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab:active {
        transform: scale(.92) !important;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab.active .ep-nav-icon svg,
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-menu[open] > summary .ep-nav-icon svg {
        transform-origin: center;
        animation: ep-nav-select 340ms cubic-bezier(.2, .7, .3, 1) both;
    }
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab.active strong,
    html body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-more-menu[open] > summary strong {
        animation: ep-nav-label-select 240ms ease-out both;
    }
}
@keyframes ep-nav-select {
    0% { transform: translateY(0) scale(.88); }
    45% { transform: translateY(-3px) scale(1.12); }
    75% { transform: translateY(1px) scale(.98); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes ep-nav-label-select {
    from { opacity: .65; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}