/*
 * NetMail — a clean, Gmail-style theme on top of Roundcube's Elastic skin.
 * Customer colours arrive as --nm-brand / --nm-accent from the tenant_brand plugin.
 */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/material-symbols.woff2?v=4) format('woff2');
}

:root {
  --nm-brand: #0b57d0;
  --nm-accent: #0b57d0;
  --nm-bg: #f6f8fc;
  --nm-surface: #ffffff;
  --nm-text: #1f1f1f;
  --nm-text-2: #444746;
  --nm-muted: #5e5e5e;
  --nm-divider: #eceff3;
  --nm-hover: rgba(68, 71, 70, .08);
  --nm-ink: color-mix(in srgb, var(--nm-brand) 70%, #000);
  --nm-sel: color-mix(in srgb, var(--nm-accent) 20%, #fff);
  --nm-compose: color-mix(in srgb, var(--nm-accent) 26%, #fff);
  --nm-row-read: #f2f6fc;
  --nm-row-sel: color-mix(in srgb, var(--nm-accent) 16%, #fff);
  --nm-search: color-mix(in srgb, var(--nm-accent) 7%, #edf1f7);
  --nm-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --nm-font-ui: 'Google Sans', Roboto, 'Segoe UI', Arial, sans-serif;
  --nm-account: #e9eef6;
  --nm-account-btn: #ffffff;
  --nm-account-btn-hover: #f1f3f4;
  --nm-bar: #f2f6fc;
  --nm-check-border: #5f6368;
  --nm-star: #aaaaaa;
}

/* Gmail-style dark theme (Elastic sets html.dark-mode from the user's choice or system setting) */
html.dark-mode {
  --nm-bg: #131314;
  --nm-surface: #1e1f20;
  --nm-text: #e3e3e3;
  --nm-text-2: #c4c7c5;
  --nm-muted: #a8abaf;
  --nm-divider: #333537;
  --nm-hover: rgba(227, 227, 227, .08);
  --nm-ink: color-mix(in srgb, var(--nm-accent) 35%, #ffffff);
  --nm-sel: color-mix(in srgb, var(--nm-accent) 32%, #131314);
  --nm-compose: color-mix(in srgb, var(--nm-accent) 38%, #131314);
  --nm-row-read: #1b1c1d;
  --nm-row-sel: color-mix(in srgb, var(--nm-accent) 26%, #1e1f20);
  --nm-search: #282a2c;
  --nm-shadow: 0 1px 3px 0 rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .3);
  --nm-account: #28292a;
  --nm-account-btn: #1e1f20;
  --nm-account-btn-hover: #333537;
  --nm-bar: #282a2c;
  --nm-check-border: #c4c7c5;
  --nm-star: #8e918f;
  color-scheme: dark;
}

/* ---------- icons ---------- */
.ms,
#mailboxlist li.mailbox > a:before,
#messagelist span.flag span:before,
#messagelist span.attachment span:before {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'opsz' 24;
}

@media (min-width: 1024px) {
#layout-list .nm-pager a:before,
#layout-menu #taskmenu a:before,
#layout .header .menu.toolbar .dropbutton a.dropdown:before,
#layout .header .menu a.select:before,
#layout .header .menu a.threads:before,
#layout .header .menu a.options:before,
#layout .header a.refresh:before,
#layout .header .menu a.reply:before,
#layout .header .menu a.reply-all:before,
#layout .header .menu a.forward:before,
#layout .header .menu a.delete:before,
#layout .header .menu a.archive:before,
#layout .header .menu a.junk:before,
#layout .header .menu a.markmessage:before,
#layout .header .menu a.more:before,
#layout .header .menu a.print:before,
#layout .header .menu a.move:before,
#layout .header .menu a.download:before,
#layout .header .menu a.extwin:before,
#layout .header .menu a.prev:before,
#layout .header .menu a.next:before,
#layout .header .menu a.compose:before,
#layout .header .menu a.create:before,
#layout .header .menu a.import:before,
#layout .header .menu a.export:before,
#layout .header .menu a.search:before,
#layout .header .menu a.send:before,
#layout .header .menu a.save:before,
#layout .header .menu a.signature:before,
#layout .header .menu a.responses:before,
#layout .header .menu a.spellcheck:before,
#layout .header .menu a.delete-rule:before,
#layout .header .menu a.delete-folder:before,
#layout .header .menu a.attach:before,
#layout .header .menu a.undo:before,
#layout .header a.back-list-button:before,
#layout .pagenav a.firstpage:before,
#layout .pagenav a.prevpage:before,
#layout .pagenav a.nextpage:before,
#layout .pagenav a.lastpage:before,
#nm-search-slot .searchbar a.button:before,
#layout-sidebar > .header a.sidebar-menu:before {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'opsz' 24;
  }
  
}
.ms { font-size: 24px; line-height: 1; display: inline-block; }

body { background: var(--nm-bg); }
html.iframe body { background: var(--nm-surface); }

/* ---------- desktop shell (Gmail layout) ---------- */
#nm-topbar, #nm-account { display: none; }

@media (min-width: 1024px) {
  #layout { flex-wrap: wrap; background: var(--nm-bg); }
  #layout > div { height: calc(100% - 64px); }

  #nm-topbar {
    display: flex;
    align-items: center;
    flex: 0 0 100%;
    height: 64px;
    padding: 8px 8px 8px 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
  }
  #nm-brand { display: flex; align-items: center; gap: 4px; width: 322px; flex: 0 0 322px; }
  #nm-home { display: flex; align-items: center; height: 48px; padding-left: 4px; }
  #nm-logo { max-height: 40px; max-width: 220px; width: auto; height: auto; }
  #nm-search-slot { flex: 0 1 720px; min-width: 0; }
  #nm-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-right: 8px; }

  .nm-icon-btn {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--nm-text-2); cursor: pointer; text-decoration: none !important;
  }
  .nm-icon-btn:hover { background: var(--nm-hover); color: var(--nm-text); }
  #nm-avatar {
    width: 32px; height: 32px; margin: 0 8px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--nm-brand); color: #fff; font: 500 15px/1 var(--nm-font-ui);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  #nm-avatar:hover { box-shadow: 0 0 0 4px var(--nm-hover); }

  #nm-account {
    position: absolute; top: 60px; right: 16px; width: 360px;
    background: var(--nm-account); border-radius: 28px; padding: 16px 16px 20px;
    box-shadow: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);
    text-align: center; font-family: var(--nm-font-ui); color: var(--nm-text);
  }
  #nm-account:not([hidden]) { display: block; }
  #nm-account-email { font-size: 14px; font-weight: 500; margin: 4px 0 16px; }
  #nm-account-initial {
    width: 80px; height: 80px; margin: 0 auto 12px; border-radius: 50%;
    background: var(--nm-brand); color: #fff; font-size: 40px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  #nm-account-hello { font-size: 22px; margin-bottom: 16px; }
  .nm-account-btn {
    display: inline-block; padding: 9px 24px; border: 1px solid #747775; border-radius: 100px;
    color: var(--nm-ink) !important; font-weight: 500; text-decoration: none !important;
  }
  .nm-account-btn:hover { background: var(--nm-hover); }
  #nm-account-links { display: flex; gap: 4px; margin-top: 16px; }
  #nm-account-links a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--nm-account-btn); padding: 14px; color: var(--nm-text) !important; text-decoration: none !important; font-weight: 500;
  }
  #nm-account-links a:first-child { border-radius: 100px 4px 4px 100px; }
  #nm-account-links a:last-child { border-radius: 4px 100px 100px 4px; }
  #nm-account-links a:hover { background: var(--nm-account-btn-hover); }
  #nm-account-links .ms { font-size: 20px; }

  /* search pill */
  #layout-list > .searchbar { visibility: hidden; }
  #nm-search-slot .searchbar {
    position: static !important; display: flex !important; align-items: center;
    visibility: visible; width: 100% !important; height: 48px; margin: 0; padding: 0 6px;
    border: 0; border-radius: 24px; background: var(--nm-search); box-sizing: border-box;
    transition: background .2s, box-shadow .2s; top: auto; left: auto; right: auto;
  }
  #nm-search-slot .searchbar:focus-within { background: var(--nm-surface); box-shadow: var(--nm-shadow); }
  #nm-search-slot .searchbar form { order: 2; flex: 1; margin: 0; display: block; }
  #nm-search-slot .searchbar form:before { display: none !important; }
  #nm-search-slot .searchbar form:has(input:placeholder-shown) ~ a.reset { display: none !important; }
  #nm-search-slot .searchbar input {
    width: 100% !important; height: 46px; border: 0 !important; background: transparent !important;
    box-shadow: none !important; outline: 0; padding: 0 8px !important; font: 16px var(--nm-font-ui); color: var(--nm-text);
  }
  #nm-search-slot .searchbar input::placeholder { color: var(--nm-text-2); }
  #nm-search-slot .searchbar a.button {
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%; padding: 0; margin: 0;
    display: flex !important; align-items: center; justify-content: center; color: var(--nm-text-2); position: static;
  }
  #nm-search-slot .searchbar a.button:hover { background: var(--nm-hover); }
  #nm-search-slot .searchbar a.button:before { font-size: 24px; line-height: 40px; margin: 0; width: auto; }
  #nm-search-slot .searchbar a.button span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #nm-search-slot .searchbar a.search { order: 1; }
  #nm-search-slot .searchbar a.search:before { content: 'search'; }
  #nm-search-slot .searchbar a.reset { order: 3; }
  #nm-search-slot .searchbar a.reset:before { content: 'close'; }
  #nm-search-slot .searchbar a.unread { order: 4; }
  #nm-search-slot .searchbar a.unread:before { content: 'mark_email_unread'; }
  #nm-search-slot .searchbar a.unread.selected { color: var(--nm-ink); background: var(--nm-sel); }
  #nm-search-slot .searchbar a.options { order: 5; }
  #nm-search-slot .searchbar a.options:before { content: 'tune'; }

  /* ---------- app rail ---------- */
  #layout-menu {
    width: 80px; min-width: 80px; flex: 0 0 80px;
    background: transparent !important; border: 0 !important; padding-top: 4px;
  }
  #layout-menu .popover-header { display: none !important; }
  #layout-menu #taskmenu { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
  #layout-menu #taskmenu > a,
  #layout-menu #taskmenu .action-buttons a,
  #layout-menu #taskmenu .special-buttons a {
    display: flex !important; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; height: auto !important; min-height: 0; padding: 4px 0 12px !important;
    background: none !important; border: 0 !important; color: var(--nm-text-2) !important;
    font: 500 12px/16px var(--nm-font-ui); text-align: center;
  }
  #layout-menu #taskmenu a span.inner { font-size: 12px; font-weight: 500; display: block; }
  #layout-menu #taskmenu a:before {
    display: block; width: 56px !important; height: 32px !important; line-height: 32px; margin: 0 auto !important;
    border-radius: 16px; font-size: 24px !important; text-align: center; transition: background-color .15s;
    float: none !important; position: static !important;
  }
  #layout-menu #taskmenu a:hover:before { background: var(--nm-hover); }
  #layout-menu #taskmenu a.selected { color: var(--nm-text) !important; font-weight: 700; }
  #layout-menu #taskmenu a.selected span.inner { font-weight: 700; }
  #layout-menu #taskmenu a.selected:before {
    background: var(--nm-sel); color: var(--nm-ink); font-variation-settings: 'FILL' 1, 'opsz' 24;
  }
  #layout-menu #taskmenu .special-buttons { margin-top: auto; }
  #layout-menu #taskmenu .special-buttons a.about,
  #layout-menu #taskmenu .special-buttons a.logout,
  #layout-menu #taskmenu .special-buttons a.theme { display: none !important; }
  #layout-menu #taskmenu a.compose:before { content: 'edit'; }
  #layout-menu #taskmenu a.mail:before { content: 'mail'; }
  #layout-menu #taskmenu a.contacts:before { content: 'contacts'; }
  #layout-menu #taskmenu a.settings:before { content: 'settings'; }
  #layout-menu #taskmenu a.calendar:before, #layout-menu #taskmenu a.button-calendar:before { content: 'calendar_month'; }
  #layout-menu #taskmenu a.logout:before { content: 'logout'; }
  #layout-menu #taskmenu a.about:before { content: 'info'; }

  /* Gmail-style Compose button above the folders */
  body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose {
    position: fixed; top: 72px; left: 88px; z-index: 6;
    flex-direction: row !important; gap: 12px; width: auto; height: 56px !important; min-width: 142px;
    padding: 0 24px 0 16px !important; border-radius: 16px;
    background: var(--nm-compose) !important; color: var(--nm-ink) !important;
    font: 500 14px/56px var(--nm-font-ui); transition: box-shadow .15s;
  }
  body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose:hover { box-shadow: var(--nm-shadow); }
  body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose:before {
    width: 24px !important; height: 24px !important; line-height: 24px; background: none !important; margin: 0 !important;
  }
  body.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose span.inner { font-size: 14px; font-weight: 500; }
  body.nm-nav-collapsed.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose { min-width: 56px; width: 56px; padding: 0 16px !important; }
  body.nm-nav-collapsed.task-mail.action-none #layout-menu #taskmenu .action-buttons a.compose span.inner { display: none; }

  /* ---------- folder / section sidebar ---------- */
  #layout #layout-sidebar {
    flex: 0 0 256px !important; width: 256px; max-width: 256px; min-width: 0;
    background: transparent !important; border: 0 !important;
  }
  body.nm-nav-collapsed.task-mail #layout #layout-sidebar { flex-basis: 72px !important; width: 72px; max-width: 72px; overflow: hidden; }
  body.nm-nav-collapsed.task-mail #mailboxlist li > a { font-size: 0 !important; }
  body.nm-nav-collapsed.task-mail #mailboxlist li .unreadcount,
  body.nm-nav-collapsed.task-mail #layout-sidebar .footer { display: none; }
  #layout-sidebar > .header {
    background: transparent !important; border: 0 !important; justify-content: flex-start !important;
    padding: 0 8px 0 16px; font: 400 18px/56px var(--nm-font-ui); height: 56px; min-height: 56px; color: var(--nm-text);
  }
  #layout-sidebar > .header .header-title { margin: 0 !important; text-align: left !important; }
  body.task-mail.action-none #layout-sidebar > .header { height: 72px; min-height: 72px; }
  body.task-mail.action-none #layout-sidebar > .header .header-title { visibility: hidden; }
  #layout-sidebar > .header a.button { color: var(--nm-text-2); border-radius: 50%; width: 40px; height: 40px; align-self: center; padding: 0; }
  #layout-sidebar > .header a.button:hover { background: var(--nm-hover); }
  #layout-sidebar > .header a.sidebar-menu:before { content: 'more_vert'; font-size: 20px; line-height: 40px; }
  #layout-sidebar > .footer { background: transparent !important; border: 0 !important; color: var(--nm-muted); font-weight: 400; }

  #layout-sidebar .listing li,
  #layout-sidebar .listing li.selected { background: transparent !important; border: 0 !important; }
  #layout-sidebar .listing li > a {
    border-radius: 0 16px 16px 0; margin-right: 16px; width: auto !important; box-sizing: border-box; color: var(--nm-text) !important;
    min-height: 32px; line-height: 32px !important; font-size: 14px; border: 0 !important;
  }
  #layout-sidebar .listing li > a:hover { background: var(--nm-hover); }
  #layout-sidebar .listing li.selected > a {
    background: var(--nm-sel) !important; color: var(--nm-ink) !important; font-weight: 700;
  }
  #layout-sidebar .listing li.selected > a:before { color: var(--nm-ink) !important; font-variation-settings: 'FILL' 1, 'opsz' 24; }
  #layout-sidebar .listing li .unreadcount { background: none !important; color: inherit !important; font-weight: 700; font-size: 12px; }
  #mailboxlist li.unread > a { font-weight: 700; }
  #mailboxlist li.mailbox > a:before { content: 'folder'; font-size: 20px !important; color: var(--nm-text-2); }
  #mailboxlist li.mailbox.inbox > a:before { content: 'inbox'; }
  #mailboxlist li.mailbox.sent > a:before { content: 'send'; }
  #mailboxlist li.mailbox.drafts > a:before { content: 'draft'; }
  #mailboxlist li.mailbox.junk > a:before { content: 'report'; }
  #mailboxlist li.mailbox.trash > a:before { content: 'delete'; }
  #mailboxlist li.mailbox.archive > a:before { content: 'archive'; }

  /* ---------- the white card: list + content ---------- */
  #layout-list {
    background: var(--nm-surface) !important; border: 0 !important;
    border-radius: 16px 0 0 16px; margin-bottom: 16px; height: calc(100% - 80px) !important;
    flex: 4 1 0; max-width: 46%; min-width: 380px; overflow: hidden;
  }
  #layout-content {
    background: var(--nm-surface) !important;
    border-radius: 0 16px 16px 0; margin: 0 16px 16px 0; height: calc(100% - 80px) !important;
    border-left: 1px solid var(--nm-divider); overflow: hidden;
  }
  #layout-list.hidden + #layout-content,
  #layout:not(:has(> #layout-list)) > #layout-content,
  #layout:has(> #layout-list[style*="none"]) > #layout-content { border-radius: 16px; border-left: 0; }

  #layout-list > .header,
  #layout-content > .header {
    background: transparent !important; border-bottom: 1px solid var(--nm-divider) !important;
    justify-content: flex-start !important; height: 48px; min-height: 48px; line-height: 48px; padding: 0 8px;
    font-family: var(--nm-font-ui); color: var(--nm-text);
  }
  #layout-list > .header .header-title { display: none; }
  #layout-content > .header .header-title { text-align: left; margin: 0 8px; flex: 0 1 auto; font-weight: 400; font-size: 16px; }
  #layout-content > .footer, #layout-list > .footer {
    background: transparent !important; border-top: 1px solid var(--nm-divider) !important; color: var(--nm-muted); font-weight: 400;
  }

  /* toolbars: icon-only round buttons with tooltips */
  #layout .header .menu.toolbar { display: flex; align-items: center; margin: 0 !important; flex: 0 1 auto; justify-content: flex-start; }
  #layout-content > .header .menu.toolbar { flex: 1 1 auto; }
  #layout .header .menu.toolbar li { height: auto; }
  #layout .header .menu.toolbar a,
  #layout .header > a.button.icon {
    width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
    padding: 0 !important; margin: 4px 2px; border-radius: 50%; text-align: center; position: relative;
    color: var(--nm-text-2) !important; background: none;
  }
  #layout .header .menu.toolbar a:not(.disabled):hover,
  #layout .header > a.button.icon:hover { background: var(--nm-hover) !important; }
  #layout .header .menu.toolbar a.disabled { opacity: .38; }
  #layout .header .menu.toolbar a span.inner,
  #layout .header > a.button.icon span.inner {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #layout .header .menu.toolbar a:before,
  #layout .header > a.button.icon:before {
    font-size: 20px !important; line-height: 40px; height: 40px !important; width: auto !important; margin: 0 !important; display: block;
  }
  /* phone/tablet-only buttons stay hidden on desktop */
  #layout .header a.task-menu-button,
  #layout .header a.back-sidebar-button,
  #layout .header a.toolbar-menu-button,
  #layout .header a.toolbar-list-button { display: none !important; }
  body.task-mail.action-none #layout-content > .header a.back-list-button { display: none !important; }
  #layout .header .menu.toolbar .dropbutton { display: flex; align-items: center; }
  #layout .header .menu.toolbar .dropbutton a.dropdown { width: 20px !important; min-width: 20px !important; margin-left: -6px; border-radius: 10px; }
  #layout .header .menu.toolbar .dropbutton a.dropdown:before { content: 'expand_more'; font-size: 18px !important; }
  #layout .header .menu.toolbar .spacer { width: 12px; }

  #layout .header .menu a.select:before { content: 'check_box_outline_blank'; }
  #layout .header .menu a.threads:before { content: 'forum'; }
  #layout .header .menu a.options:before { content: 'tune'; }
  #layout .header a.refresh:before { content: 'refresh'; }
  #layout .header .menu a.reply:before { content: 'reply'; }
  #layout .header .menu a.reply-all:before { content: 'reply_all'; }
  #layout .header .menu a.forward:before { content: 'forward'; }
  #layout .header .menu a.delete:before { content: 'delete'; }
  #layout .header .menu a.archive:before { content: 'archive'; }
  #layout .header .menu a.junk:before { content: 'report'; }
  #layout .header .menu a.markmessage:before { content: 'mark_email_unread'; }
  #layout .header .menu a.more:before { content: 'more_vert'; }
  #layout .header .menu a.print:before { content: 'print'; }
  #layout .header .menu a.move:before { content: 'drive_file_move'; }
  #layout .header .menu a.download:before { content: 'download'; }
  #layout .header .menu a.extwin:before { content: 'open_in_new'; }
  #layout .header .menu a.prev:before { content: 'chevron_left'; }
  #layout .header .menu a.next:before { content: 'chevron_right'; }
  #layout .header .menu a.compose:before { content: 'edit'; }
  #layout .header .menu a.create:before { content: 'add'; }
  #layout .header .menu a.import:before { content: 'upload'; }
  #layout .header .menu a.export:before { content: 'download'; }
  #layout .header .menu a.search:before { content: 'search'; }
  #layout .header .menu a.send:before { content: 'send'; }
  #layout .header .menu a.save:before { content: 'save'; }
  #layout .header .menu a.signature:before { content: 'signature'; }
  #layout .header .menu a.responses:before { content: 'quickreply'; }
  #layout .header .menu a.spellcheck:before { content: 'spellcheck'; }
  #layout .header .menu a.delete-rule:before, #layout .header .menu a.delete-folder:before { content: 'delete'; }
  #layout .header .menu a.attach:before { content: 'attach_file'; }
  #layout .header .menu a.undo:before { content: 'undo'; }
  #layout .header a.back-list-button:before { content: 'arrow_back'; }

  #layout .pagenav a:before { font-size: 20px !important; }
  #layout .pagenav a.firstpage:before { content: 'first_page'; }
  #layout .pagenav a.prevpage:before { content: 'chevron_left'; }
  #layout .pagenav a.nextpage:before { content: 'chevron_right'; }
  #layout .pagenav a.lastpage:before { content: 'last_page'; }

  /* ---------- message list rows ---------- */
  #messagelist { font-family: Roboto, 'Segoe UI', Arial, sans-serif; }
  #messagelist tbody tr td {
    background: var(--nm-row-read); border-left: 0 !important;
    border-bottom: 1px solid var(--nm-divider) !important; color: var(--nm-text-2);
  }
  #messagelist tbody tr.unread td { background: var(--nm-surface); color: var(--nm-text); }
  #messagelist tbody tr td.subject { padding-top: 8px; padding-bottom: 8px; }
  #messagelist tbody tr .fromto,
  #messagelist tbody tr .fromto .adr,
  #messagelist tbody tr .rcmContactAddress { color: var(--nm-text); font-size: 14px; font-weight: 400; }
  #messagelist tbody tr span.subject a,
  #messagelist tbody tr span.subject a span { color: var(--nm-text-2); font-size: 14px; font-weight: 400; }
  #messagelist tbody tr .date { color: var(--nm-text-2); font-size: 12px; font-weight: 400; }
  #messagelist tbody tr.unread .fromto,
  #messagelist tbody tr.unread .rcmContactAddress,
  #messagelist tbody tr.unread span.subject a,
  #messagelist tbody tr.unread span.subject a span,
  #messagelist tbody tr.unread .date { color: var(--nm-text); font-weight: 700; }
  #messagelist tbody tr:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, var(--nm-shadow); position: relative; z-index: 2; }
  #messagelist tbody tr.selected td,
  #messagelist tbody tr.focused.selected td { background: var(--nm-row-sel) !important; }
  #messagelist tbody tr.focused td { border-left: 0 !important; }
  #messagelist span.flag span:before { content: 'star'; font-size: 20px; color: var(--nm-star); }
  #messagelist tr.flagged span.flag span:before { color: #f4b400 !important; font-variation-settings: 'FILL' 1, 'opsz' 24; }
  #messagelist span.attachment span:before { content: 'attach_file'; font-size: 18px; color: var(--nm-text-2); }
  #messagelist .msgicon.status:not(.replied):not(.forwarded):not(.replied.forwarded) { visibility: hidden; }

  /* settings / contacts lists in the card */
  #layout-list .listing li > a, #layout-list .records-table td { color: var(--nm-text); }
  #layout-list .listing li.selected, #layout-list .records-table tr.selected > td, #layout-list .records-table tr.focused > td {
    background: var(--nm-row-sel) !important; border-left-color: transparent !important;
  }
}

