/* newdon mobile: Elastic phone header + labeled task menu */

/* Icon-only list toolbar labels if strip is shown */
html.layout-phone .menu.toolbar span.inner,
html.layout-small .menu.toolbar span.inner {
    display: none !important;
}

/* Hide Select/Threads/Options strip in list header on phone */
html.layout-phone #toolbar-list-menu,
html.layout-phone #messagelist-header > #toolbar-list-menu,
html.layout-phone #layout-list > .header > #toolbar-list-menu {
    display: none !important;
}

/* Center folder title; stop JS margin from clipping Menu/Folders */
html.layout-phone #messagelist-header > .header-title,
html.layout-phone #layout-list > .header > .header-title,
html.layout-phone .header > .header-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

html.layout-phone #messagelist-header > a.back-sidebar-button span.inner,
html.layout-phone #layout-list > .header > a.back-sidebar-button span.inner {
    display: none !important;
}

html.layout-phone #messagelist-header > a.button.icon,
html.layout-phone #layout-list > .header > a.button.icon {
    flex: 0 0 auto;
}

/*
 * Side task menu (hamburger): show captions next to icons.
 * Stock Elastic hides #taskmenu span.inner on narrow layouts.
 */
html.layout-phone #layout-menu,
html.layout-phone #layout-menu .popover,
html.layout-phone #layout-menu .popover-body {
    /* keep popover wide enough for icon + label */
}

html.layout-phone #taskmenu a,
html.layout-phone #layout-menu .menu li > a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.75rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100%;
}

html.layout-phone #taskmenu a:before,
html.layout-phone #layout-menu .menu li > a:before {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 2rem;
    width: 2rem !important;
    text-align: center;
}

html.layout-phone #taskmenu span.inner,
html.layout-phone #layout-menu .menu li > a span.inner {
    display: inline !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* Special rows (compose / logout) use same treatment */
html.layout-phone #taskmenu a.compose span.inner,
html.layout-phone #taskmenu a.logout span.inner,
html.layout-phone #taskmenu a.about span.inner,
html.layout-phone #taskmenu a.theme span.inner {
    display: inline !important;
}