/**
 * CloudMail message-list foundation.
 *
 * This layer refines Roundcube's native list header, quick search, message
 * rows, and pagination for desktop and medium layouts. Commands, table roles,
 * message links, selection semantics, and phone presentation remain native.
 */

@media screen and (min-width: 769px) {
  #layout-list {
    color: var(--cm-color-text);
    background: var(--cm-color-surface) !important;
    border-right: 1px solid var(--cm-color-border) !important;
  }

  #messagelist-header {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    min-height: 58px;
    padding: 0 8px !important;
    color: var(--cm-color-text);
    background: var(--cm-color-surface) !important;
    border-bottom: 0 !important;
  }

  #messagelist-header .header-title {
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: var(--cm-color-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 58px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.layout-normal #messagelist-header .header-title {
    flex: 1 1 0 !important;
  }

  html.layout-large #toolbar-list-menu {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    width: auto !important;
    height: 57px;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.layout-large #toolbar-list-menu > li {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 57px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    overflow: visible !important;
  }

  #messagelist-header a.button,
  html.layout-large #toolbar-list-menu a {
    box-sizing: border-box;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cm-color-text-muted) !important;
    line-height: normal !important;
    text-align: center;
    border: 0 !important;
    border-radius: var(--cm-radius-control);
    background: transparent !important;
    overflow: visible !important;
    transition:
      color var(--cm-motion-fast) ease,
      background-color var(--cm-motion-fast) ease;
  }

  html.layout-large #toolbar-list-menu a,
  #messagelist-header a.button.toolbar-button,
  html.layout-normal #messagelist-header a.button.back-sidebar-button,
  html.layout-normal #messagelist-header a.button.toolbar-list-button {
    display: inline-flex !important;
  }

  html.layout-large #messagelist-header > a.toolbar-button.refresh {
    margin-left: auto !important;
  }

  #messagelist-header a.button:hover,
  html.layout-large #toolbar-list-menu a:hover {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface-hover) !important;
  }

  #messagelist-header a.button:focus-visible,
  html.layout-large #toolbar-list-menu a:focus-visible {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: 2px;
  }

  #messagelist-header a.disabled,
  html.layout-large #toolbar-list-menu a.disabled {
    opacity: 0.38;
  }

  #messagelist-header a.button .inner,
  html.layout-large #toolbar-list-menu a .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  #messagelist-header a.button::before,
  html.layout-large #toolbar-list-menu a::before {
    box-sizing: border-box;
    display: block;
    float: none !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: var(--cm-list-header-icon) center / contain no-repeat;
    mask: var(--cm-list-header-icon) center / contain no-repeat;
    font-size: 0 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  #toolbar-list-menu a.select {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/square-check-big.svg");
  }

  #toolbar-list-menu a.threads {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/messages-square.svg");
  }

  #toolbar-list-menu a.options {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/sliders-horizontal.svg");
  }

  #messagelist-header a.refresh {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/refresh-cw.svg");
  }

  #messagelist-header a.back-sidebar-button {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/folder.svg");
  }

  #messagelist-header a:is(.toolbar-list-button, .toolbar-menu-button) {
    --cm-list-header-icon: url("../assets/icons/ui/lucide/regular/ellipsis-vertical.svg");
  }

  #layout-list .searchbar {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 50px !important;
    padding: 7px 8px !important;
    color: var(--cm-color-text-muted);
    background: var(--cm-color-surface) !important;
    border-bottom: 1px solid var(--cm-color-border) !important;
  }

  #layout-list .searchbar form {
    position: relative;
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px !important;
  }

  #layout-list .searchbar form::before {
    position: absolute;
    z-index: 1;
    top: 9px;
    left: 9px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    content: "";
    pointer-events: none;
    background-color: var(--cm-color-text-muted);
    -webkit-mask: url("../assets/icons/ui/lucide/regular/search.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/search.svg") center / contain no-repeat;
  }

  #layout-list #mailsearchform {
    box-sizing: border-box;
    width: 100%;
    height: 36px !important;
    padding: 0 12px 0 38px !important;
    color: var(--cm-color-text) !important;
    font-size: 13px;
    line-height: 36px;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    outline: none;
    background: var(--cm-color-surface-subtle) !important;
    transition:
      border-color var(--cm-motion-fast) ease,
      background-color var(--cm-motion-fast) ease,
      box-shadow var(--cm-motion-fast) ease;
  }

  #layout-list #mailsearchform::placeholder {
    color: var(--cm-color-text-muted);
    opacity: 0.9;
  }

  #layout-list #mailsearchform:focus {
    border-color: var(--cm-color-focus) !important;
    background: var(--cm-color-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-color-focus) 18%, transparent);
  }

  #layout-list .searchbar a.button {
    box-sizing: border-box;
    position: relative;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cm-color-text-muted) !important;
    line-height: normal !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
  }

  #layout-list .searchbar a.button:is(.unread, .options) {
    display: inline-flex !important;
  }

  #layout-list .searchbar a.button:hover {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface-hover) !important;
  }

  #layout-list .searchbar a.button:focus-visible {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: 1px;
  }

  /* Native selected state, not hover, identifies the unread filter. */
  #layout-list .searchbar a.unread.selected {
    color: var(--cm-color-accent-strong) !important;
    background: var(--cm-color-accent-soft) !important;
  }

  /* Only the simple unread shortcut has a redundant reset. Keep it for text,
     dates, broader scopes and missing inventoried selector controls. Native
     deactivation sets ALL before removing the selected class after response. */
  body.task-mail:has(#searchmenu #searchfilter > option:is([value="UNSEEN"], [value="ALL"]):checked):has(#searchmenu #s_interval > option[value=""]:checked):has(#searchmenu #s_scope > option[value="base"]:checked)
    #layout-list .searchbar:has(#mailsearchform:placeholder-shown):has(> a.unread.selected) > a.reset {
    display: none !important;
  }

  #layout-list .searchbar a.button::before {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: var(--cm-search-icon) center / contain no-repeat;
    mask: var(--cm-search-icon) center / contain no-repeat;
    font-family: inherit !important;
    line-height: 1 !important;
  }

  #layout-list .searchbar a.button .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #layout-list .searchbar a.reset {
    --cm-search-icon: url("../assets/icons/ui/lucide/regular/x.svg");
  }

  /* Elastic shows reset as a block; center its paint without forcing display. */
  #layout-list .searchbar a.reset::before {
    position: absolute;
    top: 9px;
    left: 9px;
  }

  #layout-list .searchbar a.unread {
    --cm-search-icon: url("../assets/icons/ui/lucide/regular/mail.svg");
  }

  #layout-list .searchbar a.options {
    --cm-search-icon: url("../assets/icons/ui/lucide/regular/list-filter.svg");
  }

  #layout-list .searchbar a.search {
    --cm-search-icon: url("../assets/icons/ui/lucide/regular/search.svg");
  }

  /* Bounded list-options dialog; native modal position, resize and lifecycle
     are untouched. Do not restyle unrelated confirmations or preference forms. */
  body.task-mail .ui-dialog:has(#listoptions-menu) {
    color: var(--cm-color-text) !important;
    border: 1px solid var(--cm-color-border) !important;
    border-radius: var(--cm-radius-popover) !important;
    background: var(--cm-color-surface) !important;
    box-shadow: var(--cm-shadow-popover);
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) .ui-dialog-titlebar {
    padding: 14px 16px !important;
    color: inherit !important;
    border-bottom: 1px solid var(--cm-color-border) !important;
    background: transparent !important;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) .ui-dialog-title {
    color: inherit !important;
    font: 600 14px/22px var(--cm-font-sans);
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) :is(.ui-dialog-content, .ui-dialog-buttonpane) {
    color: inherit !important;
    background: transparent !important;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) .col-form-label {
    color: var(--cm-color-text-muted) !important;
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) select.custom-select {
    height: 36px !important;
    color: var(--cm-color-text) !important;
    border: 1px solid var(--cm-color-border) !important;
    border-radius: 8px !important;
    background-color: var(--cm-color-surface-subtle) !important;
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) .ui-dialog-buttonset {
    display: flex;
    gap: 8px;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 !important;
    color: var(--cm-color-text) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: var(--cm-color-surface-subtle) !important;
    box-shadow: none !important;
    font: 600 13px/20px var(--cm-font-sans);
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button.save {
    --cm-list-dialog-icon: url("../assets/icons/ui/lucide/regular/check.svg");
    color: var(--cm-color-surface) !important;
    background: var(--cm-color-accent-strong) !important;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button.cancel {
    --cm-list-dialog-icon: url("../assets/icons/ui/lucide/regular/x.svg");
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button.ui-dialog-titlebar-close {
    /* Native absolute top/right ownership; fill the titlebar to center paint. */
    --cm-list-dialog-icon: url("../assets/icons/ui/lucide/regular/x.svg");
    width: 40px !important;
    height: 100% !important;
    background: transparent !important;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button:is(.save, .cancel, .ui-dialog-titlebar-close)::before {
    display: block !important;
    float: none !important;
    flex: 0 0 calc(var(--cm-dropdown-icon-size) * 1px);
    width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    margin: 0 !important;
    content: "" !important;
    background: currentColor;
    -webkit-mask: var(--cm-list-dialog-icon) center / contain no-repeat;
    mask: var(--cm-list-dialog-icon) center / contain no-repeat;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) button:hover {
    border-color: var(--cm-color-text-muted) !important;
  }

  body.task-mail .ui-dialog:has(#listoptions-menu) :is(button, select.custom-select):focus-visible {
    box-shadow: none !important;
    outline: 2px solid var(--cm-color-focus) !important;
    outline-offset: 2px;
  }

  html:not(.dark-mode) body.task-mail .ui-dialog:has(#listoptions-menu) select.custom-select:focus-visible {
    outline-offset: -2px;
  }

  /* Inventoried native search form only; no list-settings/upload form spillover.
     Elastic retains expansion, checkbox state, scrolling and search commands. */
  body.task-mail #searchmenu {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface) !important;
  }

  body.task-mail #searchmenu .proplist > li {
    min-height: 36px;
    color: var(--cm-color-text);
  }

  body.task-mail #searchmenu .custom-control-label {
    color: var(--cm-color-text) !important;
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail #searchmenu .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--cm-color-accent-strong) !important;
    background-color: var(--cm-color-accent-strong) !important;
  }

  body.task-mail #searchmenu .input-group {
    align-items: center;
    min-width: 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--cm-color-border);
  }

  body.task-mail #searchmenu .input-group-prepend {
    flex: 0 0 76px;
  }

  body.task-mail #searchmenu .input-group-text {
    padding: 8px 0 !important;
    color: var(--cm-color-text-muted) !important;
    border: 0 !important;
    background: transparent !important;
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail #searchmenu select.custom-select {
    min-width: 0;
    height: 36px !important;
    padding-left: 8px !important;
    color: var(--cm-color-text) !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    font: 500 13px/20px var(--cm-font-sans);
  }

  body.task-mail #searchmenu :is(select.custom-select, a.dropdown, button.search):focus-visible {
    box-shadow: none !important;
    outline: 2px solid var(--cm-color-focus) !important;
    outline-offset: -2px;
  }

  body.task-mail #searchmenu a.dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    color: var(--cm-color-text-muted) !important;
    border-radius: 8px;
  }

  body.task-mail #searchmenu a.dropdown:hover {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface-hover);
  }

  body.task-mail #searchmenu a.dropdown::before,
  body.task-mail #searchmenu button.search::before {
    display: block !important;
    float: none !important;
    flex: 0 0 calc(var(--cm-dropdown-icon-size) * 1px);
    width: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    height: calc(var(--cm-dropdown-icon-size) * 1px) !important;
    margin: 0 !important;
    content: "" !important;
    background: currentColor;
    -webkit-mask: var(--cm-search-form-icon) center / contain no-repeat;
    mask: var(--cm-search-form-icon) center / contain no-repeat;
  }

  body.task-mail #searchmenu a.dropdown {
    --cm-search-form-icon: url("../assets/icons/ui/lucide/regular/chevron-down.svg");
  }

  /* Read Elastic's real sublist visibility, without inventing expanded state. */
  body.task-mail #searchmenu .with-sublist:has(> .proplist:not(.d-none)) > a.dropdown::before {
    transform: rotate(180deg);
  }

  body.task-mail #searchmenu button.search {
    --cm-search-form-icon: url("../assets/icons/ui/lucide/regular/search.svg");
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: var(--cm-color-accent-strong) !important;
    border: 1px solid transparent !important;
    border-radius: var(--cm-radius-control) !important;
    background: var(--cm-color-accent-soft) !important;
    box-shadow: none !important;
    font: 600 13px/20px var(--cm-font-sans);
  }

  body.task-mail #searchmenu button.search:hover {
    border-color: var(--cm-color-accent-strong) !important;
  }

  #messagelist {
    box-sizing: border-box;
    width: 100% !important;
    padding: 6px 0 !important;
    color: var(--cm-color-text);
    background: var(--cm-color-surface) !important;
  }

  #messagelist tr.message {
    box-sizing: border-box;
    position: relative;
    display: flex !important;
    width: calc(100% - 12px) !important;
    min-height: 62px;
    margin: 2px 6px !important;
    overflow: hidden;
    color: var(--cm-color-text);
    border: 0 !important;
    border-radius: var(--cm-radius-row);
    background: transparent !important;
    transition:
      color var(--cm-motion-fast) ease,
      background-color var(--cm-motion-fast) ease;
  }

  #messagelist tr.message:hover {
    background: var(--cm-color-surface-hover) !important;
  }

  #messagelist tr.message.selected,
  #messagelist tr.message.selected:hover {
    background: var(--cm-color-accent-soft) !important;
  }

  /* Elastic paints selected cells after the row; let the CloudMail row token show through. */
  #messagelist tr.message.selected > td {
    background: transparent !important;
  }

  #messagelist tr.message:focus-within {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: -2px;
  }

  /* Keep Roundcube's keyboard row locator without Elastic's detached left stripe. */
  #messagelist-content:focus-visible #messagelist tr.message.focused {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: -2px;
  }

  #messagelist tr.message > td.selection {
    display: none !important;
  }

  #messagelist tr.message > td.subject {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 22px 22px;
    column-gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: 62px !important;
    padding: 9px 8px 9px 12px !important;
    color: var(--cm-color-text);
    line-height: normal !important;
    border-left: 0 !important;
  }

  #messagelist tr.message > td.subject > .fromto {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--cm-color-text) !important;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messagelist tr.message.unread > td.subject > .fromto {
    font-weight: 700;
  }

  #messagelist tr.message > td.subject > .date {
    grid-column: 2;
    grid-row: 1;
    color: var(--cm-color-text-muted) !important;
    font-size: 11.5px !important;
    font-variant-numeric: tabular-nums;
    line-height: 22px;
    white-space: nowrap;
  }

  #messagelist tr.message > td.subject > .size {
    display: none !important;
  }

  #messagelist tr.message > td.subject > span.subject {
    display: flex !important;
    align-items: center;
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    color: var(--cm-color-text-muted) !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 22px;
  }

  #messagelist tr.message > td.subject > span.subject a {
    min-width: 0;
    overflow: hidden;
    color: inherit !important;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #messagelist tr.message.unread > td.subject > span.subject {
    color: var(--cm-color-text) !important;
    font-weight: 600;
  }

  #messagelist tr.message .msgicon.status {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/mail-open.svg");
    --cm-message-read-color: #777777;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 22px;
    margin: 0 6px 0 0 !important;
    color: var(--cm-message-read-color);
    cursor: pointer;
  }

  html.dark-mode #messagelist tr.message .msgicon.status {
    --cm-message-read-color: #ababab;
  }

  #messagelist tr.message .msgicon.status::before {
    /* Replace Elastic's circle without changing its native status element. */
    display: block !important;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    content: "" !important;
    color: inherit !important;
    border: 0;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--cm-message-status-icon) center / contain no-repeat;
    mask: var(--cm-message-status-icon) center / contain no-repeat;
    font-family: inherit !important;
  }

  #messagelist tr.message .msgicon.status.unread,
  #messagelist tr.message .msgicon.status.unreadchildren {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/mail.svg");
    color: var(--cm-color-accent);
  }

  #messagelist tr.message .msgicon.status.replied,
  #messagelist tr.message .msgicon.status.forwarded,
  #messagelist tr.message.deleted .msgicon.status {
    flex-basis: 18px;
    width: 18px;
    color: var(--cm-color-text-muted);
  }

  #messagelist tr.message .msgicon.status.replied {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/reply.svg");
  }

  #messagelist tr.message .msgicon.status.forwarded {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/forward.svg");
  }

  #messagelist tr.message .msgicon.status.replied.forwarded {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/reply.svg");
    flex-basis: 22px;
    width: 22px;
  }

  #messagelist tr.message .msgicon.status::after {
    display: none !important;
    content: "" !important;
  }

  #messagelist tr.message .msgicon.status.replied.forwarded::after {
    display: block !important;
    position: absolute;
    left: 9px;
    width: 13px;
    height: 13px;
    margin: 0 !important;
    background: currentColor;
    opacity: 0.7;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/forward.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/forward.svg") center / contain no-repeat;
  }

  #messagelist tr.message.deleted > td.subject .msgicon.status {
    --cm-message-status-icon: url("../assets/icons/ui/lucide/regular/ban.svg");
  }

  #messagelist tr.message.deleted > td.subject .msgicon.status::after {
    display: none !important;
  }

  #messagelist tr.message > td.flags {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 46px;
    width: 46px !important;
    height: 62px !important;
    padding: 0 6px 0 0 !important;
    color: var(--cm-color-text-muted);
  }

  #messagelist tr.message > td.flags > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    margin: 0 !important;
  }

  #messagelist tr.message > td.flags .flag > span::before {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/star.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/star.svg") center / contain no-repeat;
    font-family: inherit !important;
  }

  #messagelist tr.message > td.flags .flag > span.unflagged {
    color: transparent;
  }

  #messagelist tr.message:hover > td.flags .flag > span.unflagged,
  #messagelist tr.message:focus-within > td.flags .flag > span.unflagged {
    color: var(--cm-color-text-muted);
  }

  #messagelist tr.message > td.flags .flag > span.flagged {
    color: var(--cm-color-warning);
  }

  #messagelist tr.message > td.flags .flag > span.flagged::before {
    -webkit-mask: url("../assets/icons/ui/lucide/derived/star-filled.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/derived/star-filled.svg") center / contain no-repeat;
  }

  #messagelist tr.message > td.flags > span.attachment > span.attachment::before {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/paperclip.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/paperclip.svg") center / contain no-repeat;
    font-family: inherit !important;
  }

  /* The nested Elastic attachment span can inherit an unrelated warning color. */
  #messagelist tr.message > td.flags > span.attachment > span.attachment {
    color: var(--cm-color-text-muted) !important;
  }

  #layout-list > .footer.pagenav {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    gap: 2px;
    height: 42px !important;
    padding: 5px 6px !important;
    color: var(--cm-color-text-muted);
    background: var(--cm-color-surface) !important;
    border-top: 1px solid var(--cm-color-border) !important;
  }

  #layout-list > .footer.pagenav > a {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cm-color-text-muted) !important;
    line-height: normal !important;
    border-radius: 8px;
    background: transparent !important;
  }

  #layout-list > .footer.pagenav > a:not(.disabled):hover {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface-hover) !important;
  }

  #layout-list > .footer.pagenav > a:focus-visible {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: 1px;
  }

  #layout-list > .footer.pagenav > a.disabled {
    opacity: 0.36;
  }

  #layout-list > .footer.pagenav > a::before {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: var(--cm-pagination-icon) center / contain no-repeat;
    mask: var(--cm-pagination-icon) center / contain no-repeat;
    font-family: inherit !important;
  }

  #layout-list > .footer.pagenav > a .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #layout-list > .footer.pagenav > a.firstpage {
    --cm-pagination-icon: url("../assets/icons/ui/lucide/regular/chevrons-left.svg");
  }

  #layout-list > .footer.pagenav > a.prevpage {
    --cm-pagination-icon: url("../assets/icons/ui/lucide/regular/chevron-left.svg");
  }

  #layout-list > .footer.pagenav > a.nextpage {
    --cm-pagination-icon: url("../assets/icons/ui/lucide/regular/chevron-right.svg");
  }

  #layout-list > .footer.pagenav > a.lastpage {
    --cm-pagination-icon: url("../assets/icons/ui/lucide/regular/chevrons-right.svg");
  }

  #layout-list > .footer.pagenav .pagenav-text {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    overflow: hidden;
    color: var(--cm-color-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #layout-list > .footer.pagenav .rcpagejumper {
    box-sizing: border-box;
    flex: 0 0 36px;
    width: 36px !important;
    height: 28px !important;
    padding: 0 4px !important;
    color: var(--cm-color-text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 28px;
    text-align: center;
    border: 1px solid var(--cm-color-border) !important;
    border-radius: 7px;
    background: var(--cm-color-surface-subtle) !important;
  }
}

