/**
 * AnbMail skin for Roundcube 1.6 - a Gmail-style look built on top of Elastic.
 *
 * This skin extends Elastic (see meta.json): everything not overridden here
 * is inherited from Elastic. Elastic is licensed CC BY-SA 3.0
 * (c) The Roundcube Dev Team.
 */

@import url("../../elastic/styles/styles.min.css");

/* ------------------------------------------------------------------ */
/* Design tokens                                                      */
/* ------------------------------------------------------------------ */
:root {
    --anb-bg: #f6f8fc;
    --anb-surface: #ffffff;
    --anb-text: #1f1f1f;
    --anb-text-2: #444746;
    --anb-text-3: #5e5e5e;
    --anb-blue: #0b57d0;
    --anb-blue-hover: #0842a0;
    --anb-select: #d3e3fd;
    --anb-select-text: #041e49;
    --anb-hover: rgba(31, 31, 31, .08);
    --anb-compose: #c2e7ff;
    --anb-compose-text: #001d35;
    --anb-read-row: #f2f6fc;
    --anb-border: #e0e3e7;
    --anb-search: #eaf1fb;
    --anb-topbar: 64px;
    --anb-sidebar: 256px;
    --anb-radius: 16px;
}

html, body {
    background: var(--anb-bg);
    color: var(--anb-text);
    font-family: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
}

a, .btn-link { color: var(--anb-blue); }
a:hover { color: var(--anb-blue-hover); }

/* ------------------------------------------------------------------ */
/* Buttons & form controls                                            */
/* ------------------------------------------------------------------ */
.btn, button.btn, input.button, .formbuttons .btn {
    border-radius: 20px;
    text-transform: none;
    font-weight: 500;
    letter-spacing: .1px;
}
.btn-primary, .btn.btn-primary, .formbuttons button.mainaction, .formbuttons .btn-primary {
    background: var(--anb-blue) !important;
    border-color: var(--anb-blue) !important;
    color: #fff !important;
    padding-left: 24px; padding-right: 24px;
}
.btn-primary:hover { background: var(--anb-blue-hover) !important; border-color: var(--anb-blue-hover) !important; }
.btn-secondary, .btn.btn-secondary, .btn-default {
    background: #fff; border: 1px solid #747775; color: var(--anb-blue);
}
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--anb-blue) !important;
    box-shadow: 0 0 0 1px var(--anb-blue) !important;
}
.form-control, .custom-select, .input-group-text { border-radius: 4px; }

/* ------------------------------------------------------------------ */
/* Login screen (Google-style card)                                   */
/* ------------------------------------------------------------------ */
body.task-login { background: var(--anb-bg); }
body.task-login #layout-content {
    background: #fff;
    border-radius: 28px;
    width: min(450px, calc(100vw - 32px));
    max-width: 450px;
    height: auto;
    flex: none;
    margin: 6vh auto 0;
    padding: 40px 40px 28px;
    box-shadow: none;
    border: 1px solid var(--anb-border);
}
body.task-login #layout { background: var(--anb-bg); align-items: flex-start; justify-content: center; }
body.task-login #logo { position: static !important; top: auto !important; display: block; margin: 0 auto 4px; max-width: 220px; max-height: 130px; width: auto; height: auto; }
body.task-login #layout-content::before {
    content: "Sign in to AnbMail";
    display: block; text-align: center;
    font-size: 24px; line-height: 32px; font-weight: 400; color: var(--anb-text);
    margin: 4px 0 4px;
}
body.task-login #layout-content::after {
    content: "Use your Apples & Bananas account";
    display: block; text-align: center; font-size: 16px; color: var(--anb-text); order: 3;
    margin: 0 0 24px;
}
body.task-login #layout-content { display: flex; flex-direction: column; }
body.task-login #layout-content::before { order: 1; }
body.task-login #logo { order: 0; }
body.task-login #layout-content::after { order: 2; }
body.task-login #login-form { order: 4; position: static !important; top: auto !important; width: 100%; }
body.task-login #login-form .form-control { height: 52px; border-radius: 4px; border: 1px solid #747775; font-size: 16px; }
body.task-login #login-form .input-group-prepend { display: none; }
body.task-login #login-form .input-group { margin-bottom: 18px; }
body.task-login #login-form .input-group .form-control { border-radius: 4px !important; }
body.task-login #login-form .formbuttons { text-align: right; margin-top: 28px; }
body.task-login #login-form .formbuttons .btn { height: 40px; min-width: 88px; }
body.task-login #login-footer { margin-top: 32px; color: var(--anb-text-3); font-size: 12px; text-align: center; }

