/* Keep the user navigation below the logo on narrow screens. */
@media (max-width: 600px) {
    #global-header:not([style*="display: none"]):not([style*="display:none"]) {
        height: auto !important;
        min-height: 60px;
        padding: .45rem .75rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .4rem !important;
    }
    #global-header > .header-logo-container {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    #global-header > #header-user-area {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        gap: .4rem !important;
    }
    #global-header > div:nth-child(2) {
        order: 3;
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0;
        margin: .15rem 0 0 !important;
    }
    #user-nav.role-tabs {
        width: min(100%, 280px);
        max-width: 100%;
        flex-wrap: nowrap;
        padding: 3px;
        border-radius: 99px;
    }
    #user-nav .role-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 32px;
        padding: 0 .35rem;
        font-size: .85rem;
        white-space: nowrap;
    }
    #global-header .nav-indicator {
        height: calc(100% - 6px);
        top: 3px;
        border-radius: 99px;
    }
}
@media (max-width: 400px) {
    #global-header .brand-logo-text { font-size: 1.25rem !important; }
    #global-header > #header-user-area > div:first-child { display: none !important; }
    #global-header > #header-user-area > div[style*="width: 1px"] { display: none !important; }
    #global-admin-btn, #global-logout-btn {
        width: 30px;
        height: 30px;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50%;
    }
    #global-admin-btn span, #global-logout-btn span { display: none; }
}