/* ---------- buttons, links, forms (all sizes) ---------- */
a, .text-primary { color: var(--nm-ink); }
.btn-primary, .btn.btn-primary, button.mainaction, .formbuttons .btn-primary,
.floating-action-buttons a, .floating-action-buttons button {
  background-color: var(--nm-brand) !important; border-color: var(--nm-brand) !important; color: #fff !important;
  border-radius: 100px !important; font-family: var(--nm-font-ui); font-weight: 500; padding-left: 1.4em; padding-right: 1.4em;
}
.btn-primary:hover, button.mainaction:hover { box-shadow: var(--nm-shadow); filter: brightness(1.08); }
.btn-secondary, .btn.btn-secondary { border-radius: 100px !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--nm-accent) !important;
  box-shadow: 0 0 0 1px var(--nm-accent) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before { background-color: var(--nm-brand) !important; border-color: var(--nm-brand) !important; }
.popover, .popupmenu.popover { border-radius: 8px; box-shadow: 0 2px 6px 2px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.3); border: 0; }
.ui-dialog { border-radius: 24px !important; overflow: hidden; }

/* ---------- message view (inside the preview frame) ---------- */
#message-header h2.subject {
  font: 400 22px/28px var(--nm-font-ui) !important; color: var(--nm-text); margin: 8px 0 12px;
}
#message-header .header { font-size: 14px; }
#message-header .header .from a, #message-header .header .from .rcmContactAddress { font-weight: 700; color: var(--nm-text); }