/* ------------------------------------------------------------------ */
/* App shell: top bar + sidebar + list panel (wide screens)           */
/* ------------------------------------------------------------------ */
html.layout-large body:not(.task-login) #layout {
    flex-wrap: wrap;
    align-content: flex-start;
    background: var(--anb-bg);
}
html.layout-large body:not(.task-login) #layout > div:not(#layout-menu) {
    height: calc(100% - var(--anb-topbar));
}

/* Top bar (re-uses Elastic's task menu) */
html.layout-large #layout-menu {
    order: -1;
    width: 100%;
    flex: none;
    height: var(--anb-topbar);
    min-height: var(--anb-topbar);
    display: flex !important;
    flex-direction: row;
    align-items: center;
    background: var(--anb-bg) !important;
    padding: 0 12px 0 16px;
    position: relative;
    z-index: 20;
}
html.layout-large #layout-menu .popover-header {
    background: transparent !important;
    height: var(--anb-topbar);
    width: calc(var(--anb-sidebar) - 16px);
    display: flex !important;
    align-items: center;
    flex: none;
}
html.layout-large #layout-menu .popover-header img#logo {
    height: 48px; width: auto; max-height: 48px; max-width: none; padding: 0 8px 0 0;
}
html.layout-large #layout-menu .popover-header::after {
    content: "Mail";
    font-size: 22px; line-height: 1; color: var(--anb-text-2); font-weight: 400;
    letter-spacing: -.2px;
}
html.layout-large #taskmenu {
    flex: 1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    background: transparent !important;
    padding: 0; height: var(--anb-topbar);
    overflow: visible;
}
html.layout-large #taskmenu a {
    width: 44px; height: 44px; min-height: 0;
    border-radius: 50%;
    margin: 0 2px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--anb-text-2) !important;
    background: transparent !important;
    font-size: 0;
}
html.layout-large #taskmenu a:hover { background: var(--anb-hover) !important; }
html.layout-large #taskmenu a.selected { background: var(--anb-select) !important; color: var(--anb-select-text) !important; }
html.layout-large #taskmenu a:before { font-size: 18px !important; margin: 0 !important; width: auto; color: inherit; }
html.layout-large #taskmenu a .inner { display: none; }
html.layout-large #taskmenu .special-buttons { margin: 0 0 0 8px; display: flex; position: static; background: transparent !important; width: auto; }
html.layout-large #taskmenu a.logout { color: #b3261e !important; }
html.layout-large #taskmenu a.theme { display: none; }

html.layout-large #taskmenu .action-buttons { width: auto; }
/* Compose pill (floats over the top of the sidebar) */
html.layout-large body:not(.task-mail) #taskmenu .action-buttons { display: none; }
html.layout-large body.task-mail:not(.action-none) #taskmenu .action-buttons { display: none; }
html.layout-large body.task-mail.action-none #taskmenu .action-buttons {
    position: fixed; top: 76px; left: 12px; z-index: 30; display: block; margin: 0;
}
html.layout-large #taskmenu .action-buttons a.compose {
    width: auto; height: 56px; border-radius: 16px;
    padding: 0 24px 0 18px; margin: 0; min-width: 144px; box-sizing: border-box; justify-content: flex-start; white-space: nowrap;
    background: var(--anb-compose) !important;
    color: var(--anb-compose-text) !important;
    font-size: 14px; font-weight: 500; letter-spacing: .25px;
    box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    transition: box-shadow .15s;
}
html.layout-large #taskmenu .action-buttons a.compose:hover {
    background: var(--anb-compose) !important;
    box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}
html.layout-large #taskmenu .action-buttons a.compose .inner { display: inline; margin-left: 12px; font-size: 14px; }
html.layout-large #taskmenu .action-buttons a.compose:before { font-size: 20px !important; }

/* Sidebar (folders) */
html.layout-large #layout-sidebar {
    flex: 0 0 var(--anb-sidebar);
    max-width: var(--anb-sidebar);
    min-width: var(--anb-sidebar);
    background: transparent;
    border: 0;
    padding-top: 0;
}
html.layout-large body.task-mail #layout-sidebar #folderlist-content { padding-top: 72px; }
html.layout-large #layout-sidebar > .header { order: 3; background: transparent; border: 0; height: 40px; min-height: 40px; justify-content: flex-start; }
html.layout-large #layout-sidebar > .header .header-title { display: none; }
html.layout-large #layout-sidebar > .header a.sidebar-menu { color: var(--anb-text-2); }
html.layout-large #layout-sidebar > .footer { background: transparent; border: 0; }
html.layout-large #layout-sidebar .scroller { background: transparent; }