/* Roundcube's normal layout benefits from three lines without rewriting dates. */
@media screen and (min-width: 769px) {
  html.layout-normal #messagelist tr.message,
  html.layout-normal #messagelist tr.message > td.flags {
    min-height: 78px;
  }

  html.layout-normal #messagelist tr.message > td.subject {
    grid-template-rows: 21px 22px 17px;
    height: 78px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  html.layout-normal #messagelist tr.message > td.subject > .fromto {
    grid-column: 1 / 3;
    line-height: 21px;
  }

  html.layout-normal #messagelist tr.message > td.subject > span.subject {
    grid-column: 1 / 3;
  }

  html.layout-normal #messagelist tr.message > td.subject > .date {
    grid-column: 1 / 3;
    grid-row: 3;
    font-size: 12px !important;
    line-height: 17px;
  }

  html.layout-normal #messagelist tr.message > td.flags {
    height: 78px !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  /* A second footer row keeps every native page command and the full count. */
  #layout-list > .footer.pagenav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 28px 30px;
    gap: 2px;
    height: 68px !important;
    padding: 4px 6px !important;
  }

  #layout-list > .footer.pagenav > a:is(.firstpage, .prevpage, .nextpage, .lastpage) {
    grid-row: 2;
    justify-self: center;
  }

  #layout-list > .footer.pagenav > a.firstpage {
    grid-column: 1;
  }

  #layout-list > .footer.pagenav > a.prevpage {
    grid-column: 2;
  }

  #layout-list > .footer.pagenav > a.nextpage {
    grid-column: 3;
  }

  #layout-list > .footer.pagenav > a.lastpage {
    grid-column: 4;
  }

  #layout-list > .footer.pagenav .pagenav-text {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 28px;
    line-height: 28px;
    text-align: left;
  }

  #layout-list > .footer.pagenav .rcpagejumper {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }
}