/* ---------- sign-in page (Google-style card) ---------- */
html.dark-mode body.task-login, body.task-login {
  --nm-text: #1f1f1f; --nm-text-2: #444746; --nm-muted: #5e5e5e; --nm-hover: rgba(68, 71, 70, .08);
  --nm-ink: color-mix(in srgb, var(--nm-brand) 70%, #000);
  background: #f0f4f9 !important;
}
body.task-login #layout-content {
  background: transparent !important; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%;
}
body.task-login #nm-login-card {
  width: min(448px, calc(100vw - 32px)); box-sizing: border-box; background: #fff; border-radius: 28px;
  padding: 36px 40px 32px; text-align: left; box-shadow: none; font-family: var(--nm-font-ui);
}
body.task-login #logo { position: static !important; top: auto !important; left: auto !important; transform: none !important; display: block; max-width: 240px !important; max-height: 56px !important; width: auto; height: auto; margin: 0 0 16px; }
body.task-login #nm-login-title { font: 400 32px/40px var(--nm-font-ui); color: var(--nm-text); margin: 8px 0 8px; }
body.task-login #nm-login-sub { font-size: 16px; color: var(--nm-text); margin: 0 0 28px; }
body.task-login #login-form { position: static !important; top: auto !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; max-width: none; width: 100%; margin: 0; }
body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr,
body.task-login #login-form td { display: block; width: 100%; border: 0; padding: 0; background: none; }
body.task-login #login-form td.title { display: none; }
body.task-login #login-form tr { margin-bottom: 16px; }
body.task-login #login-form .input-group-prepend, body.task-login #login-form .input-group-text { display: none !important; }
body.task-login #login-form td.input { display: block !important; }
body.task-login #login-form input.form-control {
  width: 100% !important; flex: none !important; max-width: none !important; position: static !important;
  height: 56px; border: 1px solid #747775 !important; border-radius: 4px !important; background: #fff !important;
  color: var(--nm-text) !important; font-size: 16px; padding: 0 16px;
}
body.task-login #login-form input.form-control:focus { border: 2px solid var(--nm-brand) !important; box-shadow: none !important; padding: 0 15px; }
body.task-login #login-form .formbuttons, body.task-login #login-form p.formbuttons { text-align: right; margin-top: 24px; }
body.task-login #rcmloginsubmit { text-transform: none !important; font-size: 14px !important; width: auto !important; display: inline-block; height: 40px; padding: 0 24px !important; }
body.task-login #login-footer { color: var(--nm-muted); font-size: 12px; margin-top: 12px; }
body.task-login #nm-login-links { width: min(448px, calc(100vw - 32px)); text-align: right; margin-top: 12px; font-size: 12px; }
body.task-login #nm-login-links a { color: var(--nm-text-2); padding: 8px 12px; border-radius: 4px; text-decoration: none; }
body.task-login #nm-login-links a:hover { background: var(--nm-hover); }