.folderlist li, .treelist li { border: 0 !important; }
.folderlist li > a, .treelist.folderlist li > a {
    height: 32px; line-height: 32px;
    border-radius: 0 16px 16px 0;
    margin-right: 12px;
    color: var(--anb-text);
    font-size: 14px;
}
.folderlist li > a:hover { background: var(--anb-hover) !important; }
.folderlist li.selected > a, .folderlist li.selected > a:hover {
    background: var(--anb-select) !important;
    color: var(--anb-select-text) !important;
    font-weight: 700;
}
.folderlist li.unread > a { font-weight: 700; }
.folderlist li > a span.unreadcount {
    background: transparent !important; color: var(--anb-text) !important;
    font-size: 12px; font-weight: 700; border-radius: 0; padding: 0 12px 0 0;
}
.folderlist li.selected > a span.unreadcount { color: var(--anb-select-text) !important; }

/* List panel as a rounded white card */
html.layout-large body:not(.task-mail) #layout-list,
html.layout-large body.task-mail:not(.action-none) #layout-list {
    flex: 0 0 320px; max-width: 320px; min-width: 320px; width: 320px !important;
    background: var(--anb-surface); border: 0; border-radius: var(--anb-radius);
    margin: 0 8px 16px 0; height: calc(100% - var(--anb-topbar) - 16px) !important; overflow: hidden;
}
html.layout-large body.task-mail.action-none #layout-list {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    width: auto !important;
    background: var(--anb-surface);
    border: 0;
    border-radius: var(--anb-radius);
    margin: 0 16px 16px 0;
    height: calc(100% - var(--anb-topbar) - 16px) !important;
    overflow: hidden;
}
html.layout-large body.task-mail.action-none #layout-content { display: none; }
html.layout-large #layout-sidebar .column-resizer, html.layout-large #layout-list .column-resizer { display: none; }

/* List toolbar (select / options / refresh) */
html.layout-large #messagelist-header {
    background: var(--anb-surface);
    border: 0; border-bottom: 1px solid var(--anb-border);
    height: 48px; min-height: 48px; line-height: 48px;
    justify-content: flex-start; padding: 0 8px;
}
html.layout-large #messagelist-header .header-title,
html.layout-large #messagelist-header a.task-menu-button,
html.layout-large #messagelist-header a.back-sidebar-button { display: none; }
html.layout-large #messagelist-header .toolbar { display: flex; flex-direction: row; align-items: center; }
html.layout-large #messagelist-header a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 2px; padding: 0; font-size: 0 !important; color: var(--anb-text-2) !important; }
html.layout-large #messagelist-header a:hover { background: var(--anb-hover); }
html.layout-large #messagelist-header a:before { font-size: 16px !important; margin: 0 !important; width: auto !important; }
html.layout-large #messagelist-header a .inner { display: none; }
html.layout-large #messagelist-header a.refresh { order: -1; margin-left: 4px; }
html.layout-large #messagelist-header a.toolbar-menu-button, html.layout-large #messagelist-header a.toolbar-list-button { display: none; }

/* Search box lives in the top bar */
html.layout-large body.task-mail .searchbar {
    position: fixed; top: 8px; left: var(--anb-sidebar);
    width: min(720px, calc(100vw - 520px)); height: 48px; z-index: 40;
    background: var(--anb-search); border: 0; border-radius: 24px;
    display: flex; align-items: center; margin: 0; padding: 0 8px 0 4px;
    transition: background .15s, box-shadow .15s;
}
html.layout-large body.task-mail .searchbar:focus-within {
    background: #fff;
    box-shadow: 0 1px 1px rgba(65,69,73,.3), 0 1px 3px 1px rgba(65,69,73,.15);
}
html.layout-large body.task-mail .searchbar input[type=text], html.layout-large body.task-mail .searchbar input#mailsearchform {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    height: 48px; font-size: 16px; color: var(--anb-text); padding-left: 52px;
    flex: 1;
}
html.layout-large body.task-mail .searchbar a { color: var(--anb-text-2); }
html.layout-large body.task-mail .searchbar a:hover { background: var(--anb-hover); border-radius: 50%; }
html.layout-large body.task-mail #searchmenu {
    position: fixed !important; top: 60px !important; left: var(--anb-sidebar) !important;
    width: min(720px, calc(100vw - 520px)) !important; z-index: 45;
    background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(60,64,67,.3);
}