@media screen and (min-width: 769px) and (prefers-reduced-motion: reduce) {
  #messagelist tr.message,
  #messagelist-header a.button,
  html.layout-large #toolbar-list-menu a,
  #layout-list #mailsearchform {
    transition: none;
  }
}

/* Aligned light flat-list rows. Keep native cells, status nodes and commands.
 * Thread controls, compact/dark and unknown flag structures retain their layout.
 */
@media screen and (min-width: 769px) {
  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message {
    --cm-list-status-indent: 24px;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message:not(.deleted):has(.msgicon.status.replied.forwarded) {
    --cm-list-status-indent: 28px;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.subject > .fromto {
    padding: 0 0 0 var(--cm-list-status-indent) !important;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message:not(.unread):not(.unreadchildren) > td.subject > .fromto {
    font-weight: 400;
  }

  /* Elastic gives the nested sender/subject spans 27/26px line boxes. */
  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.subject :is(.fromto, span.subject) :is(span, a) {
    line-height: inherit !important;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.subject > span.subject > a {
    display: block;
    height: 22px;
    line-height: 22px !important;
  }

  /* Dates remain available on hover; preserve the native sort-size exception. */
  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)):not(.sort-size) tr.message > td.subject > .date {
    display: block !important;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) {
    display: grid !important;
    position: static !important;
    inset: auto;
    grid-template-columns: 18px;
    grid-template-rows: 22px 22px;
    align-content: start;
    align-items: center;
    justify-content: start;
    gap: 0;
    flex: 0 0 28px;
    width: 28px !important;
    padding: 9px 6px 9px 4px !important;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) > span.flag {
    grid-column: 1;
    grid-row: 2;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) > span.attachment {
    grid-column: 1;
    grid-row: 1;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) > span,
  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) > span > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    line-height: 22px;
  }

  html.layout-normal:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags:has(> .flag):not(:has(> :not(.flag, .attachment))) {
    grid-template-rows: 21px 22px 17px;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  html.layout-normal:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.subject > .date {
    padding-left: var(--cm-list-status-indent);
  }

  /* Smaller glyphs, unchanged 18x22 wrappers and native MIME semantics. */
  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags > span.attachment > span:is(.attachment, .report)::before {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 !important;
    content: "" !important;
    background-color: currentColor;
    -webkit-mask: url("../assets/icons/ui/lucide/regular/paperclip.svg") center / contain no-repeat;
    mask: url("../assets/icons/ui/lucide/regular/paperclip.svg") center / contain no-repeat;
  }

  html:not(.dark-mode) body.task-mail #messagelist:not(:has(td.threads)) tr.message > td.flags > span.attachment > span.report::before {
    -webkit-mask-image: url("../assets/icons/ui/lucide/regular/file-text.svg");
    mask-image: url("../assets/icons/ui/lucide/regular/file-text.svg");
  }
}