/* about dialog */
.nm-about .sysname { font: 400 24px var(--nm-font-ui); margin-bottom: 4px; }
.nm-about .nm-licenses { margin-top: 24px; color: var(--nm-muted); font-size: 12px; }
.nm-about .nm-licenses h3 { font-size: 14px; color: var(--nm-text); }

/* ---------- Gmail-style list details (desktop) ---------- */
@media (min-width: 1024px) {
  /* folder-actions ⋮ would sit under Compose; folders are managed in Settings */
  body.task-mail.action-none #layout-sidebar > .header a.sidebar-menu { display: none !important; }

  /* pagination "1–4 of 4 < >" at the top right of the list */
  #layout-list > .header .nm-pager {
    margin-left: auto !important; display: flex !important; align-items: center; gap: 2px;
    height: 48px; border: 0 !important; background: transparent !important; padding: 0 !important; width: auto; flex: 0 0 auto;
  }
  #layout-list > .header .nm-pager .pagenav-text { order: 1; font: 400 12px var(--nm-font-ui); color: var(--nm-text-2); padding: 0 8px; white-space: nowrap; }
  #layout-list > .header .nm-pager a.prevpage { order: 2; }
  #layout-list > .header .nm-pager a.nextpage { order: 3; }
  #layout-list > .header .nm-pager a.firstpage,
  #layout-list > .header .nm-pager a.lastpage,
  #layout-list > .header .nm-pager input { display: none !important; }
  #layout-list > .header .nm-pager a {
    flex: 0 0 auto !important; width: 36px; min-width: 36px !important; height: 36px !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center; color: var(--nm-text-2); padding: 0;
  }
  #layout-list > .header .nm-pager a:not(.disabled):hover { background: var(--nm-hover); }
  #layout-list > .header .nm-pager a.disabled { opacity: .38; }
  #layout-list > .header .nm-pager a:before { font-size: 20px !important; line-height: 36px !important; margin: 0 !important; }
  #layout-list > .header .nm-pager a span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #layout-list > .header .nm-pager a.prevpage:before { content: 'chevron_left'; }
  #layout-list > .header .nm-pager a.nextpage:before { content: 'chevron_right'; }

  /* storage used, bottom of the folder list */
  #layout-sidebar > .footer { justify-content: flex-start !important; padding: 0 24px 12px !important; height: auto !important; line-height: 1.4 !important; }
  #quotadisplay { display: flex !important; flex-direction: column-reverse; gap: 6px; width: 180px; font: 400 12px var(--nm-font-ui); color: var(--nm-text-2); }
  #quotadisplay:before { display: none !important; }
  #quotadisplay .count { text-align: left; }
  #quotadisplay .count:after { content: ' of storage used'; }
  #quotadisplay .bar { display: block; height: 4px; width: 100%; border-radius: 2px; background: #dde3ea; border: 0; overflow: hidden; }
  #quotadisplay .bar .value { display: block; height: 100%; background: var(--nm-brand); border-radius: 2px; }

  /* one-line rows when the list is wide enough: [checkbox][star] sender | subject | date */
  #layout-list { container-type: inline-size; container-name: nmlist; }
  #messagelist tbody tr td.subject { position: relative; }
}