/* ------------------------------------------------------------------ */
/* Message list: one line per message                                 */
/* ------------------------------------------------------------------ */
html.layout-large .messagelist { width: 100%; }
html.layout-large .messagelist tbody { display: block; }
html.layout-large .messagelist tr.message {
    display: flex; align-items: center; position: relative;
    height: 40px; min-height: 40px;
    background: var(--anb-read-row);
    border: 0; border-bottom: 1px solid var(--anb-border);
    color: var(--anb-text);
}
html.layout-large .messagelist tr.message.unread { background: #fff; }
html.layout-large .messagelist tr.message:hover {
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    z-index: 1;
}
html.layout-large .messagelist tr.message.selected, html.layout-large .messagelist tr.message.focused.selected {
    background: #c2dbff !important;
}
html.layout-large .messagelist tr.message.focused { background: inherit; }
html.layout-large .messagelist tr.message.focused:not(.selected)::before { display: none; }
html.layout-large .messagelist td { display: block; border: 0 !important; padding: 0; width: auto; background: transparent !important; color: inherit; }

/* checkbox */
html.layout-large .messagelist td.selection { display: block !important; width: 40px; flex: none; text-align: center; padding-left: 8px; order: 0; }
html.layout-large .messagelist td.selection input { margin: 0; vertical-align: middle; }
/* star (the Roundcube "flag") */
html.layout-large .messagelist td.flags { display: contents !important; }
html.layout-large .messagelist td.flags span.flag {
    order: 1; flex: none; width: 32px; height: 40px; line-height: 40px; text-align: center; color: #c4c7c5;
}
html.layout-large .messagelist td.flags span.flag span:before { font-size: 16px; }
html.layout-large .messagelist span.flagged:before { content: "\f005"; color: #f4b400; }
html.layout-large .messagelist tr.flaggedroot:not(:hover) span.unflagged:before { content: "\f005"; color: transparent; }
html.layout-large .messagelist tr:hover span.unflagged:before { color: #c4c7c5; }
html.layout-large .messagelist tr.flagged td, html.layout-large .messagelist tr.flagged td.subject span.subject a,
html.layout-large .messagelist tr.flagged td.subject span.date, html.layout-large .messagelist tr.flagged td.subject span.fromto { color: inherit; }
/* attachment icon sits just left of the date */
html.layout-large .messagelist td.flags span.attachment {
    position: absolute; right: 96px; top: 0; height: 40px; line-height: 40px; width: 24px; text-align: center;
}
/* row text */
html.layout-large .messagelist td.subject {
    order: 2; flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; height: 40px; padding-right: 16px;
}
html.layout-large .messagelist td.subject span { line-height: 40px; }
html.layout-large .messagelist td.subject span.fromto {
    order: 0; flex: 0 0 200px; width: 200px; padding: 0 16px 0 4px; font-size: 14px; color: var(--anb-text);
}
html.layout-large .messagelist td.subject span.subject {
    order: 1; flex: 1; width: auto; min-width: 0; padding-right: 36px; font-size: 14px; color: var(--anb-text);
}
html.layout-large .messagelist td.subject span.date,
html.layout-large .messagelist tr:hover span.date {
    order: 2; display: inline !important; flex: 0 0 84px; text-align: right; font-size: 12px; color: var(--anb-text-3);
}
html.layout-large .messagelist td.subject span.size, html.layout-large .messagelist tr:hover span.size { display: none !important; }
html.layout-large .messagelist span.msgicon.status:not(.replied):not(.forwarded) { display: none; }
html.layout-large .messagelist tr.unread td.subject span.subject,
html.layout-large .messagelist tr.unread td.subject span.fromto { font-weight: 700; color: var(--anb-text); }
html.layout-large .messagelist tr.unread td.subject span.date { font-weight: 700; color: var(--anb-text); }
html.layout-large .messagelist tr.deleted td.subject * { color: rgba(31,31,31,.5); text-decoration: line-through; }

/* Pagination footer */
html.layout-large #layout-list > .footer { background: var(--anb-surface); border-top: 1px solid var(--anb-border); }

/* Content panes (message view, compose, settings, contacts) as rounded cards */
html.layout-large body:not(.task-mail):not(.task-login) #layout-content,
html.layout-large body.task-mail:not(.action-none) #layout-content {
    flex: 1 1 0; min-width: 0; width: auto;
    background: var(--anb-surface);
    border-radius: var(--anb-radius);
    margin: 0 16px 16px 0;
    height: calc(100% - var(--anb-topbar) - 16px) !important;
    overflow: hidden;
}
html.layout-large body.task-mail.action-show #layout-content,
html.layout-large body.task-mail.action-compose #layout-content { margin-left: 16px; }
html.layout-large body.task-mail.action-compose #layout-sidebar {
    flex: 0 0 280px; max-width: 280px; min-width: 280px;
    background: var(--anb-surface); border-radius: var(--anb-radius); margin: 0 16px 16px 0;
    height: calc(100% - var(--anb-topbar) - 16px) !important; overflow: auto;
}
html.layout-large #layout-content > .header, html.layout-large #layout-list > .header {
    background: var(--anb-surface) !important; border-bottom: 1px solid var(--anb-border);
}
html.layout-large #layout-content > .header a.button, html.layout-large #layout-content > .header .toolbar a { color: var(--anb-text-2); }
html.layout-large body.task-mail.action-show #layout-content > .header { justify-content: flex-start; padding-left: 8px; }
html.layout-large body.task-mail.action-show #layout-content > .header a.back-list-button {
    display: inline-flex !important; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; font-size: 0; margin: 4px 8px 0 0; color: var(--anb-text-2);
}
html.layout-large body.task-mail.action-show #layout-content > .header a.back-list-button:hover { background: var(--anb-hover); }
html.layout-large body.task-mail.action-show #layout-content > .header .header-title { display: none; }
html.layout-large body.task-mail.action-show #layout-content > .header .toolbar { margin-left: 0; }
html.layout-large #layout-content > .header .toolbar a { border-radius: 8px; }
html.layout-large #layout-content > .header .toolbar a:hover { background: var(--anb-hover); }

/* Message view */
body.task-mail.action-show .message-headers, body.task-mail.action-show #message-header { padding: 16px 24px 0; }
body.task-mail.action-show h2.subject, body.task-mail.action-show .subject h2 { font-size: 22px; font-weight: 400; color: var(--anb-text); }
body.task-mail.action-show .message-part { padding: 8px 24px 24px 72px; }
body.task-mail div.pre, body.task-mail .message-part div.pre, .rcmBody pre { font-family: Roboto, "Segoe UI", Arial, sans-serif !important; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--anb-text); }

/* List toolbar icon alignment */
html.layout-large #messagelist-header a:before { line-height: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* Pager */
html.layout-large #layout-list > .footer.pagenav, html.layout-large #layout-list .pagenav { font-size: 12px; color: var(--anb-text-3); }

html.layout-large body.task-mail.action-show #layout-content > .header a.back-list-button:before {
    font-family: 'Icons'; font-weight: 900; content: "\f060"; font-size: 16px; display: inline-block; width: auto; margin: 0; line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Shared theme for every layout size (tablet / phone fall back to    */
/* Elastic's responsive structure but with the Gmail palette)         */
/* ------------------------------------------------------------------ */
.messagelist tr.flagged td, .messagelist tr.flagged td.subject span.subject a,
.messagelist tr.flagged td.subject span.date, .messagelist tr.flagged td.subject span.fromto { color: inherit; }
.messagelist span.flagged:before { content: "\f005"; color: #f4b400; }
.messagelist tr.unread td.subject span.msgicon.status:before, .messagelist td.subject span.msgicon.status.unread:before { color: var(--anb-blue); }

html:not(.layout-large) #layout-menu, html:not(.layout-large) #taskmenu,
html:not(.layout-large) #layout-menu .popover-header { background: var(--anb-bg) !important; }
html:not(.layout-large) #taskmenu a { color: var(--anb-text-2) !important; }
html:not(.layout-large) #taskmenu a:before { color: inherit !important; }
html:not(.layout-large) #taskmenu a.selected, html:not(.layout-large) #taskmenu a:hover { background: var(--anb-select) !important; color: var(--anb-select-text) !important; }
html:not(.layout-large) #taskmenu a.compose { color: var(--anb-blue) !important; }
html:not(.layout-large) #taskmenu a.logout { color: #b3261e !important; }
html:not(.layout-large) #layout > div > .header, html:not(.layout-large) #layout > div > .footer { background: #fff !important; }
html:not(.layout-large) #layout-sidebar, html:not(.layout-large) #layout-list { background: #fff; }
html:not(.layout-large) #layout-menu .popover-header img#logo { max-height: 40px; }

.floating-action-buttons a.button {
    background: var(--anb-compose) !important; color: var(--anb-compose-text) !important;
    border-radius: 16px !important; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15) !important; opacity: 1;
}
.messagelist tr.selected td, .listing li.selected > a, .listing tr.selected td { background-color: var(--anb-select) !important; color: var(--anb-select-text) !important; }
.listing li.selected > a:before { color: var(--anb-select-text) !important; }
.searchbar input { color: var(--anb-text); }
.popover, .popupmenu, .ui-dialog { border-radius: 8px; }
.toolbar a.button:hover, .toolbar a:hover { background-color: var(--anb-hover); }
.badge-primary, .unreadcount { background: var(--anb-blue) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--anb-blue); border-color: var(--anb-blue); }
.pagenav a.button:hover { background: var(--anb-hover); }