@container nmlist (min-width: 560px) {
  #messagelist tbody tr { display: flex !important; align-items: center; min-height: 40px; }
  #messagelist tbody tr td { display: block !important; border-bottom: 0 !important; background: transparent; }
  #messagelist tbody tr { background: var(--nm-row-read); border-bottom: 1px solid var(--nm-divider); }
  #messagelist tbody tr.unread { background: var(--nm-surface); }
  #messagelist tbody tr.selected, #messagelist tbody tr.focused.selected { background: var(--nm-row-sel) !important; }
  #messagelist tbody tr.selected td { background: transparent !important; }

  #messagelist tbody tr td.selection {
    order: 0; flex: 0 0 auto; width: auto !important; padding: 0 0 0 16px !important; display: flex !important; align-items: center;
  }
  #messagelist tbody tr td.selection input { width: 18px; height: 18px; margin: 0; accent-color: var(--nm-brand); cursor: pointer; opacity: .75; }
  #messagelist tbody tr td.flags {
    order: 1; flex: 0 0 auto; width: 40px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center;
    position: static;
  }
  #messagelist tbody tr td.flags span.flag { display: block; }
  #messagelist tbody tr td.flags span.attachment { display: none; }
  #messagelist tbody tr td.subject {
    order: 2; flex: 1 1 auto; min-width: 0; display: flex !important; flex-wrap: nowrap !important; flex-direction: row !important; align-items: center; gap: 0;
    padding: 0 16px 0 4px !important; height: 40px; line-height: 40px; white-space: nowrap;
  }
  #messagelist tbody tr td.subject > span:not(.nm-row-actions) { float: none !important; position: static !important; display: block; margin: 0; line-height: 40px; }
  #messagelist tbody tr td.subject span.fromto { order: 1; flex: 0 0 200px; overflow: hidden; text-overflow: ellipsis; padding-right: 32px; box-sizing: border-box; }
  #messagelist tbody tr td.subject span.subject { order: 2; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #messagelist tbody tr td.subject span.subject a { display: inline; }
  #messagelist tbody tr td.subject span.subject .msgicon { display: none; }
  #messagelist tbody tr td.subject span.date { order: 3; flex: 0 0 auto; margin-left: 16px; min-width: 64px; text-align: right; }
  #messagelist tbody tr td.subject span.size { display: none !important; }

  /* hover: swap the date for quick actions, like Gmail */
  .nm-row-actions {
    order: 4; display: none; align-items: center; gap: 2px; position: absolute; right: 8px; top: 0; height: 40px;
    background: inherit;
  }
  #messagelist tbody tr:hover .nm-row-actions { display: flex; }
  #messagelist tbody tr:hover td.subject span.date { visibility: hidden; }
  .nm-row-btn {
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--nm-text-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  }
  .nm-row-btn:hover { background: var(--nm-hover); color: var(--nm-text); }
  .nm-row-btn .ms { font-size: 20px; }
}