html:not(.layout-large) #taskmenu .special-buttons { background: transparent !important; }
body.task-mail.action-show #layout-content span.flag.flagged:before, body.task-mail.action-show .subject .flag:before { content: "\f005"; color: #f4b400; }

/* ---- Spacing / alignment refinements (v2) ---- */
/* more room between logo, Compose and the folder list */
html.layout-large body.task-mail.action-none #taskmenu .action-buttons { top: 84px; }
html.layout-large body.task-mail #layout-sidebar #folderlist-content { padding-top: 96px; }

/* list toolbar: icons vertically centred in the 48px row */
html.layout-large #messagelist-header { display: flex; align-items: center; height: 48px; min-height: 48px; line-height: 1; padding: 0 8px; }
html.layout-large #messagelist-header .toolbar { display: flex; flex-direction: row; align-items: center; height: 48px; margin: 0; padding: 0; }
html.layout-large #messagelist-header a { margin: 0 2px !important; align-self: center; line-height: 1; }
html.layout-large #messagelist-header a.refresh { margin-left: 4px !important; }

/* pagination moves up into the toolbar row, right-aligned (like Gmail's "1-50 of N  <  >") */
html.layout-large body.task-mail.action-none #layout-list { position: relative; }
html.layout-large body.task-mail.action-none #layout-list > .pagenav {
    position: absolute; top: 0; right: 8px; left: auto; bottom: auto;
    width: auto; height: 48px; min-height: 48px; padding: 0; margin: 0;
    background: transparent; border: 0; z-index: 5;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
}
html.layout-large body.task-mail.action-none #layout-list > .pagenav input { display: none; }
html.layout-large body.task-mail.action-none #layout-list > .pagenav .pagenav-text { margin: 0 8px; font-size: 12px; color: var(--anb-text-2); white-space: nowrap; }
html.layout-large body.task-mail.action-none #layout-list > .pagenav a { margin: 0 2px; }

/* sidebar bottom: quota and the folder-actions "..." button side by side */
html.layout-large #layout-sidebar { position: relative; }
html.layout-large #layout-sidebar > .footer {
    display: flex; align-items: center; height: 40px; min-height: 40px;
    padding: 0 48px 0 16px; box-sizing: border-box; order: 3;
}
html.layout-large #layout-sidebar > .footer .quota-widget { flex: 1; min-width: 0; margin: 0; }
html.layout-large #layout-sidebar > .header {
    position: absolute; right: 8px; bottom: 0; width: 40px; height: 40px; min-height: 40px;
    padding: 0; justify-content: center; align-items: center; z-index: 5;
}
html.layout-large #messagelist-header .toolbar ul, html.layout-large #messagelist-header .toolbar li {
    display: flex; flex-direction: row; align-items: center; height: 48px; margin: 0; padding: 0; list-style: none;
}
html.layout-large #messagelist-header .toolbar li { height: 48px; position: static; }
html.layout-large #layout-sidebar > .header a.sidebar-menu {
    display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 1; padding: 0; margin: 0; border-radius: 50%;
}
html.layout-large #layout-sidebar > .header a.sidebar-menu:hover { background: var(--anb-hover); }
html.layout-large #layout-sidebar > .header a.sidebar-menu:before { line-height: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0; }