.nm-row-actions { display: none; }

/* ---------- compose pop-up (parent page) ---------- */
#nm-compose {
  position: fixed; right: 24px; bottom: 0; width: 560px; height: min(620px, calc(100vh - 80px)); z-index: 1000;
  display: flex; flex-direction: column; background: var(--nm-surface); border-radius: 12px 12px 0 0; overflow: hidden;
  box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
}
#nm-compose.min { height: 40px; width: 300px; }
#nm-compose.max { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: min(1100px, 88vw); height: 86vh; border-radius: 12px; }
body.nm-compose-max:after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
#nm-compose .nm-compose-bar {
  flex: 0 0 40px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 16px; cursor: default;
  background: var(--nm-bar); font: 500 14px var(--nm-font-ui); color: var(--nm-text);
}
#nm-compose.min .nm-compose-bar { cursor: pointer; }
#nm-compose .nm-compose-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nm-compose .nm-compose-bar button {
  width: 28px; height: 28px; border: 0; border-radius: 4px; background: none; color: var(--nm-text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
#nm-compose .nm-compose-bar button:hover { background: var(--nm-hover); }
#nm-compose .nm-compose-bar .ms { font-size: 18px; }
#nm-compose iframe { flex: 1; width: 100%; border: 0; }
#nm-compose.min iframe { display: none; }

/* ---------- compose inside the pop-up ---------- */
html.nm-popup body { background: var(--nm-surface) !important; }
html.nm-popup #nm-topbar, html.nm-popup #layout-menu { display: none !important; }
html.nm-popup #layout { flex-direction: column; flex-wrap: nowrap !important; background: var(--nm-surface) !important; }
html.nm-popup #layout > div { height: auto !important; }
html.nm-popup #layout-content {
  order: 1; flex: 1 1 auto; min-height: 0; margin: 0 !important; border: 0 !important; border-radius: 0 !important; height: auto !important;
}
html.nm-popup #layout-sidebar {
  order: 2; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; border: 0 !important; max-height: 30%;
  background: var(--nm-surface) !important;
}
html.nm-popup #layout-sidebar > .header, html.nm-popup #compose-options, html.nm-popup #layout-sidebar .upload-form { display: none !important; }
html.nm-popup #layout-sidebar #compose-attachments { border: 0; min-height: 0; padding: 0 16px; background: none; }
html.nm-popup #layout-sidebar #compose-attachments:before { display: none; }
html.nm-popup #layout-sidebar .attachmentslist:empty { display: none; }
html.nm-popup #layout-content { position: relative; display: flex; flex-direction: column; }
html.nm-popup #compose-content { flex: 1 1 auto; padding: 0 16px !important; min-height: 0; }
html.nm-popup #compose-headers .form-group.row.hidden { display: none !important; }
html.nm-popup #compose-headers .form-group.row:not(.hidden) {
  display: flex !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 2px 0;
  border-bottom: 1px solid var(--nm-divider); align-items: center; min-height: 40px;
}
html.nm-popup #compose-headers .form-group.row > label {
  flex: 0 0 64px !important; max-width: 64px !important; width: 64px !important;
  color: var(--nm-muted); font-size: 14px; padding: 0 !important; margin: 0 !important;
}
html.nm-popup #compose-headers .form-group.row > div { flex: 1 1 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; }
html.nm-popup #compose-headers .form-control,
html.nm-popup #compose-headers .recipient-input,
html.nm-popup #compose-headers .input-group > .form-control,
html.nm-popup #compose-headers select { border: 0 !important; box-shadow: none !important; background-color: transparent !important; }
html.nm-popup #compose-headers .input-group-append .btn,
html.nm-popup #compose-headers .input-group-append a { border: 0 !important; background: transparent !important; color: var(--nm-text-2) !important; }
html.nm-popup #composebodycontainer { margin-top: 4px; position: relative; }
html.nm-popup #composebodycontainer .editor-toolbar { background: transparent !important; border: 0 !important; }
html.nm-popup #composebody { border: 0 !important; box-shadow: none !important; min-height: 260px; resize: none; padding: 12px 0 !important; font-size: 14px; }

/* bottom bar: [Send] [save]              [⋮] */
html.nm-popup #layout-content > .footer {
  order: 5; display: flex !important; align-items: center; justify-content: flex-start !important;
  height: 64px !important; min-height: 64px; padding: 0 64px 0 16px !important; border: 0 !important; background: var(--nm-surface) !important;
}
html.nm-popup #layout-content > .footer .buttons { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px; width: auto !important; margin: 0 !important; flex: 0 0 auto !important; }
html.nm-popup #layout-content > .footer .buttons > a { flex: 0 0 auto !important; margin: 0 !important; }
html.nm-popup #layout-content > .footer a.send {
  order: 1; display: inline-flex !important; align-items: center; height: 36px; padding: 0 24px !important;
  border-radius: 18px; background: var(--nm-brand) !important; color: #fff !important; font: 500 14px var(--nm-font-ui);
  width: auto !important; min-width: 0 !important; max-width: none !important;
}
html.nm-popup #layout-content > .footer a.send:hover { box-shadow: var(--nm-shadow); }
html.nm-popup #layout-content > .footer a.send:before { display: none !important; }
html.nm-popup #layout-content > .footer a.send span.inner { display: inline !important; position: static !important; font-size: 14px; color: #fff; }
html.nm-popup #layout-content > .footer a.save {
  order: 2; width: 40px !important; min-width: 40px !important; height: 40px; border-radius: 50%; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center; color: var(--nm-text-2) !important;
}
html.nm-popup #layout-content > .footer a.save:hover { background: var(--nm-hover); }
html.nm-popup #layout-content > .footer a.save:before { font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; content: 'save'; font-size: 20px; margin: 0 !important; height: auto !important; line-height: 1; }
html.nm-popup #layout-content > .footer a.save span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.nm-popup #layout-content > .header {
  position: absolute; right: 12px; bottom: 12px; order: 6; width: 40px; height: 40px !important; min-height: 0 !important;
  line-height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important; z-index: 2;
}
html.nm-popup #layout-content > .header .header-title { display: none !important; }
html.nm-popup #layout-content > .header a.toolbar-menu-button {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; color: var(--nm-text-2);
}
html.nm-popup #layout-content > .header a.toolbar-menu-button:hover { background: var(--nm-hover); }
html.nm-popup #layout-content > .header a.toolbar-menu-button:before { font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; content: 'more_vert'; font-size: 20px; margin: 0 !important; }
html.nm-popup #layout-content > .header a.toolbar-menu-button span.inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Settings icons (Material) ---------- */
#layout-sidebar .listing li.listitem > a:before,
#sections-table tr > td.section:before {
  font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; font-style: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; font-size: 20px !important; letter-spacing: normal;
}
#layout-sidebar .listing li.preferences > a:before { content: 'tune'; }
#layout-sidebar .listing li.folders > a:before { content: 'folder'; }
#layout-sidebar .listing li.identities > a:before { content: 'badge'; }
#layout-sidebar .listing li.responses > a:before { content: 'quickreply'; }
#layout-sidebar .listing li.filter > a:before { content: 'filter_alt'; }
#layout-sidebar .listing li.vacation > a:before { content: 'beach_access'; }
#sections-table tr.general > td.section:before { content: 'desktop_windows'; }
#sections-table tr.mailbox > td.section:before { content: 'view_list'; }
#sections-table tr.mailview > td.section:before { content: 'mail'; }
#sections-table tr.compose > td.section:before { content: 'edit_note'; }
#sections-table tr.addressbook > td.section:before { content: 'contacts'; }
#sections-table tr.folders > td.section:before { content: 'folder_special'; }
#sections-table tr.server > td.section:before { content: 'dns'; }
#sections-table tr.encryption > td.section:before { content: 'encrypted'; }
#sections-table tr.calendar > td.section:before { content: 'calendar_month'; }
#sections-table tr > td.section { color: var(--nm-text); }

/* ---------- Gmail-style checkboxes in the message list ---------- */
#messagelist td.selection input {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0;
  border: 2px solid var(--nm-check-border); border-radius: 2px; background: transparent; opacity: .8; cursor: pointer;
}
#messagelist td.selection input:checked {
  background: var(--nm-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color: var(--nm-brand); opacity: 1;
}
/* opening a message selects its row, but it shouldn't look "ticked" (Gmail) */
#messagelist.nm-single td.selection input:checked { background: transparent; border-color: var(--nm-check-border); opacity: .8; }

/* ---------- Calendar (Google Calendar feel) ---------- */
.task-calendar .fc-toolbar .fc-button, .task-calendar .fc-header-toolbar .fc-button {
  background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important;
  border: 1px solid var(--nm-divider) !important; color: var(--nm-text) !important;
  height: 36px; padding: 0 16px !important; font: 500 14px var(--nm-font-ui) !important; border-radius: 0 !important;
}
.task-calendar .fc-toolbar .fc-button-group .fc-button:first-child, .task-calendar .fc-toolbar .fc-button.fc-corner-left { border-radius: 18px 0 0 18px !important; }
.task-calendar .fc-toolbar .fc-button-group .fc-button:last-child, .task-calendar .fc-toolbar .fc-button.fc-corner-right { border-radius: 0 18px 18px 0 !important; }
.task-calendar .fc-toolbar .fc-button.fc-corner-left.fc-corner-right,
.task-calendar .fc-toolbar .fc-today-button { border-radius: 18px !important; }
.task-calendar .fc-toolbar .fc-button:hover { background: var(--nm-hover) !important; }
.task-calendar .fc-toolbar .fc-button.fc-state-active, .task-calendar .fc-toolbar .fc-button.fc-button-active {
  background: var(--nm-sel) !important; color: var(--nm-ink) !important;
}
.task-calendar .fc-toolbar .fc-prev-button, .task-calendar .fc-toolbar .fc-next-button {
  border: 0 !important; width: 36px; padding: 0 !important; border-radius: 50% !important;
}
.task-calendar .fc-toolbar h2 { font: 400 22px var(--nm-font-ui) !important; color: var(--nm-text); }
.task-calendar .fc-unthemed td.fc-today, .task-calendar .fc td.fc-today, .task-calendar .fc .fc-day.fc-today { background: transparent !important; }
.task-calendar .fc th.fc-today, .task-calendar .fc th.fc-today a { color: var(--nm-ink) !important; font-weight: 700; }
.task-calendar .fc-event { border-radius: 4px !important; border: 0 !important; }
.task-calendar .fc-event .fc-content, .task-calendar .fc-event .fc-title { font-size: 12px; }
.task-calendar .fc-now-indicator { border-color: #ea4335 !important; }
.task-calendar #layout-content, .task-calendar .fc { font-family: Roboto, 'Segoe UI', Arial, sans-serif; }
@media (min-width: 1024px) {
  /* "Create" pill like Google Calendar */
  .task-calendar #layout-content > .header .menu.toolbar a.create {
    width: auto !important; max-width: none !important; min-width: 0 !important; height: 48px !important; border-radius: 16px;
    padding: 0 20px 0 14px !important; margin-right: 8px; background: var(--nm-compose) !important; color: var(--nm-ink) !important;
    display: inline-flex !important; align-items: center; gap: 8px; box-shadow: var(--nm-shadow);
  }
  .task-calendar #layout-content > .header .menu.toolbar a.create span.inner {
    position: static !important; width: auto; height: auto; clip: auto; overflow: visible; font: 500 14px var(--nm-font-ui);
  }
  .task-calendar #layout-content > .header .menu.toolbar a.create:before { content: 'add'; font-size: 24px !important; line-height: 1; height: auto !important; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 1023px) {
  #layout > div > .header { background: var(--nm-surface) !important; border-bottom: 1px solid var(--nm-divider) !important; color: var(--nm-text); }
  #layout > div > .header .header-title { font: 400 18px var(--nm-font-ui); }
  #layout-sidebar, #layout-list, #layout-content { background: var(--nm-surface) !important; }
  #layout-sidebar .listing li, #layout-sidebar .listing li.selected { background: transparent !important; border: 0 !important; }
  #layout-sidebar .listing li > a { border-radius: 0 24px 24px 0; margin-right: 12px; color: var(--nm-text) !important; }
  #layout-sidebar .listing li.selected > a { background: var(--nm-sel) !important; color: var(--nm-ink) !important; font-weight: 700; }
  #mailboxlist li.mailbox > a:before { content: 'folder'; font-size: 22px !important; color: var(--nm-text-2); }
  #mailboxlist li.mailbox.inbox > a:before { content: 'inbox'; }
  #mailboxlist li.mailbox.sent > a:before { content: 'send'; }
  #mailboxlist li.mailbox.drafts > a:before { content: 'draft'; }
  #mailboxlist li.mailbox.junk > a:before { content: 'report'; }
  #mailboxlist li.mailbox.trash > a:before { content: 'delete'; }
  #mailboxlist li.mailbox.archive > a:before { content: 'archive'; }
  #messagelist tbody tr td { background: var(--nm-surface); border-bottom: 1px solid var(--nm-divider) !important; border-left: 0 !important; color: var(--nm-text-2); }
  #messagelist tbody tr .fromto, #messagelist tbody tr .rcmContactAddress { color: var(--nm-text); font-size: 15px; }
  #messagelist tbody tr span.subject a, #messagelist tbody tr span.subject a span { color: var(--nm-text-2); font-size: 14px; }
  #messagelist tbody tr.unread .fromto, #messagelist tbody tr.unread .rcmContactAddress,
  #messagelist tbody tr.unread span.subject a, #messagelist tbody tr.unread span.subject a span,
  #messagelist tbody tr.unread .date { color: var(--nm-text); font-weight: 700; }
  #messagelist tbody tr.selected td { background: var(--nm-row-sel) !important; }
  #messagelist span.flag span:before { content: 'star'; font-size: 22px; color: var(--nm-star); }
  #messagelist tr.flagged span.flag span:before { color: #f4b400 !important; font-variation-settings: 'FILL' 1, 'opsz' 24; }
  /* floating Compose button, Gmail-app style */
  .floating-action-buttons a.compose, .floating-action-buttons a.button {
    border-radius: 16px !important; width: auto !important; height: 56px !important; padding: 0 20px 0 16px !important;
    background: var(--nm-compose) !important; color: var(--nm-ink) !important; border: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15) !important;
    display: inline-flex !important; align-items: center; gap: 12px;
  }
  .floating-action-buttons a.compose:before {
    font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; content: 'edit' !important; font-size: 24px !important; line-height: 1;
  }
  .floating-action-buttons a.compose:before { position: static !important; margin: 0 !important; width: auto !important; height: auto !important; float: none !important; }
  #messagelist span.attachment span:before { content: 'attach_file'; font-size: 18px; color: var(--nm-text-2); }
  #messagelist .msgicon.status:not(.replied):not(.forwarded) { visibility: hidden; }
  #messagelist tbody tr span.date { width: auto !important; min-width: 5em; max-width: none !important; white-space: nowrap; overflow: visible !important; text-align: right; font-size: 12px; }
  .floating-action-buttons a.compose span.inner { display: inline !important; position: static !important; font: 500 15px var(--nm-font-ui); }
  #layout-menu { background: var(--nm-surface) !important; }
  #layout-menu .popover-header { background: var(--nm-surface) !important; }
  #layout-menu #taskmenu a { color: var(--nm-text) !important; }
  #layout-menu #taskmenu a.selected { background: var(--nm-sel) !important; color: var(--nm-ink) !important; }
}