/*
 * Outlook-inspired Roundcube skin overlay with Mzuzu University branding
 * Created as a non-destructive refactor over the Elastic skin.
 * It preserves Roundcube commands and templates while reshaping the interface
 * into a Microsoft Outlook-style experience: suite bar, app rail, folder pane,
 * message list, reading pane, command bar, cards, spacing, and responsive states.
 */
:root {
  --mzuni-green: #159b48;
  --mzuni-green-dark: #0f6f37;
  --mzuni-green-deep: #064f2b;
  --mzuni-lime: #8dc63e;
  --mzuni-lime-gold: #cad22e;
  --mzuni-silver: #dedddd;
  --mzuni-graphite: #53514e;
  --mzuni-charcoal: #21211e;
  --outlook-blue: var(--mzuni-green);
  --outlook-blue-dark: var(--mzuni-green-dark);
  --outlook-blue-soft: #e8f5ec;
  --outlook-blue-tint: #f1f9f2;
  --outlook-rail: #f6f7f5;
  --outlook-pane: #f8faf7;
  --outlook-surface: #ffffff;
  --outlook-border: #e4e8e2;
  --outlook-border-strong: #c7ccc5;
  --outlook-text: var(--mzuni-charcoal);
  --outlook-muted: var(--mzuni-graphite);
  --outlook-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
  --outlook-suitebar-height: 48px;
  --outlook-rail-width: 56px;
  --outlook-folder-width: 248px;
  --outlook-list-width: 430px;
  --outlook-radius: 6px;
  --outlook-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
  font-family: var(--outlook-font);
  color: var(--outlook-text);
  background: var(--outlook-pane);
}

body:not(.action-print) #layout {
  padding-top: var(--outlook-suitebar-height);
  background: var(--outlook-pane);
}

body.action-print #outlook-suitebar,
body.action-print #layout-menu {
  display: none !important;
}

#outlook-suitebar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: var(--outlook-suitebar-height);
  background: linear-gradient(90deg, var(--mzuni-green-deep) 0%, var(--mzuni-green) 58%, var(--mzuni-lime) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

#outlook-suitebar .outlook-waffle {
  width: 40px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-auto-rows: 4px;
  justify-content: center;
  align-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  border-radius: 3px;
  cursor: default;
}

#outlook-suitebar .outlook-waffle span {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
}

#outlook-suitebar .outlook-waffle:hover { background: rgba(255,255,255,.14); }

#outlook-suitebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mzuni-lime-gold), rgba(255,255,255,.72), var(--mzuni-lime));
  opacity: .95;
}

.outlook-brand {
  min-width: 132px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: .1px;
}

.outlook-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--outlook-blue);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  overflow: hidden;
}

.outlook-brand-mark.mzuni-brand-mark {
  background: #fff url("../images/mzuni-crest-256.png") center / 27px 27px no-repeat;
  color: transparent;
  text-indent: -999px;
}

.outlook-brand-title {
  font-size: 16px;
  line-height: 1;
}

.outlook-search-slot {
  max-width: 720px;
  min-width: 260px;
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  color: var(--outlook-muted);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden;
}

.outlook-search-placeholder {
  padding-left: 42px;
  position: relative;
  font-size: 14px;
}

.outlook-search-placeholder:before {
  content: "\f002";
  font-family: Icons;
  font-weight: 900;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #605e5c;
}

.outlook-search-slot .searchbar {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
}

.outlook-search-slot .searchbar input,
.outlook-search-slot input[type="text"],
.outlook-search-slot input[type="search"] {
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 42px !important;
  color: var(--outlook-text) !important;
  font-size: 14px !important;
}

.outlook-search-slot .searchbar:before {
  content: "\f002";
  font-family: Icons;
  font-weight: 900;
  position: absolute;
  margin-left: 16px;
  color: #605e5c;
  pointer-events: none;
}

.outlook-search-slot .button,
.outlook-search-slot a.button,
.outlook-search-slot .reset {
  color: var(--outlook-muted) !important;
}

.outlook-suite-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 108px;
  justify-content: flex-end;
}

.outlook-suite-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  display: inline-block;
}

.outlook-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #004578;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

#layout-menu {
  flex: 0 0 var(--outlook-rail-width) !important;
  width: var(--outlook-rail-width) !important;
  max-width: var(--outlook-rail-width) !important;
  min-width: var(--outlook-rail-width) !important;
  background: var(--outlook-rail) !important;
  border-right: 1px solid var(--outlook-border) !important;
  box-shadow: none !important;
  z-index: 4;
}

#layout-menu .popover-header {
  display: none !important;
}

#taskmenu {
  height: 100%;
  padding: 8px 0 !important;
  background: var(--outlook-rail) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
}

#taskmenu a,
#taskmenu .button,
#taskmenu span.action-buttons a,
#taskmenu span.special-buttons a {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  color: #444 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  position: absolute !important;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #252423;
  color: #fff !important;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 9px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 1200;
}

#taskmenu a:hover .inner,
#taskmenu .button:hover .inner { opacity: 1; }

#taskmenu a:before,
#taskmenu .button:before {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#taskmenu a:hover,
#taskmenu .button:hover {
  background: #e1dfdd !important;
}

#taskmenu a.selected,
#taskmenu .button.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected {
  background: var(--outlook-blue-soft) !important;
  color: var(--outlook-blue-dark) !important;
}

#taskmenu a.selected:after,
#taskmenu .button.selected:after {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 24px;
  border-radius: 0 2px 2px 0;
  background: var(--outlook-blue);
}

#taskmenu .action-buttons { order: 0; margin-bottom: 8px; }
#taskmenu .special-buttons { margin-top: auto !important; display: flex !important; flex-direction: column !important; gap: 4px; }

#taskmenu .compose {
  background: var(--outlook-blue) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
#taskmenu .compose:hover { background: var(--outlook-blue-dark) !important; }

#layout-sidebar {
  flex: 0 0 var(--outlook-folder-width) !important;
  width: var(--outlook-folder-width) !important;
  max-width: var(--outlook-folder-width) !important;
  min-width: 220px !important;
  background: #fff !important;
  border-right: 1px solid var(--outlook-border) !important;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
  background: var(--outlook-surface) !important;
  color: var(--outlook-text) !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
  justify-content: flex-start !important;
  font-weight: 600 !important;
}

#layout-sidebar > .header .header-title,
#layout-list > .header .header-title,
#layout-content > .header .header-title {
  text-align: left !important;
  margin: 0 !important;
  flex: 1;
  font-size: 15px;
}

#layout-sidebar .username:before {
  content: "Folders";
  color: var(--outlook-text);
  font-weight: 600;
}
#layout-sidebar .username * { display: none; }

#folderlist-content {
  background: #fff;
  padding: 8px 6px;
}

#mailboxlist,
#mailboxlist ul,
#mailboxlist li {
  font-size: 14px;
}

#mailboxlist li a,
#mailboxlist li.mailbox a,
#mailboxlist .treetoggle + a,
ul.treelist li div {
  min-height: 32px !important;
  line-height: 32px !important;
  border-radius: 4px !important;
  color: var(--outlook-text) !important;
  padding-right: 8px !important;
}

#mailboxlist li a:hover,
#mailboxlist li.mailbox a:hover {
  background: #f3f2f1 !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > div > a,
#mailboxlist li.mailbox.selected > a {
  background: var(--outlook-blue-soft) !important;
  color: var(--outlook-blue-dark) !important;
  font-weight: 600 !important;
}

#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .unread {
  background: transparent !important;
  color: var(--outlook-blue) !important;
  font-weight: 700 !important;
}

.quota-widget {
  padding: 6px 10px;
  color: var(--outlook-muted);
  font-size: 12px;
}

#layout-list {
  flex: 0 0 var(--outlook-list-width) !important;
  width: var(--outlook-list-width) !important;
  max-width: var(--outlook-list-width) !important;
  min-width: 330px !important;
  background: var(--outlook-pane) !important;
  border-right: 1px solid var(--outlook-border) !important;
}

#messagelist-header {
  background: #fff !important;
}

#layout-list > .searchbar,
#mailsearchform {
  margin: 8px 10px !important;
  border: 1px solid var(--outlook-border-strong) !important;
  background: #fff !important;
  border-radius: 4px !important;
  min-height: 34px !important;
  box-shadow: none !important;
}

.outlook-list-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  background: var(--outlook-pane);
  border-bottom: 1px solid var(--outlook-border);
}
.outlook-list-title { font-size: 18px; font-weight: 600; color: var(--outlook-text); }
.outlook-list-hint { font-size: 12px; color: var(--outlook-muted); }

#messagelist-content {
  background: var(--outlook-pane) !important;
  padding: 0 !important;
}

#messagelist {
  border-collapse: separate !important;
  border-spacing: 0 0 !important;
  width: 100% !important;
  background: transparent !important;
}

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

#messagelist tbody tr,
#messagelist tr.message {
  background: #fff !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--outlook-border) !important;
  min-height: 72px;
}

#messagelist tr.message:hover,
#messagelist tr.message.focused,
#messagelist tr.message.selected:hover {
  background: #f3f9fd !important;
}

#messagelist tr.message.selected,
#messagelist tr.message.selected td {
  background: var(--outlook-blue-tint) !important;
  color: var(--outlook-text) !important;
}

#messagelist tr.message.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--outlook-blue) !important;
}

#messagelist tr.message td {
  border: 0 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  vertical-align: top !important;
  color: var(--outlook-text) !important;
}

#messagelist tr.message td.subject {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "from date"
    "subject flags";
  gap: 2px 8px;
  width: 100% !important;
  padding-left: 14px !important;
  padding-right: 12px !important;
}

#messagelist .fromto,
#messagelist .from,
#messagelist .to {
  grid-area: from;
  color: var(--outlook-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

#messagelist .date {
  grid-area: date;
  color: var(--outlook-muted) !important;
  font-size: 12px !important;
  justify-self: end;
  white-space: nowrap;
}

#messagelist .subject span.subject,
#messagelist td.subject span.subject,
#messagelist .subject a,
#messagelist .message .subject {
  grid-area: subject;
  color: var(--outlook-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

#messagelist tr.unread .fromto,
#messagelist tr.unread .from,
#messagelist tr.unread .subject span.subject,
#messagelist tr.unread td.subject span.subject {
  font-weight: 700 !important;
}

#messagelist .flags,
#messagelist td.flags {
  grid-area: flags;
  justify-self: end;
}

#layout-content {
  background: #fff !important;
  min-width: 0;
  position: relative;
}

#layout-content > .header {
  border-bottom: 1px solid var(--outlook-border) !important;
  box-shadow: none !important;
}

#mailtoolbar,
#messagetoolbar,
.toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 2px;
}

#mailtoolbar a,
#mailtoolbar .button,
#messagetoolbar a,
#messagetoolbar .button,
.toolbar.menu a,
.toolbar.menu .button {
  border-radius: 4px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding: 0 10px !important;
  color: var(--outlook-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
}

#mailtoolbar a:hover,
#mailtoolbar .button:hover,
#messagetoolbar a:hover,
#messagetoolbar .button:hover,
.toolbar.menu a:hover,
.toolbar.menu .button:hover {
  background: #f3f2f1 !important;
  border-color: var(--outlook-border) !important;
}

#mailtoolbar a.disabled,
#mailtoolbar .button.disabled,
#messagetoolbar a.disabled,
#messagetoolbar .button.disabled,
.toolbar.menu a.disabled,
.toolbar.menu .button.disabled {
  opacity: .42 !important;
}

#mailtoolbar .reply,
#mailtoolbar .reply-all,
#mailtoolbar .forward,
#messagetoolbar .send,
#messagetoolbar .save {
  color: var(--outlook-blue-dark) !important;
}

#layout-content .iframe-wrapper {
  background: #fff;
  border: 0;
}

#messagecontframe {
  background: #fff !important;
}

.outlook-preview-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--outlook-muted);
  font-size: 14px;
  pointer-events: none;
}

#layout-content:has(iframe[src*="_action=preview"]) .outlook-preview-empty,
#layout-content:has(iframe:not([src=""]):not([src="about:blank"])) .outlook-preview-empty {
  display: none;
}

/* Message reading view */
body.action-show #layout-content,
body.action-preview #layout-content,
body.action-none #layout-content {
  background: #fff !important;
}

.message-part,
.message-htmlpart,
.message-headers,
#messagebody {
  font-family: var(--outlook-font) !important;
}

/* Compose window */
body.action-compose #layout-content {
  background: #fff !important;
}

body.action-compose #layout-sidebar.sidebar-right {
  background: var(--outlook-pane) !important;
  border-left: 1px solid var(--outlook-border) !important;
  border-right: 0 !important;
  flex-basis: 300px !important;
  width: 300px !important;
  max-width: 300px !important;
}

#compose-content {
  background: #fff !important;
}

#compose-headers {
  max-width: 1180px;
  margin: 16px auto 8px;
  padding: 0 18px;
}

.compose-headers .form-group {
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--outlook-border);
  padding-bottom: 6px;
}

.compose-headers label {
  color: var(--outlook-muted) !important;
  font-weight: 500 !important;
}

.compose-headers input,
.compose-headers textarea,
.compose-headers select,
.compose-headers .form-control,
.compose-headers .select2-container .select2-selection {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#composebodycontainer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px 24px;
}

#composebody,
#composebody_ifr,
.tox-tinymce {
  border: 1px solid var(--outlook-border) !important;
  border-radius: var(--outlook-radius) !important;
  box-shadow: none !important;
}

#compose-attachments,
#compose-options {
  margin: 12px;
  background: #fff;
  border: 1px solid var(--outlook-border);
  border-radius: var(--outlook-radius);
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}

#compose-attachments .upload-form,
#compose-options .form-group {
  padding: 10px 12px;
}

.btn-primary,
button.btn-primary,
.formbuttons .btn-primary,
#rcmloginsubmit,
#messagetoolbar .send {
  background: var(--outlook-blue) !important;
  border-color: var(--outlook-blue) !important;
  color: #fff !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.btn-primary:hover,
#rcmloginsubmit:hover {
  background: var(--outlook-blue-dark) !important;
  border-color: var(--outlook-blue-dark) !important;
}

.btn-secondary,
button.btn-secondary,
.formbuttons .btn-secondary {
  background: #fff !important;
  border-color: var(--outlook-border-strong) !important;
  color: var(--outlook-text) !important;
  border-radius: 4px !important;
}

/* Address book, settings and generic list panes */
body.task-addressbook #layout-sidebar,
body.task-settings #layout-sidebar {
  background: #fff !important;
}

body.task-addressbook #layout-list,
body.task-settings #layout-list,
.listbox {
  background: var(--outlook-pane) !important;
}

.listing tbody tr,
.listing li,
ul.listing li {
  border-color: var(--outlook-border) !important;
}

.listing tbody tr.selected,
.listing li.selected,
ul.listing li.selected {
  background: var(--outlook-blue-tint) !important;
  color: var(--outlook-text) !important;
}

.listing tbody tr:hover,
.listing li:hover,
ul.listing li:hover {
  background: #f3f9fd !important;
}

/* Dialogs and menus */
.popupmenu,
.popover,
.ui-dialog,
.modal-content {
  border: 1px solid var(--outlook-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: var(--outlook-shadow) !important;
}

.popupmenu .listing li a,
.popupmenu a,
.menu.listing li a {
  border-radius: 3px !important;
}

.popupmenu .listing li a:hover,
.popupmenu a:hover,
.menu.listing li a:hover {
  background: var(--outlook-blue-tint) !important;
  color: var(--outlook-blue-dark) !important;
}

/* Login */
body.task-login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 18%, rgba(202,210,46,.24), transparent 26%),
    radial-gradient(circle at 82% 12%, rgba(21,155,72,.20), transparent 30%),
    linear-gradient(135deg, #f4f8f3 0%, #ffffff 48%, #eef4ed 100%) !important;
  color: var(--outlook-text);
}

body.task-login #outlook-suitebar,
body.task-login #layout-menu {
  display: none !important;
}

body.task-login #layout {
  padding-top: 0 !important;
  background: transparent !important;
  min-height: 100vh;
  display: block !important;
}

body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  min-height: 100vh !important;
  width: 100%;
  display: grid !important;
  place-items: center;
  padding: 32px !important;
  background: transparent !important;
}

.mzuni-login-shell {
  width: min(1100px, 100%);
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(340px, .92fr);
  overflow: hidden;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  box-shadow: 0 24px 80px rgba(33,33,30,.18);
  backdrop-filter: blur(18px);
}

.mzuni-login-hero {
  position: relative;
  isolation: isolate;
  padding: 56px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(6,79,43,.96), rgba(21,155,72,.94) 60%, rgba(141,198,62,.88)),
    url("../images/mzuni-logo-640.png") right -96px bottom -140px / 520px auto no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mzuni-login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(110deg, rgba(255,255,255,.14), transparent 38%),
    radial-gradient(circle at 26% 20%, rgba(202,210,46,.35), transparent 28%);
}

.mzuni-login-logo-crest {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  display: block;
  background: #fff url("../images/mzuni-crest-256.png") center / 72px 72px no-repeat;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.mzuni-login-kicker,
.mzuni-hero-kicker {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mzuni-lime-gold);
}

.mzuni-login-hero h2 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.04em;
}

.mzuni-login-hero p {
  max-width: 500px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.6;
}

.mzuni-login-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
}

.mzuni-login-point {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.mzuni-login-point strong {
  display: block;
  font-size: 19px;
  line-height: 1;
  color: #fff;
}

.mzuni-login-point span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.80);
}

.mzuni-login-card {
  padding: 56px 52px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,247,.96));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mzuni-login-card #logo {
  max-width: 108px !important;
  max-height: 108px !important;
  object-fit: contain;
  margin: 0 0 18px !important;
}

.mzuni-login-card h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--mzuni-charcoal);
}

.mzuni-login-subtitle {
  margin: 10px 0 26px;
  color: var(--mzuni-graphite);
  font-size: 14px;
  line-height: 1.55;
}

#login-form {
  max-width: none !important;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none !important;
}

#login-form:before {
  content: none !important;
}

#login-form .form-group,
#login-form p {
  margin-bottom: 16px !important;
}

#login-form label {
  font-weight: 650;
  color: var(--mzuni-charcoal);
  font-size: 13px;
}

#login-form input,
#login-form .form-control {
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid #cfd7cc !important;
  background: #fff !important;
  color: var(--mzuni-charcoal) !important;
  box-shadow: 0 1px 0 rgba(33,33,30,.04) !important;
}

#login-form input:focus,
#login-form .form-control:focus {
  border-color: var(--mzuni-green) !important;
  box-shadow: 0 0 0 4px rgba(21,155,72,.14) !important;
}

#rcmloginsubmit {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border-radius: 14px !important;
  font-weight: 750 !important;
  background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-green)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(21,155,72,.22) !important;
}

#rcmloginsubmit:hover {
  background: linear-gradient(90deg, var(--mzuni-green-dark), var(--mzuni-green-deep)) !important;
}

#login-footer {
  margin-top: 24px;
  color: var(--mzuni-graphite);
  font-size: 12px;
  text-align: left;
}

#login-footer a {
  color: var(--mzuni-green-dark);
  font-weight: 650;
}

.mzuni-login-support {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mzuni-graphite);
  font-size: 13px;
}

.mzuni-login-support::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mzuni-lime);
  box-shadow: 0 0 0 5px rgba(141,198,62,.18);
}

@media screen and (max-width: 860px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar {
    padding: 18px !important;
  }
  .mzuni-login-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 22px;
  }
  .mzuni-login-hero {
    min-height: 280px;
    padding: 34px;
  }
  .mzuni-login-hero h2 {
    font-size: 34px;
  }
  .mzuni-login-points {
    grid-template-columns: 1fr;
  }
  .mzuni-login-card {
    padding: 34px;
  }
}

/* Scrollbars */
.scroller::-webkit-scrollbar,
#messagelist-content::-webkit-scrollbar,
#folderlist-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroller::-webkit-scrollbar-thumb,
#messagelist-content::-webkit-scrollbar-thumb,
#folderlist-content::-webkit-scrollbar-thumb {
  background: #c8c6c4;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scroller::-webkit-scrollbar-track,
#messagelist-content::-webkit-scrollbar-track,
#folderlist-content::-webkit-scrollbar-track {
  background: transparent;
}

/* Dark mode approximation */
html.dark-mode {
  --outlook-pane: #1b1a19;
  --outlook-rail: #252423;
  --outlook-surface: #201f1e;
  --outlook-border: #3b3a39;
  --outlook-border-strong: #484644;
  --outlook-text: #f3f2f1;
  --outlook-muted: #c8c6c4;
  --outlook-blue-soft: #004578;
  --outlook-blue-tint: #102f45;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #messagelist tr.message,
html.dark-mode .popupmenu,
html.dark-mode .modal-content,
html.dark-mode #login-form,
html.dark-mode #compose-attachments,
html.dark-mode #compose-options {
  background: var(--outlook-surface) !important;
  color: var(--outlook-text) !important;
}

html.dark-mode #outlook-suitebar { background: linear-gradient(90deg, #05351f, #0f6f37 65%, #5c8f28); }
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu .button:hover { background: #323130 !important; }
html.dark-mode .outlook-search-slot { background: #fff; color: #323130; }

html.dark-mode body.task-login {
  background: linear-gradient(135deg, #161a15, #222820 50%, #111411) !important;
}

html.dark-mode .mzuni-login-shell,
html.dark-mode .mzuni-login-card {
  background: var(--outlook-surface) !important;
}

html.dark-mode .mzuni-login-card h2,
html.dark-mode #login-form label {
  color: var(--outlook-text);
}

html.dark-mode .mzuni-login-subtitle,
html.dark-mode .mzuni-login-support,
html.dark-mode #login-footer {
  color: var(--outlook-muted);
}


/* Responsive behaviour */
@media screen and (max-width: 1200px) {
  :root { --outlook-folder-width: 220px; --outlook-list-width: 390px; }
}

@media screen and (max-width: 900px) {
  #outlook-suitebar { gap: 8px; padding-right: 8px; }
  .outlook-brand { min-width: auto; }
  .outlook-brand-title { display: none; }
  .outlook-search-slot { min-width: 160px; }
  .outlook-suite-actions { min-width: auto; gap: 8px; }
  .outlook-suite-dot { display: none; }
  #layout-menu {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
  #taskmenu a, #taskmenu .button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  #layout-sidebar {
    flex-basis: 210px !important;
    width: 210px !important;
    min-width: 190px !important;
  }
  #layout-list {
    flex-basis: 360px !important;
    width: 360px !important;
    min-width: 320px !important;
  }
}

@media screen and (max-width: 768px) {
  body:not(.action-print) #layout { padding-top: var(--outlook-suitebar-height); }
  #outlook-suitebar .outlook-search-slot { display: none; }
  #layout-menu {
    position: fixed !important;
    left: 0;
    bottom: 0;
    top: auto;
    height: 54px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    border-top: 1px solid var(--outlook-border) !important;
    border-right: 0 !important;
    z-index: 1000;
  }
  #taskmenu {
    flex-direction: row !important;
    justify-content: space-around !important;
    padding: 5px 8px !important;
  }
  #taskmenu .special-buttons { margin-top: 0 !important; flex-direction: row !important; }
  #taskmenu a .inner, #taskmenu .button .inner { display: none !important; }
  #taskmenu a.selected:after, #taskmenu .button.selected:after {
    left: 50%; bottom: 0; top: auto; width: 24px; height: 3px; transform: translateX(-50%); border-radius: 2px 2px 0 0;
  }
  #layout { padding-bottom: 54px; }
  #layout-sidebar, #layout-list, #layout-content {
    max-width: none !important;
    width: 100% !important;
  }
  .outlook-list-summary { display: none; }
}

@supports not selector(:has(*)) {
  .outlook-preview-empty { display: none; }
}

/* Fluent-style icon refresh: replaces inherited glyph icons with clean SVG masks. */
:root {
  --fluent-compose: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015.5l.7-3.1L13%204.1a2.1%202.1%200%200%201%203%203l-8.3%208.3-3.7.1z%22%2F%3E%3Cpath%20d%3D%22M11.7%205.4l2.9%202.9%22%2F%3E%3C%2Fsvg%3E");
  --fluent-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%224.5%22%20width%3D%2214.4%22%20height%3D%2211%22%20rx%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M3.5%206l6.5%205%206.5-5%22%2F%3E%3C%2Fsvg%3E");
  --fluent-contacts: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.3%22%20cy%3D%227.3%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M2.8%2016c.8-2.6%202.4-4%204.5-4s3.8%201.4%204.5%204%22%2F%3E%3Ccircle%20cx%3D%2213.8%22%20cy%3D%228%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12.5%2012.4c1.7.2%203%201.4%203.7%203.6%22%2F%3E%3C%2Fsvg%3E");
  --fluent-settings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M10%202.8v2M10%2015.2v2M4.9%204.9l1.4%201.4M13.7%2013.7l1.4%201.4M2.8%2010h2M15.2%2010h2M4.9%2015.1l1.4-1.4M13.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-theme: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.2%2012.6A6.3%206.3%200%200%201%207.4%204.8%206.6%206.6%200%201%200%2015.2%2012.6z%22%2F%3E%3C%2Fsvg%3E");
  --fluent-about: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227.2%22%2F%3E%3Cpath%20d%3D%22M8.3%208.1A2.1%202.1%200%200%201%2010%206.9c1.2%200%202.1.8%202.1%201.9%200%201.8-2.1%201.7-2.1%203.3%22%2F%3E%3Cpath%20d%3D%22M10%2015h.01%22%2F%3E%3C%2Fsvg%3E");
  --fluent-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.5%204.2H4.8a1.8%201.8%200%200%200-1.8%201.8v8a1.8%201.8%200%200%200%201.8%201.8h2.7%22%2F%3E%3Cpath%20d%3D%22M11.5%206.5l3.5%203.5-3.5%203.5%22%2F%3E%3Cpath%20d%3D%22M15%2010H7.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228.8%22%20cy%3D%228.8%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M12.5%2012.5l4%204%22%2F%3E%3C%2Fsvg%3E");
  --fluent-notification: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208.2a4%204%200%201%201%208%200c0%204%201.4%204.6%202%205.4H4c.6-.8%202-1.4%202-5.4z%22%2F%3E%3Cpath%20d%3D%22M8.6%2016a1.6%201.6%200%200%200%202.8%200%22%2F%3E%3C%2Fsvg%3E");
  --fluent-help: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227.2%22%2F%3E%3Cpath%20d%3D%22M8.2%208.1c.3-1%201-1.6%202-1.6%201.2%200%202.1.8%202.1%201.9%200%201.7-2.3%201.7-2.3%203.5%22%2F%3E%3Cpath%20d%3D%22M10%2015h.01%22%2F%3E%3C%2Fsvg%3E");
  --fluent-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224.6%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M6.4%202.8v3.5M13.6%202.8v3.5M3%208h14%22%2F%3E%3C%2Fsvg%3E");
  --fluent-folder: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.8%206.5c0-1%20.8-1.8%201.8-1.8h4l1.5%201.8h5.3c1%200%201.8.8%201.8%201.8v5.2c0%201-.8%201.8-1.8%201.8H4.6c-1%200-1.8-.8-1.8-1.8z%22%2F%3E%3C%2Fsvg%3E");
  --fluent-inbox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%206.2h13.6l-1.5%208.2H4.7z%22%2F%3E%3Cpath%20d%3D%22M6.5%2010.5h2l1.2%201.8h.6l1.2-1.8h2%22%2F%3E%3C%2Fsvg%3E");
  --fluent-drafts: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%2015.8h11.6%22%2F%3E%3Cpath%20d%3D%22M5%2013.5l.5-3.2%206.8-6.8a1.7%201.7%200%200%201%202.4%202.4L7.9%2012.7z%22%2F%3E%3C%2Fsvg%3E");
  --fluent-sent: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.3L17%203.8l-4.6%2012.4-2.8-5.5z%22%2F%3E%3Cpath%20d%3D%22M17%203.8L9.6%2010.7%22%2F%3E%3C%2Fsvg%3E");
  --fluent-trash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%206h11.6%22%2F%3E%3Cpath%20d%3D%22M8%206V4.5h4V6%22%2F%3E%3Cpath%20d%3D%22M6%206l.6%2010h6.8L14%206%22%2F%3E%3Cpath%20d%3D%22M8.5%208.6v4.8M11.5%208.6v4.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-archive: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.3%22%20y%3D%224%22%20width%3D%2213.4%22%20height%3D%223.6%22%20rx%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M4.6%207.6v7.7h10.8V7.6%22%2F%3E%3Cpath%20d%3D%22M8%2010.3h4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-junk: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.8l7.2%204v6.4l-7.2%204-7.2-4V6.8z%22%2F%3E%3Cpath%20d%3D%22M10%206.2v4.7M10%2014h.01%22%2F%3E%3C%2Fsvg%3E");
  --fluent-refresh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.5%207.2A5.9%205.9%200%200%200%205.2%205.8L3.6%207.4%22%2F%3E%3Cpath%20d%3D%22M3.4%203.8v3.8h3.8%22%2F%3E%3Cpath%20d%3D%22M4.5%2012.8a5.9%205.9%200%200%200%2010.3%201.4l1.6-1.6%22%2F%3E%3Cpath%20d%3D%22M16.6%2016.2v-3.8h-3.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223.5%22%20width%3D%2214%22%20height%3D%2213%22%20rx%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M6.5%2010l2.2%202.2%204.8-4.9%22%2F%3E%3C%2Fsvg%3E");
  --fluent-threads: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%205h11.6M4.2%2010h11.6M4.2%2015h7.2%22%2F%3E%3C%2Fsvg%3E");
  --fluent-options: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2210%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --fluent-menu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h12M4%2010h12M4%2014h12%22%2F%3E%3C%2Fsvg%3E");
  --fluent-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%205L6.5%2010l5%205%22%2F%3E%3Cpath%20d%3D%22M7%2010h8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-reply: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%206L4.2%2010l4.3%204%22%2F%3E%3Cpath%20d%3D%22M5%2010h6.5a4%204%200%200%201%204%204v.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-replyall: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.2%206L4%2010l4.2%204%22%2F%3E%3Cpath%20d%3D%22M4.8%2010H11a4%204%200%200%201%204%204v.8%22%2F%3E%3Cpath%20d%3D%22M12.6%206L8.4%2010l4.2%204%22%2F%3E%3C%2Fsvg%3E");
  --fluent-forward: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%206l4.3%204-4.3%204%22%2F%3E%3Cpath%20d%3D%22M15%2010H8.5a4%204%200%200%200-4%204v.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-delete: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%206h11.6%22%2F%3E%3Cpath%20d%3D%22M8%206V4.5h4V6%22%2F%3E%3Cpath%20d%3D%22M6%206l.6%2010h6.8L14%206%22%2F%3E%3C%2Fsvg%3E");
  --fluent-print: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.2%207V3.8h7.6V7%22%2F%3E%3Crect%20x%3D%225.5%22%20y%3D%2212%22%20width%3D%229%22%20height%3D%224.3%22%2F%3E%3Cpath%20d%3D%22M5.2%2013H3.6V8.5h12.8V13h-1.6%22%2F%3E%3C%2Fsvg%3E");
  --fluent-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204.3h10v11.4l-5-2.9-5%202.9z%22%2F%3E%3C%2Fsvg%3E");
  --fluent-move: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.8%206.5h5l1.6%201.9h7.8v6.9H2.8z%22%2F%3E%3Cpath%20d%3D%22M11.4%2010.2h4.2M13.7%208l2.2%202.2-2.2%202.2%22%2F%3E%3C%2Fsvg%3E");
  --fluent-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.3%22%20y%3D%226.3%22%20width%3D%229%22%20height%3D%229%22%20rx%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M4.2%2012.2V4.6h7.6%22%2F%3E%3C%2Fsvg%3E");
  --fluent-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203.5v8%22%2F%3E%3Cpath%20d%3D%22M6.8%208.8L10%2012l3.2-3.2%22%2F%3E%3Cpath%20d%3D%22M4.2%2015.8h11.6%22%2F%3E%3C%2Fsvg%3E");
  --fluent-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.5%205.5L3.8%2010l3.7%204.5%22%2F%3E%3Cpath%20d%3D%22M12.5%205.5l3.7%204.5-3.7%204.5%22%2F%3E%3C%2Fsvg%3E");
  --fluent-edit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015.6l.7-3.1%207.8-7.8a1.9%201.9%200%200%201%202.7%202.7l-7.8%207.8z%22%2F%3E%3Cpath%20d%3D%22M11.2%206l2.8%202.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-prev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.5%205L7.5%2010l5%205%22%2F%3E%3C%2Fsvg%3E");
  --fluent-next: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.5%205l5%205-5%205%22%2F%3E%3C%2Fsvg%3E");
  --fluent-save: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.2h9.2l2.8%202.8v8.8H4z%22%2F%3E%3Cpath%20d%3D%22M7%204.2v4.2h5.5V4.2%22%2F%3E%3Cpath%20d%3D%22M7%2015.8v-4h6v4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-attach: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.2%2010.7l4.3-4.3a2.6%202.6%200%200%201%203.7%203.7l-5.4%205.4a4%204%200%201%201-5.7-5.7l5.5-5.5%22%2F%3E%3C%2Fsvg%3E");
  --fluent-signature: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2014.5c2.5-4.9%204.2-7.3%205.1-7.1%201.5.3-.5%205.1.9%205.2%201.3.1%202-2.1%203-2.1%201.2%200%201.2%202.2%202.4%202.2.6%200%201.1-.4%201.6-1%22%2F%3E%3Cpath%20d%3D%22M4%2016.5h12%22%2F%3E%3C%2Fsvg%3E");
  --fluent-responses: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%205.2h11.6v8.2H8.3L5%2016v-2.6h-.8z%22%2F%3E%3Cpath%20d%3D%22M7%208.1h6M7%2010.5h4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-spellcheck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.8%2015.2l3.7-10h1.7l3.7%2010%22%2F%3E%3Cpath%20d%3D%22M5.4%2011.2h5.9%22%2F%3E%3Cpath%20d%3D%22M13.5%2014.2l1.2%201.2%202-2.4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-encrypt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.4%22%20y%3D%228.7%22%20width%3D%2211.2%22%20height%3D%227%22%20rx%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M7%208.7V6.8a3%203%200%201%201%206%200v1.9%22%2F%3E%3Cpath%20d%3D%22M10%2011.4v1.7%22%2F%3E%3C%2Fsvg%3E");
  --fluent-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.2L17%203.8l-4.4%2012.4-2.8-5.3z%22%2F%3E%3Cpath%20d%3D%22M17%203.8l-7.2%207.1%22%2F%3E%3C%2Fsvg%3E");
  --fluent-add: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204v12M4%2010h12%22%2F%3E%3C%2Fsvg%3E");
  --fluent-dropdown: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.2%208l3.8%204%203.8-4%22%2F%3E%3C%2Fsvg%3E");
}

.outlook-icon,
#taskmenu a::before,
#taskmenu .button::before,
.toolbar.menu a::before,
.toolbar.menu .button::before,
.button.icon::before,
.input-group-text.icon::before,
.popupmenu a::before,
#mailboxlist li.mailbox > a::before,
#mailboxlist li > div > a::before,
.outlook-suite-icon::before,
.outlook-brand-mark::before,
.outlook-search-placeholder::before,
.outlook-search-slot .searchbar::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background-color: currentColor !important;
  -webkit-mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: -3px !important;
}

.outlook-brand-mark {
  font-size: 0 !important;
  position: relative;
}
.outlook-brand-mark::before {
  --fluent-icon: var(--fluent-mail);
  width: 17px !important;
  height: 17px !important;
}
.outlook-search-placeholder::before,
.outlook-search-slot .searchbar::before {
  --fluent-icon: var(--fluent-search);
  position: absolute;
  left: 16px;
  top: 50%;
  margin: 0 !important;
  transform: translateY(-50%);
  color: #605e5c;
}

.outlook-suite-actions { gap: 8px; }
.outlook-suite-dot { display: none !important; }
.outlook-suite-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
}
.outlook-suite-icon:hover { background: rgba(255,255,255,.16); }
.outlook-suite-icon.notifications::before { --fluent-icon: var(--fluent-notification); }
.outlook-suite-icon.help::before { --fluent-icon: var(--fluent-help); }
.outlook-suite-icon.settings::before { --fluent-icon: var(--fluent-settings); }

#taskmenu a::before,
#taskmenu .button::before {
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
}
#taskmenu .compose::before { --fluent-icon: var(--fluent-compose); }
#taskmenu .mail::before { --fluent-icon: var(--fluent-mail); }
#taskmenu .contacts::before { --fluent-icon: var(--fluent-contacts); }
#taskmenu .settings::before { --fluent-icon: var(--fluent-settings); }
#taskmenu .theme::before { --fluent-icon: var(--fluent-theme); }
#taskmenu .about::before { --fluent-icon: var(--fluent-about); }
#taskmenu .logout::before { --fluent-icon: var(--fluent-logout); }
#taskmenu .calendar::before { --fluent-icon: var(--fluent-calendar); }

.toolbar.menu a,
.toolbar.menu .button,
.button.icon,
.input-group-text.icon,
.popupmenu a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.toolbar.menu a::before,
.toolbar.menu .button::before,
.button.icon::before,
.input-group-text.icon::before,
.popupmenu a::before {
  margin-right: 0 !important;
}
.toolbar.menu a.dropdown::before,
.button.dropdown::before,
.input-group-text.dropdown::before { --fluent-icon: var(--fluent-dropdown); width: 13px !important; }
.toolbar.menu a.compose::before, .popupmenu a.compose::before { --fluent-icon: var(--fluent-compose); }
.toolbar.menu a.refresh::before, .button.refresh::before { --fluent-icon: var(--fluent-refresh); }
.toolbar.menu a.select::before, .popupmenu a.select::before { --fluent-icon: var(--fluent-select); }
.toolbar.menu a.threads::before, .popupmenu a.threads::before { --fluent-icon: var(--fluent-threads); }
.toolbar.menu a.options::before, .toolbar.menu a.more::before, .popupmenu a.more::before { --fluent-icon: var(--fluent-options); }
.toolbar.menu a.reply::before, .popupmenu a.reply::before { --fluent-icon: var(--fluent-reply); }
.toolbar.menu a.reply-all::before, .popupmenu a.reply.all::before { --fluent-icon: var(--fluent-replyall); }
.toolbar.menu a.forward::before, .popupmenu a.forward::before { --fluent-icon: var(--fluent-forward); }
.toolbar.menu a.delete::before, .popupmenu a.delete::before, .input-group-text.delete::before { --fluent-icon: var(--fluent-delete); }
.toolbar.menu a.print::before, .popupmenu a.print::before { --fluent-icon: var(--fluent-print); }
.toolbar.menu a.markmessage::before, .popupmenu a.flag::before, .popupmenu a.unflag::before { --fluent-icon: var(--fluent-mark); }
.toolbar.menu a.prev::before { --fluent-icon: var(--fluent-prev); }
.toolbar.menu a.next::before { --fluent-icon: var(--fluent-next); }
.popupmenu a.import::before { --fluent-icon: var(--fluent-download); transform: rotate(180deg); }
.popupmenu a.download::before { --fluent-icon: var(--fluent-download); }
.popupmenu a.edit::before, .input-group-text.edit::before { --fluent-icon: var(--fluent-edit); }
.popupmenu a.source::before { --fluent-icon: var(--fluent-source); }
.popupmenu a.move::before { --fluent-icon: var(--fluent-move); }
.popupmenu a.copy::before { --fluent-icon: var(--fluent-copy); }
.popupmenu a.read::before, .popupmenu a.unread::before { --fluent-icon: var(--fluent-mail); }
.popupmenu a.undo::before { --fluent-icon: var(--fluent-refresh); }
.toolbar.menu a.save::before { --fluent-icon: var(--fluent-save); }
.toolbar.menu a.attach::before, .btn.attach::before { --fluent-icon: var(--fluent-attach); }
.toolbar.menu a.signature::before { --fluent-icon: var(--fluent-signature); }
.toolbar.menu a.responses::before { --fluent-icon: var(--fluent-responses); }
.toolbar.menu a.spellcheck::before { --fluent-icon: var(--fluent-spellcheck); }
.toolbar.menu a.encrypt::before { --fluent-icon: var(--fluent-encrypt); }
#messagetoolbar .send::before, .btn.send::before { --fluent-icon: var(--fluent-send); }
.input-group-text.add::before, .button.add::before { --fluent-icon: var(--fluent-add); }
.button.back-list-button::before,
.button.back-sidebar-button::before,
.button.back-content-button::before { --fluent-icon: var(--fluent-back); }
.button.task-menu-button::before,
.button.toolbar-menu-button::before,
.button.sidebar-menu::before { --fluent-icon: var(--fluent-menu); }

#mailboxlist li.mailbox > a,
#mailboxlist li > div > a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
#mailboxlist li.mailbox > a::before,
#mailboxlist li > div > a::before {
  --fluent-icon: var(--fluent-folder);
  width: 17px !important;
  height: 17px !important;
  opacity: .82;
}
#mailboxlist li.inbox > a::before,
#mailboxlist li.mailbox.inbox > a::before { --fluent-icon: var(--fluent-inbox); }
#mailboxlist li.drafts > a::before,
#mailboxlist li.mailbox.drafts > a::before { --fluent-icon: var(--fluent-drafts); }
#mailboxlist li.sent > a::before,
#mailboxlist li.mailbox.sent > a::before { --fluent-icon: var(--fluent-sent); }
#mailboxlist li.trash > a::before,
#mailboxlist li.mailbox.trash > a::before { --fluent-icon: var(--fluent-trash); }
#mailboxlist li.junk > a::before,
#mailboxlist li.mailbox.junk > a::before { --fluent-icon: var(--fluent-junk); }
#mailboxlist li.archive > a::before,
#mailboxlist li.mailbox.archive > a::before { --fluent-icon: var(--fluent-archive); }

#mailboxlist li.selected > a::before,
#mailboxlist li.selected > div > a::before,
#taskmenu a.selected::before,
#taskmenu .button.selected::before {
  opacity: 1;
}

@media (max-width: 700px) {
  .toolbar.menu a::before,
  .toolbar.menu .button::before { width: 20px !important; height: 20px !important; }
  .toolbar.menu a .inner,
  .toolbar.menu .button .inner { display: none !important; }
}


/* MZUNI crest mark must not inherit the generic mail mask from the icon layer. */
.outlook-brand-mark.mzuni-brand-mark::before {
  display: none !important;
  content: none !important;
}
/* -------------------------------------------------------------------------
 * v4 UX correction pass from live browser screenshots
 * v5 UX correction pass: clean login card, standard icons and inline compose
 * ---------------------------------------------------------------------- */

:root {
  --outlook-rail: var(--mzuni-green-deep);
  --outlook-rail-icon: rgba(255,255,255,.92);
  --outlook-rail-icon-muted: rgba(255,255,255,.72);
  --outlook-rail-hover: rgba(255,255,255,.14);
  --outlook-rail-active: rgba(202,210,46,.24);
}

/* The previous app launcher inherited browser/button styling on some builds and
   appeared as an empty white rounded square. Remove it unless explicitly styled. */
#outlook-suitebar .outlook-waffle {
  display: none !important;
}

#outlook-suitebar {
  padding-left: 14px !important;
}

.outlook-brand {
  min-width: 142px;
}

.outlook-brand-title {
  white-space: nowrap;
}

/* Make the top search a real live Roundcube search field, not only a visual box. */
.outlook-search-slot {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.outlook-search-slot.has-live-search {
  background: #fff !important;
  border: 1px solid rgba(6,79,43,.16) !important;
}

.outlook-search-slot.is-empty-search {
  opacity: .78;
}

.outlook-search-slot.is-empty-search::after {
  content: "Search is available in Mail";
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  color: #605e5c;
  font-size: 14px;
  pointer-events: none;
}

.outlook-search-slot .searchbar,
.outlook-search-slot form,
.outlook-search-slot .outlook-suite-search {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.outlook-search-slot .searchbar input,
.outlook-search-slot input[type="text"],
.outlook-search-slot input[type="search"] {
  width: 100% !important;
  height: 32px !important;
  cursor: text !important;
  pointer-events: auto !important;
  caret-color: var(--mzuni-green-deep) !important;
  padding: 0 42px 0 42px !important;
}

.outlook-search-slot .searchbar a,
.outlook-search-slot .searchbar button,
.outlook-search-slot .reset,
.outlook-search-slot .button {
  pointer-events: auto !important;
  z-index: 3 !important;
}

/* MZUNI rail: consistent contrast in both light and dark themes. */
#layout-menu,
html.dark-mode #layout-menu {
  background: linear-gradient(180deg, var(--mzuni-green-deep) 0%, var(--mzuni-green-dark) 100%) !important;
  border-right-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

#taskmenu,
html.dark-mode #taskmenu {
  background: transparent !important;
  color: #fff !important;
}

#taskmenu a,
#taskmenu .button,
#taskmenu span.action-buttons a,
#taskmenu span.special-buttons a,
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu .button,
html.dark-mode #taskmenu span.action-buttons a,
html.dark-mode #taskmenu span.special-buttons a {
  color: var(--outlook-rail-icon) !important;
  background: transparent !important;
}

#taskmenu a::before,
#taskmenu .button::before,
html.dark-mode #taskmenu a::before,
html.dark-mode #taskmenu .button::before {
  color: currentColor !important;
  opacity: 1 !important;
}

#taskmenu a:hover,
#taskmenu .button:hover,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu .button:hover {
  color: #fff !important;
  background: var(--outlook-rail-hover) !important;
}

#taskmenu a.selected,
#taskmenu .button.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu .button.selected,
html.dark-mode #taskmenu a.mail.selected,
html.dark-mode #taskmenu a.contacts.selected,
html.dark-mode #taskmenu a.settings.selected {
  background: var(--outlook-rail-active) !important;
  color: #fff !important;
}

#taskmenu a.selected:after,
#taskmenu .button.selected:after,
html.dark-mode #taskmenu a.selected:after,
html.dark-mode #taskmenu .button.selected:after {
  background: var(--mzuni-lime-gold) !important;
}

#taskmenu .special-buttons,
html.dark-mode #taskmenu .special-buttons {
  width: 100% !important;
  align-items: center !important;
  background: transparent !important;
  color: #fff !important;
  padding-bottom: 8px !important;
}

#taskmenu .compose,
html.dark-mode #taskmenu .compose {
  background: rgba(255,255,255,.96) !important;
  color: var(--mzuni-green-deep) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.16) !important;
}

#taskmenu .compose:hover,
html.dark-mode #taskmenu .compose:hover {
  background: var(--mzuni-lime-gold) !important;
  color: var(--mzuni-green-deep) !important;
}

/* Login: keep button and fields visible, remove odd field icons, and make mobile form-first. */
body.task-login,
body.task-login #layout,
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
}

body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  padding: clamp(16px, 2.8vh, 28px) !important;
  align-items: center !important;
  justify-items: center !important;
}

.mzuni-login-shell {
  min-height: min(560px, calc(100dvh - 44px)) !important;
  max-height: calc(100dvh - 44px) !important;
  width: min(1080px, 100%) !important;
}

.mzuni-login-hero {
  padding: clamp(32px, 4.6vh, 46px) !important;
}

.mzuni-login-hero h2 {
  font-size: clamp(30px, 3.8vw, 50px) !important;
}

.mzuni-login-hero p {
  margin-top: 16px !important;
}

.mzuni-login-points {
  margin-top: 24px !important;
}

.mzuni-login-card {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: clamp(30px, 4.8vh, 44px) clamp(30px, 4.8vw, 48px) !important;
  justify-content: center !important;
}

.mzuni-login-card #logo {
  max-width: 84px !important;
  max-height: 84px !important;
  margin-bottom: 12px !important;
}

.mzuni-login-kicker,
.mzuni-hero-kicker {
  margin-top: 14px !important;
}

.mzuni-login-card h2 {
  font-size: clamp(25px, 2.6vw, 30px) !important;
}

.mzuni-login-subtitle {
  margin: 8px 0 18px !important;
}

#login-form table,
#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#login-form table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

#login-form tr {
  margin: 0 0 13px !important;
}

#login-form td.title,
#login-form td.input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

#login-form td.title {
  margin: 0 0 6px !important;
  color: var(--mzuni-charcoal) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-align: left !important;
}

#login-form td.title::before,
#login-form td.input::before,
#login-form .input-group .icon::before,
#login-form .input-group-text.icon::before,
#login-form .input-group-text::before {
  display: none !important;
  content: none !important;
}

#login-form input,
#login-form .form-control,
#rcmloginuser,
#rcmloginpwd,
#rcmloginhost {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

#login-form .formbuttons {
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

#rcmloginsubmit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#login-footer {
  margin-top: 16px !important;
}

.mzuni-login-support {
  margin-top: 14px !important;
}

/* Remove generic button pseudo-icons from the login submit button. */
body.task-login #rcmloginsubmit::before,
body.task-login button.btn::before {
  display: none !important;
  content: none !important;
}

@media screen and (max-width: 860px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar {
    display: block !important;
    padding: 14px !important;
  }

  .mzuni-login-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 22px !important;
  }

  .mzuni-login-card {
    order: 1 !important;
    padding: 26px 22px !important;
    overflow: visible !important;
  }

  .mzuni-login-hero {
    order: 2 !important;
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 0 0 22px 22px !important;
  }

  .mzuni-login-hero h2 {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .mzuni-login-hero p,
  .mzuni-login-points {
    display: none !important;
  }

  .mzuni-login-logo-crest {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    background-size: 50px 50px !important;
  }

  .mzuni-login-card #logo {
    max-width: 72px !important;
    max-height: 72px !important;
  }
}

@media screen and (max-width: 520px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar {
    padding: 0 !important;
  }

  .mzuni-login-shell {
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .mzuni-login-card {
    min-height: 100dvh !important;
    padding: 24px 18px !important;
  }

  .mzuni-login-hero {
    display: none !important;
  }

  .mzuni-login-card h2 {
    font-size: 25px !important;
  }
}

@media screen and (max-width: 768px) {
  #layout-menu,
  html.dark-mode #layout-menu {
    background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-green-dark)) !important;
  }
  #taskmenu .special-buttons,
  html.dark-mode #taskmenu .special-buttons {
    padding-bottom: 0 !important;
  }
}



/* -------------------------------------------------------------------------
 * v5 UX refinement pass
 * - Clean card-only login screen
 * - No visible theme credit/attribution
 * - Standard theme and sign-out icon language
 * - Inline Outlook-style compose pane in the reading/content area
 * ---------------------------------------------------------------------- */

/* Use a standard sun icon for the theme switcher. */
:root {
  --fluent-theme: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M10%202.4v2M10%2015.6v2M4.6%204.6l1.4%201.4M14%2014l1.4%201.4M2.4%2010h2M15.6%2010h2M4.6%2015.4L6%2014M14%206l1.4-1.4%22%2F%3E%3C%2Fsvg%3E");
  --fluent-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.2%204.2H4.8a1.8%201.8%200%200%200-1.8%201.8v8a1.8%201.8%200%200%200%201.8%201.8h3.4%22%2F%3E%3Cpath%20d%3D%22M11.5%206.5L15%2010l-3.5%203.5%22%2F%3E%3Cpath%20d%3D%22M15%2010H7.5%22%2F%3E%3C%2Fsvg%3E");
  --fluent-close: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%205l10%2010M15%205L5%2015%22%2F%3E%3C%2Fsvg%3E");
  --fluent-popout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204.5H4.8a1.3%201.3%200%200%200-1.3%201.3v9.4a1.3%201.3%200%200%200%201.3%201.3h9.4a1.3%201.3%200%200%200%201.3-1.3V13%22%2F%3E%3Cpath%20d%3D%22M11%203.8h5.2V9%22%2F%3E%3Cpath%20d%3D%22M16%204l-7%207%22%2F%3E%3C%2Fsvg%3E");
}

/* Logo: do not show an accidental white square tile in the top app bar. */
.outlook-brand-mark.mzuni-brand-mark {
  background: transparent url("../images/mzuni-crest-256.png") center / contain no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

/* Login: centered modern card only. */
body.task-login {
  background:
    radial-gradient(circle at 16% 18%, rgba(202,210,46,.18), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(21,155,72,.14), transparent 31%),
    linear-gradient(135deg, #f7faf6 0%, #ffffff 48%, #f0f6ef 100%) !important;
}

.mzuni-login-card-only,
.mzuni-login-shell.mzuni-login-card-only {
  width: min(500px, calc(100vw - 36px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  grid-template-columns: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mzuni-login-card-only .mzuni-login-card,
body.task-login .mzuni-login-card {
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border: 1px solid rgba(222,221,221,.85) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 22px 70px rgba(33,33,30,.14), 0 1px 1px rgba(33,33,30,.05) !important;
  align-items: stretch !important;
  text-align: center !important;
  overflow: visible !important;
}

.mzuni-login-card-only .mzuni-login-card::before {
  content: "";
  display: block;
  height: 4px;
  width: 96px;
  margin: -22px auto 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-green), var(--mzuni-lime-gold));
}

.mzuni-login-logo-badge {
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff, #f7faf6);
  border: 1px solid rgba(6,79,43,.12);
  box-shadow: 0 12px 30px rgba(6,79,43,.12);
}

.mzuni-login-card .mzuni-login-logo-badge #logo,
.mzuni-login-card #logo {
  display: block !important;
  width: 94px !important;
  max-width: 94px !important;
  height: 94px !important;
  max-height: 94px !important;
  object-fit: contain !important;
  margin: 0 !important;
  background: transparent !important;
}

.mzuni-login-kicker,
.mzuni-hero-kicker,
.mzuni-login-hero,
.mzuni-login-points {
  display: none !important;
}

.mzuni-login-card h2 {
  text-align: center !important;
  font-size: clamp(28px, 3.2vw, 34px) !important;
  letter-spacing: -.025em !important;
}

.mzuni-login-subtitle {
  text-align: center !important;
  max-width: 360px;
  margin: 8px auto 24px !important;
}

#login-form td.title {
  text-align: left !important;
}

.mzuni-login-support,
#login-footer {
  justify-content: center !important;
  text-align: center !important;
}

/* No visible attribution or theme-credit text. */
.mzuni-theme-credit,
.outlook-theme-credit,
[data-outlook-theme-credit] {
  display: none !important;
}

/* Inline compose pane that appears in the reading/content area. */
#layout-content.outlook-compose-host {
  position: relative !important;
}

#outlook-inline-compose {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--outlook-border);
  box-shadow: -14px 0 36px rgba(33,33,30,.10);
}

#outlook-inline-compose.is-open {
  display: flex;
}

.outlook-inline-compose-header {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--outlook-border);
  background: linear-gradient(90deg, #ffffff, #f6faf5);
  color: var(--outlook-text);
  font-weight: 700;
}

.outlook-inline-compose-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.outlook-inline-compose-title::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--mzuni-green-deep);
  -webkit-mask: var(--fluent-compose) center / contain no-repeat;
  mask: var(--fluent-compose) center / contain no-repeat;
}

.outlook-inline-compose-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.outlook-inline-compose-actions button,
.outlook-inline-compose-actions a {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--outlook-text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}

.outlook-inline-compose-actions button:hover,
.outlook-inline-compose-actions a:hover {
  background: #f3f7f1;
}

.outlook-inline-compose-close::before,
.outlook-inline-compose-popout::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  display: block;
  -webkit-mask: var(--fluent-icon) center / contain no-repeat;
  mask: var(--fluent-icon) center / contain no-repeat;
}

.outlook-inline-compose-close::before { --fluent-icon: var(--fluent-close); }
.outlook-inline-compose-popout::before { --fluent-icon: var(--fluent-popout); }

#outlook-inline-compose iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Framed compose page inside the Outlook content area. */
html.iframe body.action-compose {
  background: #fff !important;
  overflow: hidden !important;
}

html.iframe body.action-compose #layout-sidebar.sidebar-right {
  display: none !important;
}

html.iframe body.action-compose #layout-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 0 !important;
  border: 0 !important;
}

html.iframe body.action-compose #layout-content > .header {
  height: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
}

html.iframe body.action-compose #compose-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html.iframe body.action-compose #compose-headers,
html.iframe body.action-compose #composebodycontainer {
  max-width: none !important;
  margin-left: 18px !important;
  margin-right: 18px !important;
}

html.iframe body.action-compose #composebody,
html.iframe body.action-compose #composebody_ifr,
html.iframe body.action-compose .tox-tinymce {
  min-height: 360px !important;
}

html.iframe body.action-compose .formbuttons {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 10px 18px !important;
  background: #fff;
  border-top: 1px solid var(--outlook-border);
}

@media screen and (max-width: 860px) {
  .mzuni-login-card-only,
  .mzuni-login-shell.mzuni-login-card-only {
    width: min(480px, calc(100vw - 28px)) !important;
  }
  .mzuni-login-card-only .mzuni-login-card,
  body.task-login .mzuni-login-card {
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }
  .mzuni-login-logo-badge {
    width: 102px;
    height: 102px;
    border-radius: 24px;
  }
  .mzuni-login-card .mzuni-login-logo-badge #logo,
  .mzuni-login-card #logo {
    width: 82px !important;
    height: 82px !important;
  }
}

@media screen and (max-width: 768px) {
  #outlook-inline-compose {
    position: fixed;
    inset: var(--outlook-suitebar-height) 0 54px 0;
    z-index: 1101;
  }
}


/* -------------------------------------------------------------------------
 * v6 UX refinement pass
 * - Seamless Outlook-style compose pane rather than a floating/card compose
 * - Profile/avatar menu in the top-right corner with branded quick links
 * - Standard icon language for theme, account and sign-out actions
 * ---------------------------------------------------------------------- */
:root {
  --fluent-account: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M4.2%2016.5c.9-3.2%202.9-4.8%205.8-4.8s4.9%201.6%205.8%204.8%22%2F%3E%3C%2Fsvg%3E");
  --fluent-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%207.5L10%2012l4.5-4.5%22%2F%3E%3C%2Fsvg%3E");
}

.outlook-suite-actions { position: relative; gap: 6px !important; }
.outlook-profile-menu { position: relative; display: inline-flex; align-items: center; }
.outlook-profile-trigger { width: 42px; height: 42px; border: 0; border-radius: 10px; padding: 0; display: inline-grid; place-items: center; color: #fff; background: transparent; cursor: pointer; }
.outlook-profile-trigger:hover, .outlook-profile-menu.is-open .outlook-profile-trigger { background: rgba(255,255,255,.16); }
.outlook-profile-trigger:focus-visible { outline: 2px solid rgba(255,255,255,.92); outline-offset: 2px; }
.outlook-profile-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--mzuni-green-deep), var(--mzuni-green)); color: #fff; border: 2px solid rgba(255,255,255,.74); box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outlook-profile-avatar.large { width: 54px; height: 54px; border-color: rgba(6,79,43,.13); box-shadow: 0 8px 22px rgba(6,79,43,.13); font-size: 16px; }
.outlook-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outlook-profile-card { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1300; width: min(340px, calc(100vw - 20px)); display: none; color: var(--outlook-text); background: #fff; border: 1px solid rgba(6,79,43,.15); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08); overflow: hidden; text-align: left; }
.outlook-profile-menu.is-open .outlook-profile-card { display: block; animation: outlookProfileDrop .14s ease-out; }
@keyframes outlookProfileDrop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.outlook-profile-card::before { content: ""; position: absolute; top: -6px; right: 17px; width: 12px; height: 12px; background: var(--mzuni-green-deep); transform: rotate(45deg); }
.outlook-profile-card-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, var(--mzuni-green-deep), var(--mzuni-green-dark) 58%, var(--mzuni-green)); }
.outlook-profile-crest { width: 42px; height: 42px; flex: 0 0 42px; background: url("../images/mzuni-crest-256.png") center / contain no-repeat; filter: drop-shadow(0 3px 8px rgba(0,0,0,.22)); }
.outlook-profile-card-brand strong { display: block; font-size: 15px; line-height: 1.25; }
.outlook-profile-card-brand span:not(.outlook-profile-crest) { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.78); }
.outlook-profile-card-user { display: flex; align-items: center; gap: 13px; padding: 18px; border-bottom: 1px solid var(--outlook-border); background: linear-gradient(180deg, #fff, #fbfdfb); }
.outlook-profile-usertext { min-width: 0; }
.outlook-profile-usertext strong { display: block; font-size: 14px; color: var(--outlook-text); }
.outlook-profile-name { display: block; max-width: 220px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--outlook-muted); font-size: 12.5px; }
.outlook-profile-links { display: grid; gap: 2px; padding: 8px; }
.outlook-profile-link, .outlook-profile-logout { min-height: 42px; display: flex !important; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: var(--outlook-text) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; }
.outlook-profile-link:hover, .outlook-profile-logout:hover, .outlook-profile-link:focus, .outlook-profile-logout:focus { background: #eef7ee !important; color: var(--mzuni-green-deep) !important; }
.outlook-profile-link::before, .outlook-profile-logout::before { content: "" !important; width: 19px !important; height: 19px !important; flex: 0 0 19px !important; display: inline-block !important; background: currentColor !important; -webkit-mask: var(--fluent-icon, var(--fluent-account)) center / contain no-repeat !important; mask: var(--fluent-icon, var(--fluent-account)) center / contain no-repeat !important; margin: 0 !important; vertical-align: -3px !important; }
.outlook-profile-link .inner, .outlook-profile-logout .inner { display: inline !important; opacity: 1 !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: nowrap !important; }
.outlook-profile-link.mail::before { --fluent-icon: var(--fluent-mail); }
.outlook-profile-link.contacts::before { --fluent-icon: var(--fluent-contacts); }
.outlook-profile-link.settings::before { --fluent-icon: var(--fluent-settings); }
.outlook-profile-link.theme::before { --fluent-icon: var(--fluent-theme); }
.outlook-profile-link.about::before { --fluent-icon: var(--fluent-help); }
.outlook-profile-logout::before { --fluent-icon: var(--fluent-logout); }
.outlook-profile-footer { padding: 8px; border-top: 1px solid var(--outlook-border); background: #fbfdfb; }
.outlook-profile-logout { color: #8a1f11 !important; }
.outlook-profile-logout:hover, .outlook-profile-logout:focus { background: #fff2f0 !important; color: #8a1f11 !important; }

/* Seamless Outlook-style compose. It lives in the reading pane and does not look like a floating card. */
#layout-content.outlook-compose-host { position: relative !important; overflow: hidden !important; }
#outlook-inline-compose { position: absolute !important; inset: 0 !important; z-index: 80 !important; display: none; flex-direction: column; background: var(--outlook-surface) !important; border: 0 !important; border-left: 1px solid var(--outlook-border) !important; border-radius: 0 !important; box-shadow: none !important; }
#outlook-inline-compose.is-open { display: flex !important; }
#layout-content.outlook-compose-open .outlook-preview-empty, #layout-content.outlook-compose-open > .iframe-wrapper { visibility: hidden !important; }
.outlook-inline-compose-header { height: 52px !important; min-height: 52px !important; padding: 0 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; border: 0 !important; border-bottom: 1px solid var(--outlook-border) !important; background: #fff !important; color: var(--outlook-text) !important; font-weight: 650 !important; box-shadow: none !important; }
.outlook-inline-compose-title { font-size: 15px !important; letter-spacing: 0 !important; }
.outlook-inline-compose-title::before { width: 18px !important; height: 18px !important; background: var(--mzuni-green-deep) !important; }
.outlook-inline-compose-actions button, .outlook-inline-compose-actions a { border-radius: 6px !important; color: #4a4f48 !important; }
.outlook-inline-compose-actions button:hover, .outlook-inline-compose-actions a:hover { background: #edf5ed !important; color: var(--mzuni-green-deep) !important; }
#outlook-inline-compose iframe { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; border: 0 !important; background: #fff !important; }
html.iframe body.action-compose, html.iframe body.action-compose #layout, html.iframe body.action-compose #layout-content { background: #fff !important; }
html.iframe body.action-compose #layout-content > .header { display: none !important; }
html.iframe body.action-compose #compose-content { padding: 14px 18px 0 !important; background: #fff !important; overflow: auto !important; }
html.iframe body.action-compose #compose-headers, html.iframe body.action-compose #composebodycontainer { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; border-radius: 0 !important; }
html.iframe body.action-compose #compose-headers { border-bottom: 1px solid var(--outlook-border) !important; }
html.iframe body.action-compose .compose-headers .form-group, html.iframe body.action-compose #compose-headers .form-group { border-bottom: 1px solid #edf0ec !important; min-height: 46px !important; margin: 0 !important; }
html.iframe body.action-compose #composebody, html.iframe body.action-compose #composebody_ifr, html.iframe body.action-compose .tox-tinymce { min-height: clamp(340px, 55vh, 680px) !important; }
html.iframe body.action-compose .formbuttons { position: sticky !important; bottom: 0 !important; z-index: 20 !important; padding: 10px 18px !important; background: rgba(255,255,255,.98) !important; border-top: 1px solid var(--outlook-border) !important; box-shadow: 0 -8px 28px rgba(33,33,30,.06) !important; }

html.dark-mode .outlook-profile-card { color: #f3f7f1; background: #171b17; border-color: rgba(255,255,255,.10); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.22); }
html.dark-mode .outlook-profile-card-user, html.dark-mode .outlook-profile-footer { background: #151a15; border-color: rgba(255,255,255,.10); }
html.dark-mode .outlook-profile-usertext strong, html.dark-mode .outlook-profile-link, html.dark-mode .outlook-profile-logout { color: #f3f7f1 !important; }
html.dark-mode .outlook-profile-name { color: rgba(243,247,241,.72); }
html.dark-mode .outlook-profile-link:hover, html.dark-mode .outlook-profile-link:focus { background: rgba(141,198,62,.16) !important; color: #ffffff !important; }
html.dark-mode .outlook-profile-logout:hover, html.dark-mode .outlook-profile-logout:focus { background: rgba(255,100,80,.15) !important; color: #ffb1a6 !important; }
html.dark-mode #outlook-inline-compose, html.dark-mode .outlook-inline-compose-header, html.dark-mode #outlook-inline-compose iframe, html.iframe.dark-mode body.action-compose, html.iframe.dark-mode body.action-compose #layout, html.iframe.dark-mode body.action-compose #layout-content, html.iframe.dark-mode body.action-compose #compose-content { background: #1a1f1a !important; color: #f3f7f1 !important; }
html.dark-mode .outlook-inline-compose-header, html.iframe.dark-mode body.action-compose #compose-headers, html.iframe.dark-mode body.action-compose .compose-headers .form-group, html.iframe.dark-mode body.action-compose #compose-headers .form-group, html.iframe.dark-mode body.action-compose .formbuttons { border-color: rgba(255,255,255,.12) !important; }
html.iframe.dark-mode body.action-compose .formbuttons { background: rgba(26,31,26,.98) !important; }

@media screen and (max-width: 980px) {
  .outlook-profile-card { right: -4px; }
  .outlook-suite-icon.notifications, .outlook-suite-icon.help { display: none; }
}
@media screen and (max-width: 768px) {
  .outlook-profile-card { position: fixed; top: calc(var(--outlook-suitebar-height) + 8px); right: 10px; left: 10px; width: auto; }
  .outlook-profile-card::before { right: 24px; }
  #outlook-inline-compose { position: fixed !important; inset: var(--outlook-suitebar-height) 0 54px 0 !important; z-index: 1101 !important; border-left: 0 !important; }
  .outlook-inline-compose-header { height: 50px !important; min-height: 50px !important; }
}


/* -------------------------------------------------------------------------
 * v7 refinement
 * Keep the preferred MZUNI Outlook-style inbox layout, clean attribution text,
 * standardise profile/theme/sign-out interactions, and make compose seamless.
 * ------------------------------------------------------------------------- */

/* Brand crest: show the crest itself, not an accidental white square/tile. */
.outlook-brand { min-width: 132px !important; }
.outlook-brand-mark,
.outlook-brand-mark.mzuni-brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("../images/mzuni-crest-256.png") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.outlook-brand-title { font-weight: 700 !important; color: #fff !important; }

/* Top action bar: standard, intuitive icons and no direct sign-out clutter. */
.outlook-suite-actions {
  gap: 8px !important;
  min-width: max-content !important;
  margin-left: auto !important;
}
.outlook-top-action {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.outlook-top-action:hover,
.outlook-top-action:focus,
.outlook-top-action.selected {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.outlook-top-action.compose {
  background: rgba(255,255,255,.16) !important;
}
.outlook-top-action.compose:hover,
.outlook-top-action.compose:focus {
  background: rgba(255,255,255,.24) !important;
}
.outlook-top-action::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
  background: currentColor !important;
  -webkit-mask: var(--fluent-icon, var(--fluent-mail)) center / contain no-repeat !important;
  mask: var(--fluent-icon, var(--fluent-mail)) center / contain no-repeat !important;
  margin: 0 !important;
}
.outlook-top-action .inner {
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}
.outlook-top-action.compose::before { --fluent-icon: var(--fluent-compose); }
.outlook-top-action.contacts::before { --fluent-icon: var(--fluent-contacts); }
.outlook-top-action.settings::before { --fluent-icon: var(--fluent-settings); }
.outlook-top-action.help::before { --fluent-icon: var(--fluent-help); }
.outlook-top-action.theme::before { --fluent-icon: var(--fluent-theme); }
.outlook-top-action.logout { display: none !important; }

/* Keep the actual Roundcube search form looking clickable and functional. */
.outlook-search-slot { cursor: text !important; }
.outlook-search-slot input[type="text"],
.outlook-search-slot input[type="search"],
.outlook-search-slot .searchbar input {
  font-size: 14px !important;
  background: transparent !important;
  color: var(--outlook-text) !important;
}

/* Profile/avatar dropdown: branded but standard; logout is clearly at bottom. */
.outlook-profile-menu { margin-left: 4px !important; }
.outlook-profile-trigger {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
}
.outlook-profile-trigger:hover,
.outlook-profile-menu.is-open .outlook-profile-trigger {
  background: rgba(255,255,255,.16) !important;
}
.outlook-profile-avatar {
  background: linear-gradient(135deg, #064f2b, #159b48) !important;
  border: 2px solid rgba(255,255,255,.82) !important;
}
.outlook-profile-card {
  border-radius: 14px !important;
  overflow: hidden !important;
}
.outlook-profile-footer {
  padding: 9px 8px !important;
}
.outlook-profile-logout {
  min-height: 44px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* Remove any visible theme attribution if present from older cached markup. */
.mzuni-theme-credit,
.outlook-theme-credit,
[data-outlook-theme-credit],
.footer .theme-credit,
#outlook-theme-credit {
  display: none !important;
  visibility: hidden !important;
}

/* Seamless compose in the reading pane: no card, no shadow, no floating border. */
#layout-content.outlook-compose-host,
#layout-content.outlook-compose-open {
  position: relative !important;
  overflow: hidden !important;
}
#outlook-inline-compose,
#outlook-inline-compose.outlook-compose-seamless,
#outlook-inline-compose.outlook-compose-pane {
  position: absolute !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: none;
  flex-direction: column !important;
  background: var(--outlook-surface) !important;
  border: 0 !important;
  border-left: 1px solid var(--outlook-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#outlook-inline-compose.is-open { display: flex !important; }
#layout-content.outlook-compose-open > .header,
#layout-content.outlook-compose-open .outlook-preview-empty,
#layout-content.outlook-compose-open > .iframe-wrapper {
  visibility: hidden !important;
}
.outlook-inline-compose-header {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  box-shadow: none !important;
}
.outlook-inline-compose-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--outlook-text) !important;
}
#outlook-inline-compose iframe {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #fff !important;
}
html.iframe body.action-compose #layout-content > .header { display: none !important; }
html.iframe body.action-compose #compose-content {
  padding: 10px 16px 0 !important;
  background: #fff !important;
  overflow: auto !important;
}
html.iframe body.action-compose #compose-headers,
html.iframe body.action-compose #composebodycontainer {
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
html.iframe body.action-compose #compose-headers {
  border-bottom: 1px solid var(--outlook-border) !important;
}
html.iframe body.action-compose .compose-headers .form-group,
html.iframe body.action-compose #compose-headers .form-group {
  min-height: 44px !important;
  margin: 0 !important;
  border-bottom: 1px solid #edf0ec !important;
}
html.iframe body.action-compose #composebody,
html.iframe body.action-compose #composebody_ifr,
html.iframe body.action-compose .tox-tinymce {
  min-height: clamp(360px, 58vh, 760px) !important;
  border: 0 !important;
}
html.iframe body.action-compose .formbuttons {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  padding: 10px 16px !important;
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid var(--outlook-border) !important;
  box-shadow: none !important;
}

html.dark-mode #outlook-inline-compose,
html.dark-mode .outlook-inline-compose-header,
html.dark-mode #outlook-inline-compose iframe,
html.iframe.dark-mode body.action-compose,
html.iframe.dark-mode body.action-compose #layout,
html.iframe.dark-mode body.action-compose #layout-content,
html.iframe.dark-mode body.action-compose #compose-content {
  background: #1a1f1a !important;
  color: #f3f7f1 !important;
}
html.dark-mode .outlook-inline-compose-header,
html.iframe.dark-mode body.action-compose #compose-headers,
html.iframe.dark-mode body.action-compose .compose-headers .form-group,
html.iframe.dark-mode body.action-compose #compose-headers .form-group,
html.iframe.dark-mode body.action-compose .formbuttons {
  border-color: rgba(255,255,255,.12) !important;
}

@media screen and (max-width: 1180px) {
  .outlook-top-action .inner { display: none !important; }
  .outlook-top-action { width: 38px !important; padding: 0 !important; justify-content: center !important; }
}
@media screen and (max-width: 900px) {
  .outlook-top-action.contacts,
  .outlook-top-action.help { display: none !important; }
}
@media screen and (max-width: 760px) {
  .outlook-brand-title { display: none !important; }
  .outlook-suite-actions { gap: 4px !important; }
  .outlook-top-action.settings { display: none !important; }
  #outlook-inline-compose,
  #outlook-inline-compose.outlook-compose-seamless,
  #outlook-inline-compose.outlook-compose-pane {
    position: fixed !important;
    inset: var(--outlook-suitebar-height) 0 54px 0 !important;
    border-left: 0 !important;
    z-index: 1101 !important;
  }
}


/* -------------------------------------------------------------------------
 * v8 refinement
 * Make message/compose icons visible, keep compose actions obvious, and add
 * a MZUNI favicon generated from the official crest.
 * ------------------------------------------------------------------------- */

/* Keep command icons visible and intuitive in the mail/message toolbars. */
#mailtoolbar a,
#mailtoolbar .button,
#messagetoolbar a,
#messagetoolbar .button,
.toolbar.menu a,
.toolbar.menu .button {
  gap: 7px !important;
  align-items: center !important;
}

#mailtoolbar a::before,
#mailtoolbar .button::before,
#messagetoolbar a::before,
#messagetoolbar .button::before,
.toolbar.menu a::before,
.toolbar.menu .button::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: inline-block !important;
  flex: 0 0 18px !important;
  background: currentColor !important;
  -webkit-mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  opacity: .96 !important;
  margin: 0 !important;
}

#mailtoolbar a.reply::before,
#messagetoolbar a.reply::before,
.toolbar.menu a.reply::before,
.button.reply::before { --fluent-icon: var(--fluent-reply) !important; }

#mailtoolbar a.reply-all::before,
#messagetoolbar a.reply-all::before,
.toolbar.menu a.reply-all::before,
.popupmenu a.reply.all::before,
.button.reply-all::before { --fluent-icon: var(--fluent-replyall) !important; }

#mailtoolbar a.forward::before,
#messagetoolbar a.forward::before,
.toolbar.menu a.forward::before,
.popupmenu a.forward::before,
.button.forward::before { --fluent-icon: var(--fluent-forward) !important; }

#mailtoolbar a.delete::before,
#messagetoolbar a.delete::before,
.toolbar.menu a.delete::before,
.button.delete::before { --fluent-icon: var(--fluent-delete) !important; }

#mailtoolbar a.markmessage::before,
#messagetoolbar a.markmessage::before,
.toolbar.menu a.markmessage::before { --fluent-icon: var(--fluent-mark) !important; }

#mailtoolbar a.more::before,
#messagetoolbar a.more::before,
.toolbar.menu a.more::before,
.toolbar.menu a.options::before { --fluent-icon: var(--fluent-options) !important; }

#mailtoolbar a.prev::before,
#messagetoolbar a.prev::before,
.toolbar.menu a.prev::before { --fluent-icon: var(--fluent-prev) !important; }

#mailtoolbar a.next::before,
#messagetoolbar a.next::before,
.toolbar.menu a.next::before { --fluent-icon: var(--fluent-next) !important; }

#messagetoolbar a.send::before,
#messagetoolbar .send::before,
.btn.send::before { --fluent-icon: var(--fluent-send) !important; }

#messagetoolbar a.save::before,
#messagetoolbar .save::before,
.outlook-compose-save::before { --fluent-icon: var(--fluent-save) !important; }

#messagetoolbar a.attach::before,
#messagetoolbar .attach::before,
.btn.attach::before,
.outlook-compose-attach::before { --fluent-icon: var(--fluent-attach) !important; }

#messagetoolbar a.signature::before,
#messagetoolbar .signature::before,
.outlook-compose-signature::before { --fluent-icon: var(--fluent-signature) !important; }

#messagetoolbar a.responses::before,
#messagetoolbar .responses::before,
.outlook-compose-responses::before { --fluent-icon: var(--fluent-responses) !important; }

#mailtoolbar a.disabled,
#mailtoolbar .button.disabled,
#messagetoolbar a.disabled,
#messagetoolbar .button.disabled,
.toolbar.menu a.disabled,
.toolbar.menu .button.disabled {
  opacity: .68 !important;
}

#mailtoolbar a.disabled::before,
#messagetoolbar a.disabled::before,
.toolbar.menu a.disabled::before,
#mailtoolbar .button.disabled::before,
#messagetoolbar .button.disabled::before,
.toolbar.menu .button.disabled::before {
  opacity: .8 !important;
}

/* Preserve text labels on roomy screens; on compact screens keep icons but do not remove buttons. */
@media screen and (min-width: 1181px) {
  #mailtoolbar a .inner,
  #messagetoolbar a .inner,
  .toolbar.menu a .inner,
  #mailtoolbar .button .inner,
  #messagetoolbar .button .inner,
  .toolbar.menu .button .inner {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    position: static !important;
  }
}

/* Inline compose: the Attach command must always remain visible. */
html.iframe body.action-compose #messagetoolbar a.attach,
html.iframe body.action-compose #messagetoolbar .attach,
html.layout-small body.action-compose #messagetoolbar a.attach,
html.layout-phone body.action-compose #messagetoolbar a.attach,
html.layout-small body.action-compose #messagetoolbar .attach,
html.layout-phone body.action-compose #messagetoolbar .attach {
  display: inline-flex !important;
  visibility: visible !important;
}

html.iframe body.action-compose #messagetoolbar {
  min-height: 46px !important;
  height: auto !important;
  padding: 5px 12px !important;
  gap: 6px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

html.iframe body.action-compose #messagetoolbar a,
html.iframe body.action-compose #messagetoolbar .button {
  display: inline-flex !important;
  min-width: 38px !important;
  min-height: 34px !important;
  color: var(--outlook-text) !important;
}

/* Bottom compose action bar: Outlook-like but explicit, so users can see Send, Attach and key actions. */
html.iframe body.action-compose .outlook-compose-bottom-bar,
.outlook-compose-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 24 !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid var(--outlook-border) !important;
}

.outlook-compose-primary-actions,
.outlook-compose-secondary-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.outlook-compose-bottom-bar .btn,
.outlook-compose-bottom-bar a,
.outlook-compose-bottom-bar button {
  min-height: 34px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  line-height: 34px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.outlook-compose-bottom-bar .btn::before,
.outlook-compose-bottom-bar a::before,
.outlook-compose-bottom-bar button::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  display: inline-block !important;
  background: currentColor !important;
  -webkit-mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
}

.outlook-compose-bottom-bar .send::before { --fluent-icon: var(--fluent-send) !important; }
.outlook-compose-bottom-bar .attach::before { --fluent-icon: var(--fluent-attach) !important; }
.outlook-compose-bottom-bar .save::before { --fluent-icon: var(--fluent-save) !important; }
.outlook-compose-bottom-bar .signature::before { --fluent-icon: var(--fluent-signature) !important; }
.outlook-compose-bottom-bar .responses::before { --fluent-icon: var(--fluent-responses) !important; }

.outlook-compose-bottom-bar .btn-secondary,
.outlook-compose-bottom-bar a.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--outlook-border-strong) !important;
  color: var(--outlook-text) !important;
}

.outlook-compose-bottom-bar .btn-secondary:hover,
.outlook-compose-bottom-bar a.btn-secondary:hover {
  background: #edf5ed !important;
  border-color: #b8d7bd !important;
  color: var(--mzuni-green-deep) !important;
}

html.dark-mode html.iframe body.action-compose #messagetoolbar,
html.iframe.dark-mode body.action-compose #messagetoolbar,
html.iframe.dark-mode body.action-compose .outlook-compose-bottom-bar,
html.dark-mode .outlook-compose-bottom-bar {
  background: #1a1f1a !important;
  border-color: rgba(255,255,255,.12) !important;
}

html.iframe.dark-mode body.action-compose .outlook-compose-bottom-bar .btn-secondary,
html.dark-mode .outlook-compose-bottom-bar .btn-secondary,
html.dark-mode .outlook-compose-bottom-bar a.btn-secondary {
  background: #202720 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #f3f7f1 !important;
}

@media screen and (max-width: 760px) {
  .outlook-compose-bottom-bar {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .outlook-compose-bottom-bar .btn,
  .outlook-compose-bottom-bar a,
  .outlook-compose-bottom-bar button {
    min-width: 38px !important;
    padding: 0 10px !important;
  }
}


/* -------------------------------------------------------------------------
 * v9 refinement
 * Focused fix for the message-reading command bar: Back, Reply, Reply all,
 * Forward, Delete, Archive, Attach, Junk/Spam, Mark, More, Previous/Next.
 * This keeps the preferred inbox layout intact and only strengthens the
 * toolbar/icon treatment.
 * ------------------------------------------------------------------------- */

/* Give the message action bar the same visible Outlook-style command density as the screenshot. */
#layout-content > .header {
  min-height: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  overflow: visible !important;
  background: #fff !important;
}

#layout-content > .header > .button.back-list-button,
#layout-content > .header > .button.back-content-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  min-width: 56px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  margin-right: 8px !important;
  color: #1f1f1f !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  text-decoration: none !important;
}

#layout-content > .header > .button.back-list-button:hover,
#layout-content > .header > .button.back-content-button:hover {
  background: #f3f2f1 !important;
  border-color: #e4e7e1 !important;
}

#mailtoolbar.toolbar.menu {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
  padding: 0 !important;
}

#mailtoolbar.toolbar.menu::-webkit-scrollbar { height: 6px !important; }
#mailtoolbar.toolbar.menu::-webkit-scrollbar-thumb { background: rgba(6,79,43,.18) !important; border-radius: 999px !important; }

/* Every command in the reading toolbar should render as an inline icon + label. */
#layout-content > .header > .button.back-list-button,
#layout-content > .header > .button.back-content-button,
#mailtoolbar.toolbar.menu > a,
#mailtoolbar.toolbar.menu > .button,
#mailtoolbar.toolbar.menu > span.dropbutton > a,
#mailtoolbar.toolbar.menu > span.dropbutton > .button,
#mailtoolbar.toolbar.menu .dropbutton > a,
#mailtoolbar.toolbar.menu .dropbutton > .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  padding: 0 10px !important;
  color: #1f1f1f !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

#mailtoolbar.toolbar.menu > a:hover,
#mailtoolbar.toolbar.menu > .button:hover,
#mailtoolbar.toolbar.menu .dropbutton > a:hover,
#mailtoolbar.toolbar.menu .dropbutton > .button:hover,
#mailtoolbar.toolbar.menu > a:focus-visible,
#mailtoolbar.toolbar.menu > .button:focus-visible,
#mailtoolbar.toolbar.menu .dropbutton > a:focus-visible,
#mailtoolbar.toolbar.menu .dropbutton > .button:focus-visible {
  background: #f3f2f1 !important;
  border-color: #e4e7e1 !important;
  color: #064f2b !important;
}

#mailtoolbar.toolbar.menu > span.dropbutton {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

#mailtoolbar.toolbar.menu .spacer {
  display: inline-block !important;
  width: 1px !important;
  height: 24px !important;
  flex: 0 0 1px !important;
  background: #e2e7df !important;
  margin: 0 8px !important;
}

/* Re-enable label text on the message toolbar. Elastic sometimes visually hides .inner labels. */
#layout-content > .header > .button.back-list-button .inner,
#layout-content > .header > .button.back-content-button .inner,
#mailtoolbar.toolbar.menu a .inner,
#mailtoolbar.toolbar.menu .button .inner,
#mailtoolbar.toolbar.menu .dropbutton a .inner,
#mailtoolbar.toolbar.menu .dropbutton .button .inner {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  line-height: inherit !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  color: currentColor !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Use mask-based standard icons regardless of the underlying Roundcube/plug-in classes. */
#layout-content > .header > .button.back-list-button::before,
#layout-content > .header > .button.back-content-button::before,
#mailtoolbar.toolbar.menu a::before,
#mailtoolbar.toolbar.menu .button::before,
#mailtoolbar.toolbar.menu .dropbutton > a::before,
#mailtoolbar.toolbar.menu .dropbutton > .button::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
  margin: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  mask: var(--fluent-icon, var(--fluent-options)) center / contain no-repeat !important;
  opacity: .98 !important;
}

/* Exact command mappings for the bar the user highlighted. */
#layout-content > .header > .button.back-list-button::before,
#layout-content > .header > .button.back-content-button::before,
#mailtoolbar.toolbar.menu a.back::before,
#mailtoolbar.toolbar.menu .button.back::before { --fluent-icon: var(--fluent-back) !important; }

#mailtoolbar.toolbar.menu a.reply::before,
#mailtoolbar.toolbar.menu .button.reply::before { --fluent-icon: var(--fluent-reply) !important; }

#mailtoolbar.toolbar.menu a.reply-all::before,
#mailtoolbar.toolbar.menu .button.reply-all::before,
#mailtoolbar.toolbar.menu a.reply.all::before,
#mailtoolbar.toolbar.menu .button.reply.all::before { --fluent-icon: var(--fluent-replyall) !important; }

#mailtoolbar.toolbar.menu a.forward::before,
#mailtoolbar.toolbar.menu .button.forward::before { --fluent-icon: var(--fluent-forward) !important; }

#mailtoolbar.toolbar.menu a.delete::before,
#mailtoolbar.toolbar.menu .button.delete::before { --fluent-icon: var(--fluent-delete) !important; }

#mailtoolbar.toolbar.menu a.archive::before,
#mailtoolbar.toolbar.menu .button.archive::before,
#mailtoolbar.toolbar.menu a.archive-message::before,
#mailtoolbar.toolbar.menu .button.archive-message::before { --fluent-icon: var(--fluent-archive) !important; }

#mailtoolbar.toolbar.menu a.attach::before,
#mailtoolbar.toolbar.menu .button.attach::before,
#mailtoolbar.toolbar.menu a.attachment::before,
#mailtoolbar.toolbar.menu .button.attachment::before { --fluent-icon: var(--fluent-attach) !important; }

#mailtoolbar.toolbar.menu a.junk::before,
#mailtoolbar.toolbar.menu .button.junk::before,
#mailtoolbar.toolbar.menu a.spam::before,
#mailtoolbar.toolbar.menu .button.spam::before,
#mailtoolbar.toolbar.menu a.markasjunk::before,
#mailtoolbar.toolbar.menu .button.markasjunk::before { --fluent-icon: var(--fluent-junk) !important; }

#mailtoolbar.toolbar.menu a.markmessage::before,
#mailtoolbar.toolbar.menu .button.markmessage::before,
#mailtoolbar.toolbar.menu a.mark::before,
#mailtoolbar.toolbar.menu .button.mark::before { --fluent-icon: var(--fluent-mark) !important; }

#mailtoolbar.toolbar.menu a.more::before,
#mailtoolbar.toolbar.menu .button.more::before,
#mailtoolbar.toolbar.menu a.options::before,
#mailtoolbar.toolbar.menu .button.options::before { --fluent-icon: var(--fluent-options) !important; }

#mailtoolbar.toolbar.menu a.print::before,
#mailtoolbar.toolbar.menu .button.print::before { --fluent-icon: var(--fluent-print) !important; }

#mailtoolbar.toolbar.menu a.prev::before,
#mailtoolbar.toolbar.menu .button.prev::before { --fluent-icon: var(--fluent-prev) !important; }

#mailtoolbar.toolbar.menu a.next::before,
#mailtoolbar.toolbar.menu .button.next::before { --fluent-icon: var(--fluent-next) !important; }

#mailtoolbar.toolbar.menu a.move::before,
#mailtoolbar.toolbar.menu .button.move::before { --fluent-icon: var(--fluent-move) !important; }

#mailtoolbar.toolbar.menu a.copy::before,
#mailtoolbar.toolbar.menu .button.copy::before { --fluent-icon: var(--fluent-copy) !important; }

/* The small drop-down parts for Reply all / Forward should be chevrons, not generic options dots. */
#mailtoolbar.toolbar.menu a.dropdown,
#mailtoolbar.toolbar.menu .button.dropdown {
  min-width: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  gap: 0 !important;
}

#mailtoolbar.toolbar.menu a.dropdown::before,
#mailtoolbar.toolbar.menu .button.dropdown::before,
#replyallmenulink::before,
#forwardmenulink::before {
  --fluent-icon: var(--fluent-dropdown) !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-basis: 14px !important;
}

#mailtoolbar.toolbar.menu a.dropdown .inner,
#mailtoolbar.toolbar.menu .button.dropdown .inner,
#replyallmenulink .inner,
#forwardmenulink .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Disabled commands should be visibly disabled but their icons must still be recognisable. */
#mailtoolbar.toolbar.menu a.disabled,
#mailtoolbar.toolbar.menu .button.disabled,
#mailtoolbar.toolbar.menu .dropbutton a.disabled,
#mailtoolbar.toolbar.menu .dropbutton .button.disabled {
  opacity: .55 !important;
  color: #606a60 !important;
  cursor: default !important;
}

#mailtoolbar.toolbar.menu a.disabled::before,
#mailtoolbar.toolbar.menu .button.disabled::before,
#mailtoolbar.toolbar.menu .dropbutton a.disabled::before,
#mailtoolbar.toolbar.menu .dropbutton .button.disabled::before {
  opacity: .95 !important;
}

/* Make common plug-in injected commands look correct even if they arrive late. */
#mailtoolbar.toolbar.menu [data-command="archive"]::before,
#mailtoolbar.toolbar.menu [data-command="plugin.archive"]::before { --fluent-icon: var(--fluent-archive) !important; }
#mailtoolbar.toolbar.menu [data-command="junk"]::before,
#mailtoolbar.toolbar.menu [data-command="markasjunk"]::before,
#mailtoolbar.toolbar.menu [data-command="plugin.markasjunk"]::before { --fluent-icon: var(--fluent-junk) !important; }
#mailtoolbar.toolbar.menu [data-command="download"]::before { --fluent-icon: var(--fluent-download) !important; }
#mailtoolbar.toolbar.menu [data-command="move"]::before { --fluent-icon: var(--fluent-move) !important; }
#mailtoolbar.toolbar.menu [data-command="copy"]::before { --fluent-icon: var(--fluent-copy) !important; }

/* Dark-mode counterpart without altering the chosen layout. */
html.dark-mode #layout-content > .header,
html.dark-mode #mailtoolbar.toolbar.menu {
  background: #171c17 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode #mailtoolbar.toolbar.menu > a,
html.dark-mode #mailtoolbar.toolbar.menu > .button,
html.dark-mode #mailtoolbar.toolbar.menu .dropbutton > a,
html.dark-mode #mailtoolbar.toolbar.menu .dropbutton > .button,
html.dark-mode #layout-content > .header > .button.back-list-button,
html.dark-mode #layout-content > .header > .button.back-content-button {
  color: #eef5ee !important;
}
html.dark-mode #mailtoolbar.toolbar.menu > a:hover,
html.dark-mode #mailtoolbar.toolbar.menu > .button:hover,
html.dark-mode #mailtoolbar.toolbar.menu .dropbutton > a:hover,
html.dark-mode #mailtoolbar.toolbar.menu .dropbutton > .button:hover,
html.dark-mode #layout-content > .header > .button.back-list-button:hover,
html.dark-mode #layout-content > .header > .button.back-content-button:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
html.dark-mode #mailtoolbar.toolbar.menu .spacer {
  background: rgba(255,255,255,.16) !important;
}
html.dark-mode #mailtoolbar.toolbar.menu a.disabled,
html.dark-mode #mailtoolbar.toolbar.menu .button.disabled {
  color: rgba(238,245,238,.62) !important;
  opacity: .7 !important;
}

/* Compact widths: keep icons visible and allow labels to collapse only when space is tight. */
@media screen and (max-width: 980px) {
  #mailtoolbar.toolbar.menu > a,
  #mailtoolbar.toolbar.menu > .button,
  #mailtoolbar.toolbar.menu .dropbutton > a,
  #mailtoolbar.toolbar.menu .dropbutton > .button {
    min-width: 38px !important;
    padding: 0 9px !important;
  }
  #mailtoolbar.toolbar.menu a .inner,
  #mailtoolbar.toolbar.menu .button .inner {
    font-size: 13px !important;
  }
}
@media screen and (max-width: 720px) {
  #layout-content > .header {
    padding: 0 8px !important;
  }
  #mailtoolbar.toolbar.menu > a .inner,
  #mailtoolbar.toolbar.menu > .button .inner,
  #mailtoolbar.toolbar.menu .dropbutton > a:not(.dropdown) .inner,
  #mailtoolbar.toolbar.menu .dropbutton > .button:not(.dropdown) .inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  #layout-content > .header > .button.back-list-button,
  #layout-content > .header > .button.back-content-button,
  #mailtoolbar.toolbar.menu > a,
  #mailtoolbar.toolbar.menu > .button,
  #mailtoolbar.toolbar.menu .dropbutton > a,
  #mailtoolbar.toolbar.menu .dropbutton > .button {
    min-width: 38px !important;
    width: 38px !important;
    padding: 0 !important;
  }
}


/* -------------------------------------------------------------------------
 * v10 refinement
 * - Replicate the clean Outlook-style command bar inside the compose pane.
 * - Put the user's full name in bold on the green profile-card header.
 * - Rework the theme/appearance control so it reads as a standard UI action.
 * ------------------------------------------------------------------------- */

/* Profile card: green header now identifies the signed-in user, not the theme author. */
.outlook-profile-card-brand {
  min-height: 76px !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #064f2b 0%, #0f6f37 55%, #159b48 100%) !important;
  color: #fff !important;
}
.outlook-profile-brand-user { min-width: 0 !important; }
.outlook-profile-card-fullname,
.outlook-profile-card-brand strong[data-outlook-fullname] {
  display: block !important;
  max-width: 250px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
}
.outlook-profile-card-brand span:not(.outlook-profile-crest) {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.82) !important;
}
.outlook-profile-card-user .outlook-profile-usertext strong {
  font-weight: 700 !important;
}

/* Theme control: use a familiar Appearance/Sun-Moon treatment and consistent contrast. */
:root {
  --fluent-appearance: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.4%22%20cy%3D%227.4%22%20r%3D%222.7%22%2F%3E%3Cpath%20d%3D%22M7.4%202.1v1.4M7.4%2011.3v1.4M2.1%207.4h1.4M11.3%207.4h1.4M3.7%203.7l1%201M10.1%2010.1l1%201M3.7%2011.1l1-1M10.1%204.7l1-1%22%2F%3E%3Cpath%20d%3D%22M14.1%207.8a5.1%205.1%200%201%200%203.2%207.2%205.4%205.4%200%200%201-6.7-6.7%205.1%205.1%200%200%200%203.5-.5z%22%2F%3E%3C%2Fsvg%3E");
}
.outlook-top-action.theme::before,
.outlook-profile-link.theme::before,
#taskmenu .theme::before { --fluent-icon: var(--fluent-appearance) !important; }
.outlook-top-action.theme .inner::after { content: "" !important; }
.outlook-top-action.theme { border-color: rgba(255,255,255,.10) !important; }
.outlook-top-action.theme:hover,
.outlook-top-action.theme:focus {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Compose: expose its own Outlook-style command bar instead of hiding it inside the iframe. */
html.iframe body.action-compose #layout-content > .header,
html.outlook-inline-compose-frame body.action-compose #layout-content > .header {
  display: flex !important;
  visibility: visible !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
html.iframe body.action-compose #layout-content > .header .task-menu-button,
html.outlook-inline-compose-frame body.action-compose #layout-content > .header .task-menu-button {
  display: none !important;
}
html.iframe body.action-compose #layout-content > .header .header-title,
html.outlook-inline-compose-frame body.action-compose #layout-content > .header .header-title {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  min-width: auto !important;
  margin-right: 8px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--outlook-text) !important;
}
html.iframe body.action-compose #layout-content > .header .header-title::before,
html.outlook-inline-compose-frame body.action-compose #layout-content > .header .header-title::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-right: 7px !important;
  background: var(--mzuni-green-deep) !important;
  -webkit-mask: var(--fluent-compose) center / contain no-repeat !important;
  mask: var(--fluent-compose) center / contain no-repeat !important;
}
html.iframe body.action-compose #messagetoolbar.outlook-compose-toolbar,
html.iframe body.action-compose #messagetoolbar,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 4px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
}
html.iframe body.action-compose #messagetoolbar > a,
html.iframe body.action-compose #messagetoolbar > .button,
html.iframe body.action-compose #messagetoolbar .dropbutton > a,
html.iframe body.action-compose #messagetoolbar .dropbutton > .button,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar > a,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar > .button,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar .dropbutton > a,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar .dropbutton > .button {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 38px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
html.iframe body.action-compose #messagetoolbar > a:hover,
html.iframe body.action-compose #messagetoolbar > .button:hover,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar > a:hover,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar > .button:hover {
  background: #f3f2f1 !important;
  border-color: #e4e7e1 !important;
  color: #064f2b !important;
}
html.iframe body.action-compose #messagetoolbar a .inner,
html.iframe body.action-compose #messagetoolbar .button .inner,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar a .inner,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar .button .inner {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  color: currentColor !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}
html.iframe body.action-compose #messagetoolbar .spacer,
html.outlook-inline-compose-frame body.action-compose #messagetoolbar .spacer {
  display: inline-block !important;
  width: 1px !important;
  height: 24px !important;
  flex: 0 0 1px !important;
  background: #e2e7df !important;
  margin: 0 8px !important;
}

/* Important compose command mappings in the replicated bar. */
html.iframe body.action-compose #messagetoolbar .options::before { --fluent-icon: var(--fluent-options) !important; }
html.iframe body.action-compose #messagetoolbar .save::before { --fluent-icon: var(--fluent-save) !important; }
html.iframe body.action-compose #messagetoolbar .attach::before { --fluent-icon: var(--fluent-attach) !important; }
html.iframe body.action-compose #messagetoolbar .signature::before { --fluent-icon: var(--fluent-signature) !important; }
html.iframe body.action-compose #messagetoolbar .responses::before { --fluent-icon: var(--fluent-responses) !important; }
html.iframe body.action-compose #messagetoolbar .spellcheck::before { --fluent-icon: var(--fluent-spellcheck) !important; }
html.iframe body.action-compose #messagetoolbar .encrypt::before { --fluent-icon: var(--fluent-encrypt) !important; }

/* Parent inline compose header stays seamless and compact; the real command bar appears below inside the compose frame. */
#outlook-inline-compose .outlook-inline-compose-header {
  height: 44px !important;
  min-height: 44px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--outlook-border) !important;
}
#outlook-inline-compose .outlook-inline-compose-title { font-weight: 760 !important; }
html.iframe body.action-compose #compose-content,
html.outlook-inline-compose-frame body.action-compose #compose-content {
  padding-top: 8px !important;
}

/* Dark mode compose command bar counterpart. */
html.iframe.dark-mode body.action-compose #layout-content > .header,
html.iframe.dark-mode body.action-compose #messagetoolbar,
html.dark-mode #outlook-inline-compose .outlook-inline-compose-header {
  background: #171c17 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f3f7f1 !important;
}
html.iframe.dark-mode body.action-compose #layout-content > .header .header-title,
html.iframe.dark-mode body.action-compose #messagetoolbar > a,
html.iframe.dark-mode body.action-compose #messagetoolbar > .button,
html.iframe.dark-mode body.action-compose #messagetoolbar .dropbutton > a,
html.iframe.dark-mode body.action-compose #messagetoolbar .dropbutton > .button {
  color: #eef5ee !important;
}
html.iframe.dark-mode body.action-compose #messagetoolbar > a:hover,
html.iframe.dark-mode body.action-compose #messagetoolbar > .button:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

@media screen and (max-width: 760px) {
  html.iframe body.action-compose #layout-content > .header .header-title { font-size: 0 !important; margin-right: 2px !important; }
  html.iframe body.action-compose #layout-content > .header .header-title::before { margin-right: 0 !important; }
  html.iframe body.action-compose #messagetoolbar a .inner,
  html.iframe body.action-compose #messagetoolbar .button .inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  html.iframe body.action-compose #messagetoolbar > a,
  html.iframe body.action-compose #messagetoolbar > .button {
    width: 38px !important;
    padding: 0 !important;
  }
}

/* v10-top-compose-send */
html.iframe body.action-compose #messagetoolbar .send::before { --fluent-icon: var(--fluent-send) !important; }
html.iframe body.action-compose #messagetoolbar .send { background: var(--mzuni-green-deep) !important; border-color: var(--mzuni-green-deep) !important; color: #fff !important; font-weight: 750 !important; }
html.iframe body.action-compose #messagetoolbar .send:hover { background: #0f6f37 !important; color: #fff !important; }

/* v10-profile-card-width */
.outlook-profile-card { width: min(420px, calc(100vw - 20px)) !important; }
.outlook-profile-card-fullname, .outlook-profile-card-brand strong[data-outlook-fullname] { max-width: 320px !important; }
@media screen and (max-width: 760px) { .outlook-profile-card { width: auto !important; } .outlook-profile-card-fullname, .outlook-profile-card-brand strong[data-outlook-fullname] { max-width: calc(100vw - 120px) !important; } }


/* v17 STABILITY + ICON-ONLY POLISH
   - No JavaScript icon watcher is used.
   - Standard Roundcube/Font Awesome icons are rendered through the bundled Icons font.
   - Toolbars are icon-only with browser tooltips from title/aria-label attributes.
*/

/* Login: force a stable centered card and remove inherited Elastic offsets. */
body.task-login,
body.task-login #layout,
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: auto !important;
  background: radial-gradient(circle at 22% 20%, rgba(141,198,62,.18), transparent 32%),
              radial-gradient(circle at 82% 72%, rgba(21,155,72,.13), transparent 35%),
              #f8fbf6 !important;
}
body.task-login #layout {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.task-login #outlook-suitebar,
body.task-login #layout-menu,
body.task-login .popover-header {
  display: none !important;
}
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 32px 16px !important;
  text-align: center !important;
}
.mzuni-login-shell,
.mzuni-login-shell.mzuni-login-card-only,
.mzuni-login-card-only {
  width: 100% !important;
  max-width: 500px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.task-login .mzuni-login-card,
.mzuni-login-card-only .mzuni-login-card {
  width: 100% !important;
  max-width: 460px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 38px 36px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(6,79,43,.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 65px rgba(6,79,43,.16), 0 2px 10px rgba(0,0,0,.05) !important;
  position: relative !important;
  overflow: visible !important;
}
body.task-login .mzuni-login-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 74px !important;
  height: 4px !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-lime)) !important;
}
.mzuni-login-logo-badge {
  width: auto !important;
  height: auto !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.mzuni-login-card #logo,
body.task-login #logo,
body.task-login .mzuni-login-logo-badge img,
body.task-login .mzuni-login-logo-badge svg {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 185px !important;
  max-height: 145px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
.mzuni-login-card h2 {
  display: block !important;
  position: static !important;
  margin: 4px 0 8px !important;
  padding: 0 !important;
  color: #202124 !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  text-align: center !important;
  letter-spacing: -.02em !important;
}
.mzuni-login-subtitle {
  display: block !important;
  position: static !important;
  margin: 0 0 22px !important;
  color: #5f6861 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
#login-form {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#login-form table,
#login-form tbody,
#login-form tr,
#login-form td {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#login-form tr { margin-bottom: 13px !important; }
#login-form td.title { display: none !important; }
#login-form input,
#login-form .form-control {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid #dfe6dc !important;
  background: #f9fbf8 !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  color: #1f1f1f !important;
  box-shadow: none !important;
}
#login-form input:focus,
#login-form .form-control:focus {
  outline: none !important;
  border-color: var(--mzuni-green) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21,155,72,.14) !important;
}
#login-form .formbuttons {
  display: block !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}
#rcmloginsubmit,
#login-form button[type="submit"],
#login-form input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-green)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}
.mzuni-login-support,
#login-footer {
  text-align: center !important;
  font-size: 12px !important;
  color: #667064 !important;
  margin-top: 14px !important;
}
@media (max-width: 520px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar { padding: 18px 12px !important; align-items: flex-start !important; }
  body.task-login .mzuni-login-card { padding: 28px 20px 22px !important; border-radius: 16px !important; }
  body.task-login #logo { max-width: 145px !important; max-height: 112px !important; }
}

/* Top green suite bar: icon-only actions, no overlap. */
#outlook-suitebar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#outlook-suitebar .outlook-brand {
  flex: 0 0 auto !important;
  min-width: 120px !important;
}
#outlook-suitebar .outlook-brand-mark.mzuni-brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background: transparent url("../images/mzuni-crest-256.png") center / contain no-repeat !important;
  box-shadow: none !important;
}
#outlook-suitebar .outlook-search-slot {
  flex: 1 1 420px !important;
  min-width: 180px !important;
  max-width: 640px !important;
}
#outlook-suitebar .outlook-suite-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
#outlook-suitebar .outlook-top-action,
#outlook-suitebar .outlook-profile-trigger {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
}
#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-top-action.selected,
#outlook-suitebar .outlook-profile-trigger:hover,
#outlook-suitebar .outlook-profile-menu.is-open .outlook-profile-trigger {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-profile-trigger .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#outlook-suitebar .outlook-top-action::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  color: currentColor !important;
}
#outlook-suitebar .outlook-top-action.compose::before { content: "\f304" !important; }
#outlook-suitebar .outlook-top-action.contacts::before { content: "\f0c0" !important; }
#outlook-suitebar .outlook-top-action.settings::before { content: "\f013" !important; }
#outlook-suitebar .outlook-top-action.help::before { content: "\f059" !important; }
#outlook-suitebar .outlook-top-action.theme::before { content: "\f185" !important; }
#outlook-suitebar .outlook-top-action.logout::before { content: "\f2f5" !important; }
@media (max-width: 920px) {
  #outlook-suitebar .outlook-brand-title { display: none !important; }
  #outlook-suitebar .outlook-brand { min-width: 48px !important; }
  #outlook-suitebar .outlook-search-slot { flex-basis: 180px !important; max-width: none !important; }
}
@media (max-width: 640px) {
  #outlook-suitebar { gap: 6px !important; padding: 0 8px !important; }
  #outlook-suitebar .outlook-search-slot { display: none !important; }
}

/* Command bars: icon-only with tooltips; use familiar standard icons. */
#mailtoolbar,
#messagetoolbar,
#layout-list .toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
}
#mailtoolbar a,
#messagetoolbar a,
#layout-list .toolbar.menu a,
#mailtoolbar .button,
#messagetoolbar .button,
#layout-list .toolbar.menu .button {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: #202124 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}
#mailtoolbar a.disabled,
#messagetoolbar a.disabled,
#layout-list .toolbar.menu a.disabled {
  color: #9aa0a6 !important;
  opacity: .74 !important;
}
#mailtoolbar a:hover:not(.disabled),
#messagetoolbar a:hover:not(.disabled),
#layout-list .toolbar.menu a:hover:not(.disabled),
#mailtoolbar a:focus:not(.disabled),
#messagetoolbar a:focus:not(.disabled),
#layout-list .toolbar.menu a:focus:not(.disabled) {
  background: #eef6ee !important;
  color: var(--mzuni-green-deep) !important;
}
#mailtoolbar a.active,
#mailtoolbar a.selected,
#mailtoolbar a.pressed,
#messagetoolbar a.active,
#messagetoolbar a.selected,
#messagetoolbar a.pressed,
#layout-list .toolbar.menu a.active,
#layout-list .toolbar.menu a.selected,
#layout-list .toolbar.menu a.pressed {
  background: #dff1e3 !important;
  color: var(--mzuni-green-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(6,79,43,.20) !important;
}
#mailtoolbar a .inner,
#messagetoolbar a .inner,
#layout-list .toolbar.menu a .inner,
#mailtoolbar .button .inner,
#messagetoolbar .button .inner,
#layout-list .toolbar.menu .button .inner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#mailtoolbar a::before,
#messagetoolbar a::before,
#layout-list .toolbar.menu a::before,
#mailtoolbar .button::before,
#messagetoolbar .button::before,
#layout-list .toolbar.menu .button::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  color: currentColor !important;
}
#mailtoolbar .dropbutton,
#messagetoolbar .dropbutton {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
#mailtoolbar .spacer,
#messagetoolbar .spacer,
#layout-list .toolbar.menu .spacer {
  width: 1px !important;
  min-width: 1px !important;
  height: 24px !important;
  margin: 0 6px !important;
  background: #e2e6df !important;
  display: inline-block !important;
}
#mailtoolbar .reply::before,
#messagetoolbar .reply::before { content: "\f3e5" !important; }
#mailtoolbar .reply-all::before,
#messagetoolbar .reply-all::before,
#mailtoolbar .reply.all::before,
#messagetoolbar .reply.all::before { content: "\f122" !important; }
#mailtoolbar .forward::before,
#messagetoolbar .forward::before { content: "\f064" !important; }
#mailtoolbar .delete::before,
#messagetoolbar .delete::before { content: "\f2ed" !important; }
#mailtoolbar .archive::before,
#messagetoolbar .archive::before { content: "\f187" !important; }
#mailtoolbar .junk::before,
#messagetoolbar .junk::before { content: "\f05e" !important; }
#mailtoolbar .markmessage::before,
#messagetoolbar .markmessage::before { content: "\f02b" !important; }
#mailtoolbar .more::before,
#messagetoolbar .more::before { content: "\f141" !important; }
#mailtoolbar .prev::before,
#messagetoolbar .prev::before { content: "\f053" !important; }
#mailtoolbar .next::before,
#messagetoolbar .next::before { content: "\f054" !important; }
#mailtoolbar .compose::before,
#messagetoolbar .compose::before { content: "\f304" !important; }
#mailtoolbar .dropdown::before,
#messagetoolbar .dropdown::before { content: "\f078" !important; font-size: 12px !important; }
#messagetoolbar .send::before { content: "\f1d8" !important; }
#messagetoolbar .save::before,
#messagetoolbar .draft::before { content: "\f0c7" !important; }
#messagetoolbar .attach::before { content: "\f0c6" !important; }
#messagetoolbar .signature::before { content: "\f5b7" !important; }
#messagetoolbar .responses::before { content: "\f075" !important; }
#messagetoolbar .spellcheck::before { content: "\f891" !important; }
#messagetoolbar .encrypt::before { content: "\f023" !important; }
#messagetoolbar .options::before,
#layout-list .toolbar.menu .options::before { content: "\f141" !important; }
#layout-list .toolbar.menu .select::before { content: "\f14a" !important; }
#layout-list .toolbar.menu .threads::before { content: "\f086" !important; }
#layout-list .toolbar.menu .refresh::before { content: "\f2f1" !important; }
#layout-content > .header > .back-list-button::before,
#layout-content > .header > .back-content-button::before { content: "\f060" !important; }

/* Compose frame: keep sidebar/options intact, but the compose command bar is compact and icon-only. */
body.action-compose #layout-content > .header,
html.iframe body.action-compose #layout-content > .header {
  display: flex !important;
  align-items: center !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #fff !important;
  border-bottom: 1px solid #e7ebe5 !important;
}
body.action-compose #messagetoolbar,
html.iframe body.action-compose #messagetoolbar {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
}
body.action-compose #messagetoolbar .send,
html.iframe body.action-compose #messagetoolbar .send {
  background: var(--mzuni-green-deep) !important;
  color: #fff !important;
}
body.action-compose #messagetoolbar .send.disabled,
html.iframe body.action-compose #messagetoolbar .send.disabled {
  background: #dfe6dc !important;
  color: #7a8579 !important;
}
#outlook-inline-compose {
  display: none;
  position: absolute !important;
  inset: 50px 0 0 0 !important;
  z-index: 30 !important;
  background: #fff !important;
}
#layout-content.outlook-compose-open #outlook-inline-compose,
#outlook-inline-compose.is-open { display: block !important; }
#outlook-inline-compose iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #fff !important;
}
#layout-content.outlook-compose-open .iframe-wrapper,
#layout-content.outlook-compose-open .outlook-preview-empty { visibility: hidden !important; }

/* Recipient controls: visible Cc/Bcc/recipient selector without clutter. */
.outlook-recipient-input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.outlook-recipient-input-group > input,
.outlook-recipient-input-group > textarea,
.outlook-recipient-input-group > .form-control,
.outlook-recipient-input-group > .multi-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.outlook-recipient-tools {
  display: inline-flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  margin-left: 6px !important;
  gap: 4px !important;
}
.outlook-recipient-tools .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  border: 1px solid #dce4da !important;
  background: #fbfdfb !important;
  color: var(--mzuni-green-deep) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.outlook-recipient-tools .input-group-text:hover,
.outlook-recipient-tools .input-group-text:focus {
  background: #e8f5ec !important;
  color: var(--mzuni-green-deep) !important;
}
.outlook-recipient-tools .icon::before,
.outlook-recipient-tools .recipient::before,
.outlook-recipient-tools .add::before {
  font-family: Icons !important;
  content: "\f234" !important;
  font-weight: 900 !important;
  margin: 0 !important;
}
.outlook-recipient-more::before { content: "\f141" !important; }
@media (max-width: 760px) {
  .outlook-recipient-input-group { flex-wrap: wrap !important; }
  .outlook-recipient-tools { margin-left: 0 !important; margin-top: 6px !important; width: 100% !important; }
  .outlook-recipient-tools .input-group-text { flex: 1 1 auto !important; }
}

/* Left rail/folder pane: organised hierarchy and high-contrast selected states. */
#layout-menu {
  background: var(--mzuni-green-deep) !important;
  border-right: 0 !important;
}
#taskmenu a {
  color: rgba(255,255,255,.92) !important;
  width: 42px !important;
  height: 42px !important;
  margin: 4px auto !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#taskmenu a .inner { display: none !important; }
#taskmenu a::before {
  font-family: Icons !important;
  color: currentColor !important;
  font-size: 18px !important;
  margin: 0 !important;
}
#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu a.active {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
#layout-sidebar {
  background: #fbfcfb !important;
  border-right: 1px solid #e4e8e2 !important;
}
#layout-sidebar > .header {
  background: #fff !important;
  border-bottom: 1px solid #e4e8e2 !important;
  color: #202124 !important;
}
#mailboxlist,
#mailboxlist ul {
  padding: 8px 8px !important;
  margin: 0 !important;
}
#mailboxlist li,
#mailboxlist li.mailbox {
  margin: 2px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#mailboxlist li.mailbox > a,
#mailboxlist li > div > a,
#mailboxlist .treetoggle + a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #202124 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
#mailboxlist li.mailbox > a::before,
#mailboxlist li > div > a::before,
#mailboxlist .treetoggle + a::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  width: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  color: #53605a !important;
  text-align: center !important;
}
#mailboxlist li.inbox > a::before,
#mailboxlist li.mailbox.inbox > a::before { content: "\f0e0" !important; }
#mailboxlist li.drafts > a::before,
#mailboxlist li.mailbox.drafts > a::before { content: "\f303" !important; }
#mailboxlist li.sent > a::before,
#mailboxlist li.mailbox.sent > a::before { content: "\f1d8" !important; }
#mailboxlist li.trash > a::before,
#mailboxlist li.mailbox.trash > a::before { content: "\f2ed" !important; }
#mailboxlist li.junk > a::before,
#mailboxlist li.mailbox.junk > a::before { content: "\f05e" !important; }
#mailboxlist li.archive > a::before,
#mailboxlist li.mailbox.archive > a::before { content: "\f187" !important; }
#mailboxlist li.mailbox:not(.inbox):not(.drafts):not(.sent):not(.trash):not(.junk):not(.archive) > a::before { content: "\f07b" !important; }
#mailboxlist li.mailbox > a:hover,
#mailboxlist li > div > a:hover {
  background: #eef6ee !important;
  color: var(--mzuni-green-deep) !important;
}
#mailboxlist li.selected > a,
#mailboxlist li.mailbox.selected > a,
#mailboxlist li.selected > div > a {
  background: #dff1e3 !important;
  color: var(--mzuni-green-deep) !important;
  font-weight: 800 !important;
  box-shadow: inset 4px 0 0 var(--mzuni-green) !important;
}
#mailboxlist li.selected > a::before,
#mailboxlist li.mailbox.selected > a::before,
#mailboxlist li.selected > div > a::before {
  color: var(--mzuni-green-deep) !important;
}
#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .unread {
  margin-left: auto !important;
  min-width: 24px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #dff1e3 !important;
  color: var(--mzuni-green-deep) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dark mode: keep icons visible and avoid white-on-white active states. */
html.dark-mode #mailtoolbar a,
html.dark-mode #messagetoolbar a,
html.dark-mode #layout-list .toolbar.menu a { color: #e9f1e9 !important; }
html.dark-mode #mailtoolbar a.disabled,
html.dark-mode #messagetoolbar a.disabled,
html.dark-mode #layout-list .toolbar.menu a.disabled { color: #8a9589 !important; }
html.dark-mode #mailtoolbar a:hover:not(.disabled),
html.dark-mode #messagetoolbar a:hover:not(.disabled),
html.dark-mode #layout-list .toolbar.menu a:hover:not(.disabled),
html.dark-mode #mailtoolbar a.active,
html.dark-mode #messagetoolbar a.active,
html.dark-mode #layout-list .toolbar.menu a.active,
html.dark-mode #mailtoolbar a.selected,
html.dark-mode #messagetoolbar a.selected,
html.dark-mode #layout-list .toolbar.menu a.selected {
  background: rgba(141,198,62,.18) !important;
  color: #fff !important;
}
html.dark-mode #layout-sidebar,
html.dark-mode #folderlist-content { background: #101610 !important; }
html.dark-mode #layout-sidebar > .header { background: #151b15 !important; color: #eef5ec !important; border-color: rgba(255,255,255,.12) !important; }
html.dark-mode #mailboxlist li.mailbox > a,
html.dark-mode #mailboxlist li > div > a { color: #eef5ec !important; }
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode #mailboxlist li.selected > div > a { background: rgba(141,198,62,.18) !important; color: #fff !important; box-shadow: inset 4px 0 0 var(--mzuni-lime) !important; }

/* ------------------------------------------------------------------
 * v18 stable corrections
 * - stop framed compose from rendering a nested full interface
 * - icon-only command bars with native tooltips
 * - repaired login card and support link
 * - improved folder pane visibility
 * ------------------------------------------------------------------ */

/* Suite bar: icon-only actions to avoid overlap. */
#outlook-suitebar {
  gap: 10px !important;
  padding: 0 14px 0 8px !important;
  overflow: visible !important;
}
#outlook-suitebar .outlook-brand {
  flex: 0 0 132px !important;
  min-width: 132px !important;
}
#outlook-suitebar .outlook-search-slot {
  flex: 1 1 420px !important;
  max-width: 760px !important;
  min-width: 180px !important;
}
#outlook-suitebar .outlook-suite-actions {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#outlook-suitebar .outlook-top-action,
#outlook-suitebar .outlook-profile-trigger {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}
#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-top-action span.inner {
  display: none !important;
}
#outlook-suitebar .outlook-top-action::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #fff !important;
  display: inline-block !important;
}
#outlook-suitebar .outlook-top-action.compose::before { content: "\f044" !important; }
#outlook-suitebar .outlook-top-action.contacts::before { content: "\f0c0" !important; }
#outlook-suitebar .outlook-top-action.settings::before { content: "\f013" !important; }
#outlook-suitebar .outlook-top-action.help::before { content: "\f059" !important; }
#outlook-suitebar .outlook-top-action.theme::before,
#outlook-suitebar .outlook-top-action.dark::before { content: "\f186" !important; }
#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-profile-trigger:hover,
#outlook-suitebar .outlook-profile-trigger:focus {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  outline: none !important;
}
@media (max-width: 900px) {
  #outlook-suitebar .outlook-brand { flex-basis: 90px !important; min-width: 90px !important; }
  #outlook-suitebar .outlook-brand-title { display: none !important; }
  #outlook-suitebar .outlook-search-slot { flex-basis: 220px !important; }
}

/* Icon-only Outlook command bars with standard, visible icons and hover tooltips. */
#mailtoolbar,
#messagetoolbar,
#layout-list .toolbar.menu,
body.action-compose #messagetoolbar,
html.iframe body.action-compose #messagetoolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
}
#mailtoolbar a,
#messagetoolbar a,
#layout-list .toolbar.menu a,
#messagetoolbar .dropbutton > a {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #202124 !important;
  text-decoration: none !important;
  position: relative !important;
}
#mailtoolbar a .inner,
#messagetoolbar a .inner,
#layout-list .toolbar.menu a .inner,
#messagetoolbar .dropbutton > a .inner {
  display: none !important;
}
#mailtoolbar a::before,
#messagetoolbar a::before,
#layout-list .toolbar.menu a::before,
#messagetoolbar .dropbutton > a::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: currentColor !important;
  margin: 0 !important;
  display: inline-block !important;
}
#mailtoolbar a:hover:not(.disabled),
#messagetoolbar a:hover:not(.disabled),
#layout-list .toolbar.menu a:hover:not(.disabled),
#mailtoolbar a:focus:not(.disabled),
#messagetoolbar a:focus:not(.disabled),
#layout-list .toolbar.menu a:focus:not(.disabled),
#mailtoolbar a.active,
#messagetoolbar a.active,
#layout-list .toolbar.menu a.active,
#mailtoolbar a.selected,
#messagetoolbar a.selected,
#layout-list .toolbar.menu a.selected,
#mailtoolbar a.pressed,
#messagetoolbar a.pressed,
#layout-list .toolbar.menu a.pressed {
  background: #e8f5ec !important;
  color: var(--mzuni-green-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(6,79,43,.16) !important;
}
#mailtoolbar a.disabled,
#messagetoolbar a.disabled,
#layout-list .toolbar.menu a.disabled {
  color: #a7aca7 !important;
  opacity: .75 !important;
  pointer-events: none !important;
}
/* Specific icon mappings. */
.back-list-button::before,
.back-content-button::before,
#messagetoolbar .back::before { content: "\f060" !important; }
.compose::before { content: "\f044" !important; }
.reply::before { content: "\f3e5" !important; }
.reply-all::before,
.replyall::before { content: "\f122" !important; }
.forward::before { content: "\f064" !important; }
.delete::before { content: "\f2ed" !important; }
.archive::before { content: "\f187" !important; }
.junk::before { content: "\f05e" !important; }
.mark::before { content: "\f02e" !important; }
.more::before,
.options::before { content: "\f141" !important; }
.select::before { content: "\f14a" !important; }
.threads::before { content: "\f086" !important; }
.sort::before { content: "\f160" !important; }
.refresh::before { content: "\f2f1" !important; }
.send::before { content: "\f1d8" !important; }
.save::before,
.draft::before { content: "\f0c7" !important; }
.attach::before { content: "\f0c6" !important; }
.signature::before { content: "\f5b7" !important; }
.responses::before { content: "\f075" !important; }
.spellcheck::before { content: "\f031" !important; }
.encrypt::before { content: "\f023" !important; }
.prevpage::before,
.previous::before { content: "\f053" !important; }
.nextpage::before,
.next::before { content: "\f054" !important; }

/* Framed compose must not show a second app shell. */
html.iframe #outlook-suitebar,
html.iframe #layout-menu,
html.outlook-framed-compose-clean #outlook-suitebar,
html.outlook-framed-compose-clean #layout-menu {
  display: none !important;
}
html.iframe body:not(.action-print) #layout,
html.outlook-framed-compose-clean body:not(.action-print) #layout {
  padding-top: 0 !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: flex !important;
  overflow: hidden !important;
  background: #fff !important;
}
html.iframe body.action-compose #layout-content,
html.outlook-framed-compose-clean body.action-compose #layout-content {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}
html.iframe body.action-compose #layout-sidebar,
html.outlook-framed-compose-clean body.action-compose #layout-sidebar {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 280px !important;
  display: block !important;
}
@media (max-width: 980px) {
  html.iframe body.action-compose #layout-sidebar,
  html.outlook-framed-compose-clean body.action-compose #layout-sidebar { display: none !important; }
}
#outlook-inline-compose {
  inset: 48px 0 0 0 !important;
  background: #fff !important;
}
#outlook-inline-compose iframe {
  background: #fff !important;
}

/* Login: repaired card, unboxed logo, proper icons inside fields. */
body.task-login #layout,
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  padding-top: 0 !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: auto !important;
}
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  display: grid !important;
  place-items: center !important;
  padding: 40px 18px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(141,198,62,.16), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(21,155,72,.10), transparent 38%),
    #f7faf4 !important;
}
body.task-login .mzuni-login-shell,
body.task-login .mzuni-login-card-only {
  width: min(440px, 100%) !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}
body.task-login .mzuni-login-card {
  width: 100% !important;
  min-height: 0 !important;
  padding: 38px 36px 28px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(6,79,43,.08) !important;
  box-shadow: 0 22px 70px rgba(6,79,43,.16) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
}
body.task-login .mzuni-login-card::before,
body.task-login .mzuni-login-card::after {
  display: none !important;
  content: none !important;
}
body.task-login .mzuni-login-logo-badge {
  width: auto !important;
  height: auto !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
}
body.task-login .mzuni-login-card #logo,
body.task-login #logo {
  width: 128px !important;
  max-width: 128px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.task-login .mzuni-login-card h2 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #202124 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  position: static !important;
  transform: none !important;
}
body.task-login .mzuni-login-subtitle {
  margin: 0 0 24px !important;
  color: #5f6b61 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.task-login #login-form,
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.task-login #login-form td.title,
body.task-login #login-form label {
  display: none !important;
}
body.task-login #login-form tr,
body.task-login #login-form p.form-group,
body.task-login #login-form .form-group {
  margin: 0 0 14px !important;
  position: relative !important;
}
body.task-login #login-form td.input {
  position: relative !important;
}
body.task-login #login-form td.input::before {
  font-family: Icons !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  color: var(--mzuni-green-deep) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
body.task-login #login-form tr:nth-of-type(1) td.input::before { content: "\f007" !important; }
body.task-login #login-form tr:nth-of-type(2) td.input::before { content: "\f023" !important; }
body.task-login #login-form tr:nth-of-type(3) td.input::before { content: "\f233" !important; }
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #rcmloginhost,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px 0 46px !important;
  border: 1px solid #dce4da !important;
  border-radius: 10px !important;
  background: #f9fbf8 !important;
  box-shadow: none !important;
  color: #202124 !important;
  font-size: 15px !important;
}
body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus,
body.task-login #rcmloginhost:focus {
  border-color: var(--mzuni-green) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21,155,72,.14) !important;
  outline: none !important;
}
body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  margin-top: 8px !important;
}
body.task-login #rcmloginsubmit {
  width: 100% !important;
  height: 48px !important;
  margin: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, var(--mzuni-green-deep), var(--mzuni-green)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.task-login #rcmloginsubmit::before { display: none !important; content: none !important; }
body.task-login .mzuni-login-support {
  margin-top: 16px !important;
  color: #66736a !important;
  font-size: 12px !important;
  text-align: center !important;
}
body.task-login .mzuni-login-support::before {
  content: "\f111" !important;
  font-family: Icons !important;
  font-size: 8px !important;
  color: var(--mzuni-lime) !important;
  margin-right: 6px !important;
}
body.task-login .mzuni-login-support a {
  color: var(--mzuni-green-deep) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
body.task-login .mzuni-login-support a:hover { text-decoration: underline !important; }
body.task-login #login-footer {
  display: none !important;
}
@media (max-width: 520px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar { padding: 24px 12px !important; }
  body.task-login .mzuni-login-card { padding: 30px 22px 24px !important; border-radius: 16px !important; }
  body.task-login .mzuni-login-card #logo,
  body.task-login #logo { width: 108px !important; max-width: 108px !important; }
}

/* Left pane / folder list: improve visibility and avoid unread badge overlapping labels. */
#layout-sidebar {
  min-width: 248px !important;
}
#layout-sidebar > .header .header-title,
#layout-sidebar > .header {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mailboxlist li.mailbox > a,
#mailboxlist li > div > a {
  position: relative !important;
  padding-right: 46px !important;
  min-width: 0 !important;
}
#mailboxlist li.mailbox > a .name,
#mailboxlist li > div > a .name,
#mailboxlist li.mailbox > a span:not(.unreadcount):not(.count):not(.unread) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .unread {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}


/* -------------------------------------------------------------------------
 * v19 stable polish: restore text labels, standard icons, working theme toggle,
 * and a corrected login card. This block intentionally overrides earlier v15-v18
 * icon-only experiments without reintroducing DOM polling.
 * ------------------------------------------------------------------------- */

/* Restore labelled top actions and command bars on desktop. */
#outlook-suitebar .outlook-suite-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}

#outlook-suitebar .outlook-top-action,
#outlook-suitebar .outlook-profile-trigger,
#mailtoolbar.toolbar.menu a,
#messagetoolbar.toolbar.menu a,
.toolbar.menu a,
.toolbar.menu .button {
  width: auto !important;
  min-width: 36px !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-top-action span.inner,
#mailtoolbar.toolbar.menu a .inner,
#messagetoolbar.toolbar.menu a .inner,
.toolbar.menu a .inner,
.toolbar.menu .button .inner {
  display: inline-flex !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  text-indent: 0 !important;
}

/* Standard Font Awesome/Elastic Icons layer. */
#outlook-suitebar .outlook-top-action::before,
#taskmenu a::before,
#mailtoolbar.toolbar.menu a::before,
#messagetoolbar.toolbar.menu a::before,
.toolbar.menu a::before,
.toolbar.menu .button::before,
.outlook-profile-link::before,
.outlook-compose-recipient-actions a::before,
.outlook-compose-recipient-actions button::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.15em !important;
  min-width: 1.15em !important;
  height: 1em !important;
  margin: 0 !important;
  float: none !important;
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-style: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  color: currentColor !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  speak: none !important;
}

#outlook-suitebar .outlook-top-action.compose::before,
#taskmenu .compose::before,
.toolbar.menu .compose::before { content: "\f044" !important; }
#outlook-suitebar .outlook-top-action.contacts::before,
#taskmenu .contacts::before,
.outlook-profile-link.contacts::before { content: "\f0c0" !important; }
#outlook-suitebar .outlook-top-action.settings::before,
#taskmenu .settings::before,
.outlook-profile-link.settings::before { content: "\f013" !important; }
#outlook-suitebar .outlook-top-action.help::before,
#taskmenu .about::before,
.outlook-profile-link.about::before { content: "\f059" !important; }
#outlook-suitebar .outlook-top-action.theme.dark::before,
#taskmenu .theme.dark::before,
.outlook-profile-link.theme.dark::before { content: "\f186" !important; }
#outlook-suitebar .outlook-top-action.theme.light::before,
#taskmenu .theme.light::before,
.outlook-profile-link.theme.light::before { content: "\f185" !important; }
.outlook-profile-logout::before,
#taskmenu .logout::before { content: "\f2f5" !important; }
#mailtoolbar .back-list-button::before,
#messagetoolbar .back-list-button::before,
.toolbar.menu .back-list-button::before { content: "\f060" !important; }
#mailtoolbar .reply::before,
#messagetoolbar .reply::before,
.toolbar.menu .reply::before { content: "\f3e5" !important; }
#mailtoolbar .reply-all::before,
#messagetoolbar .reply-all::before,
.toolbar.menu .reply-all::before,
#replyallmenulink::before { content: "\f122" !important; }
#mailtoolbar .forward::before,
#messagetoolbar .forward::before,
.toolbar.menu .forward::before { content: "\f064" !important; }
#mailtoolbar .delete::before,
#messagetoolbar .delete::before,
.toolbar.menu .delete::before { content: "\f2ed" !important; }
#mailtoolbar .archive::before,
#messagetoolbar .archive::before,
.toolbar.menu .archive::before { content: "\f187" !important; }
#mailtoolbar .junk::before,
#messagetoolbar .junk::before,
.toolbar.menu .junk::before { content: "\f071" !important; }
#mailtoolbar .markmessage::before,
#messagetoolbar .markmessage::before,
.toolbar.menu .markmessage::before { content: "\f02e" !important; }
#mailtoolbar .more::before,
#messagetoolbar .more::before,
.toolbar.menu .more::before { content: "\f141" !important; }
#mailtoolbar .prev::before,
#messagetoolbar .prev::before,
.toolbar.menu .prev::before { content: "\f053" !important; }
#mailtoolbar .next::before,
#messagetoolbar .next::before,
.toolbar.menu .next::before { content: "\f054" !important; }
#messagetoolbar .send::before,
.toolbar.menu .send::before { content: "\f1d8" !important; }
#messagetoolbar .save::before,
.toolbar.menu .save::before { content: "\f0c7" !important; }
#messagetoolbar .attach::before,
.toolbar.menu .attach::before { content: "\f0c6" !important; }
#messagetoolbar .signature::before,
.toolbar.menu .signature::before { content: "\f5b7" !important; }
#messagetoolbar .responses::before,
.toolbar.menu .responses::before { content: "\f4ad" !important; }
#messagetoolbar .options::before,
.toolbar.menu .options::before { content: "\f1de" !important; }
#messagetoolbar .spellcheck::before,
.toolbar.menu .spellcheck::before { content: "\f031" !important; }
#messagetoolbar .encrypt::before,
.toolbar.menu .encrypt::before { content: "\f023" !important; }
.outlook-compose-recipient-actions .add-recipient::before,
.outlook-compose-recipient-actions .recipient::before { content: "\f234" !important; }
.outlook-compose-recipient-actions .cc::before { content: "\f0c0" !important; }
.outlook-compose-recipient-actions .bcc::before { content: "\f506" !important; }
.outlook-compose-recipient-actions .more::before { content: "\f141" !important; }

/* Readable active/pressed states. */
#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-top-action:active,
#outlook-suitebar .outlook-top-action.active,
#outlook-suitebar .outlook-top-action.selected {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}

#mailtoolbar.toolbar.menu a:hover,
#messagetoolbar.toolbar.menu a:hover,
.toolbar.menu a:hover,
#mailtoolbar.toolbar.menu a:focus,
#messagetoolbar.toolbar.menu a:focus,
.toolbar.menu a:focus,
#mailtoolbar.toolbar.menu a.active,
#messagetoolbar.toolbar.menu a.active,
.toolbar.menu a.active,
#mailtoolbar.toolbar.menu a.selected,
#messagetoolbar.toolbar.menu a.selected,
.toolbar.menu a.selected {
  background: #eaf4e8 !important;
  color: var(--mzuni-green-deep) !important;
}

#mailtoolbar.toolbar.menu a.disabled,
#messagetoolbar.toolbar.menu a.disabled,
.toolbar.menu a.disabled {
  color: #8b948b !important;
  opacity: .78 !important;
}

/* Prevent overlap while preserving labels. */
#outlook-suitebar .outlook-search-slot {
  flex: 1 1 460px !important;
  min-width: 260px !important;
  max-width: 680px !important;
}

#mailtoolbar.toolbar.menu,
#messagetoolbar.toolbar.menu,
.toolbar.menu.outlook-compose-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

/* Keep labels on desktop; collapse only on genuinely narrow screens. */
@media screen and (max-width: 980px) {
  #outlook-suitebar .outlook-top-action .inner,
  #outlook-suitebar .outlook-top-action span.inner {
    display: none !important;
  }
  #outlook-suitebar .outlook-top-action {
    width: 38px !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 760px) {
  #mailtoolbar.toolbar.menu a .inner,
  #messagetoolbar.toolbar.menu a .inner,
  .toolbar.menu a .inner {
    display: none !important;
  }
  #mailtoolbar.toolbar.menu a,
  #messagetoolbar.toolbar.menu a,
  .toolbar.menu a {
    width: 38px !important;
    padding: 0 !important;
  }
}

/* Login reset: clean centred card, unboxed large logo, no green line, icons inside fields. */
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  min-height: 100dvh !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 4vh, 40px) !important;
  overflow-y: auto !important;
}

body.task-login .mzuni-login-shell,
body.task-login .mzuni-login-card-only,
body.task-login .mzuni-login-shell.mzuni-login-card-only {
  width: min(500px, calc(100vw - 36px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.task-login .mzuni-login-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  padding: clamp(28px, 4vw, 42px) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(222,221,221,.78) !important;
  box-shadow: 0 24px 70px rgba(33,33,30,.13), 0 1px 1px rgba(33,33,30,.05) !important;
  overflow: visible !important;
}

body.task-login .mzuni-login-card::before,
body.task-login .mzuni-login-card-only .mzuni-login-card::before {
  display: none !important;
  content: none !important;
}

body.task-login .mzuni-login-logo-badge {
  width: 146px !important;
  height: 128px !important;
  margin: 0 auto 18px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.task-login .mzuni-login-logo-badge #logo,
body.task-login .mzuni-login-card #logo {
  width: 136px !important;
  max-width: 136px !important;
  height: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
}

body.task-login .mzuni-login-card h2 {
  display: block !important;
  position: static !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  font-size: clamp(29px, 3vw, 34px) !important;
  line-height: 1.12 !important;
  color: var(--mzuni-charcoal) !important;
}

body.task-login .mzuni-login-subtitle {
  margin: 0 auto 24px !important;
  max-width: 360px !important;
  text-align: center !important;
  color: #626b61 !important;
}

body.task-login #login-form,
body.task-login #login-form table,
body.task-login #login-form tbody {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

body.task-login #login-form tr {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  position: relative !important;
}

body.task-login #login-form td.title,
body.task-login #login-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.task-login #login-form td.input {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.task-login #login-form tr.outlook-login-user-row td.input::before,
body.task-login #login-form tr:has(#rcmloginuser) td.input::before,
body.task-login #login-form tr.outlook-login-password-row td.input::before,
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: 18px !important;
  height: 18px !important;
  font-family: Icons !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: var(--mzuni-green-dark) !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body.task-login #login-form tr.outlook-login-user-row td.input::before,
body.task-login #login-form tr:has(#rcmloginuser) td.input::before { content: "\f007" !important; }
body.task-login #login-form tr.outlook-login-password-row td.input::before,
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before { content: "\f023" !important; }

body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px 0 46px !important;
  border: 1px solid #d8ded7 !important;
  border-radius: 12px !important;
  background: #f8faf7 !important;
  color: var(--mzuni-charcoal) !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus {
  border-color: var(--mzuni-green) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21,155,72,.12) !important;
}

body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

body.task-login #rcmloginsubmit {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--mzuni-green-deep), var(--mzuni-green)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

body.task-login #login-footer {
  display: none !important;
}

body.task-login .mzuni-login-support {
  margin-top: 16px !important;
  text-align: center !important;
  color: #6d746c !important;
  font-size: 12.5px !important;
}

body.task-login .mzuni-login-support a {
  color: var(--mzuni-green-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Folder pane: make Inbox fully visible and keep unread badges away from text. */
#mailboxlist li.mailbox > a,
#mailboxlist li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
}

#mailboxlist li.mailbox > a .name,
#mailboxlist li > a .name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#mailboxlist li.mailbox > a .unreadcount,
#mailboxlist li > a .unreadcount {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  min-width: 28px !important;
  text-align: center !important;
}

/* ------------------------------------------------------------------
 * v20 login typography/flow fix
 * Keep v19 functionality, but normalise only the login card so text,
 * field icons, support copy and logo alignment cannot drift.
 * ------------------------------------------------------------------ */
body.task-login {
  background:
    radial-gradient(circle at 22% 18%, rgba(202,210,46,.20), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(21,155,72,.16), transparent 32%),
    linear-gradient(135deg, #f5f8f3 0%, #ffffff 52%, #eff5ee 100%) !important;
}

body.task-login #layout,
body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  background: transparent !important;
}

body.task-login #layout-content.mzuni-login-page,
body.task-login #layout-content.selected.no-navbar {
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 4vh, 42px) !important;
}

body.task-login .mzuni-login-shell,
body.task-login .mzuni-login-shell.mzuni-login-card-only,
body.task-login .mzuni-login-card-only {
  display: block !important;
  width: min(520px, calc(100vw - 36px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.task-login .mzuni-login-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: clamp(32px, 4vw, 44px) clamp(28px, 4vw, 44px) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(222,221,221,.78) !important;
  box-shadow: 0 24px 70px rgba(33,33,30,.13), 0 1px 1px rgba(33,33,30,.05) !important;
}

body.task-login .mzuni-login-card::before,
body.task-login .mzuni-login-card::after {
  display: none !important;
  content: none !important;
}

body.task-login .mzuni-login-logo-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 176px !important;
  height: 148px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.task-login .mzuni-login-logo-badge #logo,
body.task-login .mzuni-login-card #logo {
  display: block !important;
  width: 164px !important;
  max-width: 164px !important;
  height: auto !important;
  max-height: 142px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.task-login .mzuni-login-card h2 {
  display: block !important;
  position: static !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(30px, 3vw, 36px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #21211e !important;
}

body.task-login .mzuni-login-subtitle {
  display: block !important;
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #626b61 !important;
}

body.task-login #login-form {
  display: block !important;
  width: min(100%, 410px) !important;
  max-width: 410px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  box-sizing: border-box !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.task-login #login-form tr {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

body.task-login #login-form td.title,
body.task-login #login-form label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.task-login #login-form td.input {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.task-login #login-form td.input::before,
body.task-login #login-form td.input::after {
  display: none !important;
  content: none !important;
}

body.task-login #login-form tr:nth-of-type(1) td.input::before,
body.task-login #login-form tr:has(#rcmloginuser) td.input::before,
body.task-login #login-form tr:nth-of-type(2) td.input::before,
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  z-index: 2 !important;
  opacity: .92 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  pointer-events: none !important;
}

body.task-login #login-form tr:nth-of-type(1) td.input::before,
body.task-login #login-form tr:has(#rcmloginuser) td.input::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064f2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

body.task-login #login-form tr:nth-of-type(2) td.input::before,
body.task-login #login-form tr:has(#rcmloginpwd) td.input::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064f2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") !important;
}

body.task-login #login-form input,
body.task-login #login-form .form-control,
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #rcmloginhost {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px 0 48px !important;
  border: 1px solid #d8ded7 !important;
  border-radius: 13px !important;
  background: #f8faf7 !important;
  color: #21211e !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 50px !important;
}

body.task-login #login-form input:focus,
body.task-login #rcmloginuser:focus,
body.task-login #rcmloginpwd:focus {
  border-color: #159b48 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(21,155,72,.12) !important;
  outline: none !important;
}

body.task-login #login-form .formbuttons,
body.task-login #login-form p.formbuttons {
  display: block !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

body.task-login #rcmloginsubmit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #064f2b, #159b48) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  box-shadow: 0 12px 24px rgba(21,155,72,.22) !important;
}

body.task-login #rcmloginsubmit::before,
body.task-login #rcmloginsubmit::after {
  display: none !important;
  content: none !important;
}

body.task-login .mzuni-login-support {
  display: block !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #687166 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

body.task-login .mzuni-login-support::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 8px 1px 0 !important;
  border-radius: 999px !important;
  background: #8dc63e !important;
  box-shadow: 0 0 0 4px rgba(141,198,62,.16) !important;
  vertical-align: middle !important;
}

body.task-login .mzuni-login-support a {
  color: #0f6f37 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.task-login .mzuni-login-support a:hover,
body.task-login .mzuni-login-support a:focus {
  color: #064f2b !important;
  text-decoration: underline !important;
}

body.task-login #login-footer,
body.task-login #login-footer * {
  display: none !important;
}

@media screen and (max-width: 540px) {
  body.task-login #layout-content.mzuni-login-page,
  body.task-login #layout-content.selected.no-navbar {
    padding: 14px !important;
  }
  body.task-login .mzuni-login-card {
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }
  body.task-login .mzuni-login-logo-badge {
    width: 150px !important;
    height: 126px !important;
    margin-bottom: 14px !important;
  }
  body.task-login .mzuni-login-logo-badge #logo,
  body.task-login .mzuni-login-card #logo {
    width: 142px !important;
    max-width: 142px !important;
    max-height: 122px !important;
  }
  body.task-login .mzuni-login-card h2 {
    font-size: 30px !important;
  }
}

/* -------------------------------------------------------------------------
 * v21 control visibility fix
 * Purpose: remove the accidental blank white boxes in the green suite bar,
 * restore visible icon + word controls, and use standard SVG control shapes
 * without reintroducing any DOM polling or icon-only behaviour.
 * ------------------------------------------------------------------------- */
:root {
  --mzuni-ico-compose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  --mzuni-ico-contacts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --mzuni-ico-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.73l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.73v-.51a2 2 0 0 1 1-1.72l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --mzuni-ico-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 1 1 5.82 1c0 2-3 2-3 4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --mzuni-ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 7.5A9 9 0 1 1 12 3Z'/%3E%3C/svg%3E");
  --mzuni-ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
}

/* Green top bar must show visible controls; no empty white rectangles. */
#outlook-suitebar {
  overflow: visible !important;
}

#outlook-suitebar .outlook-search-slot {
  flex: 1 1 420px !important;
  min-width: 240px !important;
  max-width: 660px !important;
}

#outlook-suitebar .outlook-suite-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  gap: 8px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#outlook-suitebar .outlook-top-action.compose {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.18) !important;
}

#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-top-action:active,
#outlook-suitebar .outlook-top-action.active,
#outlook-suitebar .outlook-top-action.selected {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
  outline: none !important;
}

#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-top-action span.inner {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#outlook-suitebar .outlook-top-action::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  color: currentColor !important;
  -webkit-mask: var(--mzuni-topbar-icon, var(--mzuni-ico-compose)) center / 18px 18px no-repeat !important;
  mask: var(--mzuni-topbar-icon, var(--mzuni-ico-compose)) center / 18px 18px no-repeat !important;
  font: 0/0 a !important;
  text-indent: 0 !important;
}

#outlook-suitebar .outlook-top-action.compose::before { --mzuni-topbar-icon: var(--mzuni-ico-compose) !important; }
#outlook-suitebar .outlook-top-action.contacts::before { --mzuni-topbar-icon: var(--mzuni-ico-contacts) !important; }
#outlook-suitebar .outlook-top-action.settings::before { --mzuni-topbar-icon: var(--mzuni-ico-settings) !important; }
#outlook-suitebar .outlook-top-action.help::before { --mzuni-topbar-icon: var(--mzuni-ico-help) !important; }
#outlook-suitebar .outlook-top-action.theme.dark::before,
#outlook-suitebar .outlook-top-action.theme::before { --mzuni-topbar-icon: var(--mzuni-ico-moon) !important; }
#outlook-suitebar .outlook-top-action.theme.light::before { --mzuni-topbar-icon: var(--mzuni-ico-sun) !important; }

/* Keep labels on desktop/tablet. Collapse labels only on genuinely narrow screens. */
@media screen and (max-width: 820px) {
  #outlook-suitebar .outlook-top-action {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }
  #outlook-suitebar .outlook-top-action .inner,
  #outlook-suitebar .outlook-top-action span.inner {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 640px) {
  #outlook-suitebar .outlook-search-slot { display: none !important; }
  #outlook-suitebar .outlook-suite-actions { gap: 5px !important; }
}

/* Profile avatar remains circular and visible beside the labelled controls. */
#outlook-suitebar .outlook-profile-trigger {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

#outlook-suitebar .outlook-profile-trigger:hover,
#outlook-suitebar .outlook-profile-trigger:focus,
#outlook-suitebar .outlook-profile-menu.is-open .outlook-profile-trigger {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* Preserve icon + word labels in the reading/compose command bars on desktop. */
#mailtoolbar.toolbar.menu a .inner,
#messagetoolbar.toolbar.menu a .inner,
.toolbar.menu a .inner,
.toolbar.menu .button .inner {
  display: inline-flex !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#mailtoolbar.toolbar.menu a,
#messagetoolbar.toolbar.menu a,
.toolbar.menu a,
.toolbar.menu .button {
  width: auto !important;
  min-width: 36px !important;
  padding: 0 9px !important;
  gap: 7px !important;
}

/* -------------------------------------------------------------------------
 * v22 live-control fix
 * The v21 preview was correct, but a live Roundcube render can still produce
 * blank white pills when Elastic visually hides .inner labels and the icon font
 * is unavailable. This block makes top-bar controls self-rendering: every
 * control gets its own standard SVG mask icon and class-based visible label.
 * ------------------------------------------------------------------------- */
:root {
  --mzuni-ui-compose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
  --mzuni-ui-contacts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --mzuni-ui-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8.6 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.04 3.3l.06.06A1.65 1.65 0 0 0 9 4.6c.39-.16.7-.46.9-.8.1-.2.1-.5.1-.8V3a2 2 0 1 1 4 0v.09c0 .3 0 .6.1.8.2.34.51.64.9.8a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.16.39.46.7.8.9.2.1.5.1.8.1h.09a2 2 0 1 1 0 4H21c-.3 0-.6 0-.8.1-.34.2-.64.51-.8.9z'/%3E%3C/svg%3E");
  --mzuni-ui-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 1 1 5.83 1c0 2-3 2-3 4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --mzuni-ui-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v2'/%3E%3Cpath d='M12 19v2'/%3E%3Cpath d='M4.22 4.22l1.42 1.42'/%3E%3Cpath d='M18.36 18.36l1.42 1.42'/%3E%3Cpath d='M1 12h2'/%3E%3Cpath d='M21 12h2'/%3E%3Cpath d='M4.22 19.78l1.42-1.42'/%3E%3Cpath d='M18.36 5.64l1.42-1.42'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}

#outlook-suitebar .outlook-suite-actions,
#outlook-suitebar .outlook-suite-actions * {
  box-sizing: border-box !important;
}

#outlook-suitebar .outlook-suite-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

#outlook-suitebar .outlook-top-action,
#outlook-suitebar a.outlook-top-action,
#outlook-suitebar span.outlook-top-action,
#outlook-suitebar button.outlook-top-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  font: 600 13.5px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
}

#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-top-action.selected,
#outlook-suitebar .outlook-top-action:active {
  background: rgba(255,255,255,.20) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: none !important;
}

#outlook-suitebar .outlook-top-action.compose {
  background: rgba(255,255,255,.16) !important;
}

/* Hide unreliable rendered inner text, then paint guaranteed labels ourselves. */
#outlook-suitebar .outlook-top-action > .inner,
#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-top-action > span:not(.outlook-profile-avatar) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action::before {
  content: "" !important;
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  opacity: 1 !important;
  margin: 0 !important;
  -webkit-mask: var(--mzuni-ui-top-icon, var(--mzuni-ui-compose)) center / contain no-repeat !important;
  mask: var(--mzuni-ui-top-icon, var(--mzuni-ui-compose)) center / contain no-repeat !important;
}

#outlook-suitebar .outlook-top-action::after {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  color: currentColor !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action.compose::before { --mzuni-ui-top-icon: var(--mzuni-ui-compose) !important; }
#outlook-suitebar .outlook-top-action.contacts::before { --mzuni-ui-top-icon: var(--mzuni-ui-contacts) !important; }
#outlook-suitebar .outlook-top-action.settings::before { --mzuni-ui-top-icon: var(--mzuni-ui-settings) !important; }
#outlook-suitebar .outlook-top-action.help::before { --mzuni-ui-top-icon: var(--mzuni-ui-help) !important; }
#outlook-suitebar .outlook-top-action.theme::before { --mzuni-ui-top-icon: var(--mzuni-ui-theme) !important; }

#outlook-suitebar .outlook-top-action.compose::after { content: "Compose" !important; }
#outlook-suitebar .outlook-top-action.contacts::after { content: "Contacts" !important; }
#outlook-suitebar .outlook-top-action.settings::after { content: "Settings" !important; }
#outlook-suitebar .outlook-top-action.help::after { content: "Help" !important; }
#outlook-suitebar .outlook-top-action.theme::after { content: "Dark mode" !important; }
html.dark-mode #outlook-suitebar .outlook-top-action.theme::after { content: "Light mode" !important; }

#outlook-suitebar .outlook-top-action.disabled,
#outlook-suitebar .outlook-top-action[aria-disabled="true"] {
  opacity: .72 !important;
  color: rgba(255,255,255,.88) !important;
  cursor: default !important;
}

/* Keep the profile circle from being treated like a blank control. */
#outlook-suitebar .outlook-profile-trigger {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: transparent !important;
}

@media screen and (max-width: 1140px) {
  #outlook-suitebar .outlook-top-action {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  #outlook-suitebar .outlook-top-action::after {
    content: "" !important;
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
 * v24: v22-core stability with v10 folder-pane structure and safe fixes
 * -------------------------------------------------------------------------
 * Purpose
 * - Keep v22 inbox/compose/profile behaviour.
 * - Restore the cleaner v10 folder/sidebar structure so the folder pane does
 *   not look disorganised and Inbox/unread badges remain readable.
 * - Keep visible icon + word controls in the green suite bar.
 * - Improve native Help and Theme bridge without polling or MutationObservers.
 * ------------------------------------------------------------------------- */

/* Keep top green bar controls visible: icon + word, no blank white pills. */
#outlook-suitebar .outlook-suite-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action,
#outlook-suitebar a.outlook-top-action,
#outlook-suitebar button.outlook-top-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  font: 600 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#outlook-suitebar .outlook-top-action.compose {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.18) !important;
}

#outlook-suitebar .outlook-top-action:hover,
#outlook-suitebar .outlook-top-action:focus,
#outlook-suitebar .outlook-top-action:active,
#outlook-suitebar .outlook-top-action.selected {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: none !important;
}

/* Use the v22 self-rendered standard SVG icons and guaranteed labels. */
#outlook-suitebar .outlook-top-action > .inner,
#outlook-suitebar .outlook-top-action .inner,
#outlook-suitebar .outlook-top-action > span:not(.outlook-profile-avatar) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action::before {
  content: "" !important;
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  background: currentColor !important;
  -webkit-mask: var(--mzuni-ui-top-icon, var(--mzuni-ui-compose)) center / contain no-repeat !important;
  mask: var(--mzuni-ui-top-icon, var(--mzuni-ui-compose)) center / contain no-repeat !important;
}

#outlook-suitebar .outlook-top-action::after {
  display: inline !important;
  color: currentColor !important;
  white-space: nowrap !important;
}

#outlook-suitebar .outlook-top-action.compose::before { --mzuni-ui-top-icon: var(--mzuni-ui-compose) !important; }
#outlook-suitebar .outlook-top-action.contacts::before { --mzuni-ui-top-icon: var(--mzuni-ui-contacts) !important; }
#outlook-suitebar .outlook-top-action.settings::before { --mzuni-ui-top-icon: var(--mzuni-ui-settings) !important; }
#outlook-suitebar .outlook-top-action.help::before { --mzuni-ui-top-icon: var(--mzuni-ui-help) !important; }
#outlook-suitebar .outlook-top-action.theme::before { --mzuni-ui-top-icon: var(--mzuni-ui-theme) !important; }

#outlook-suitebar .outlook-top-action.compose::after { content: "Compose" !important; }
#outlook-suitebar .outlook-top-action.contacts::after { content: "Contacts" !important; }
#outlook-suitebar .outlook-top-action.settings::after { content: "Settings" !important; }
#outlook-suitebar .outlook-top-action.help::after { content: "Help" !important; }
#outlook-suitebar .outlook-top-action.theme::after { content: "Dark mode" !important; }
html.dark-mode #outlook-suitebar .outlook-top-action.theme::after { content: "Light mode" !important; }

/* Collapse top labels only when there really is no room. */
@media screen and (max-width: 820px) {
  #outlook-suitebar .outlook-top-action {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }
  #outlook-suitebar .outlook-top-action::after {
    content: none !important;
    display: none !important;
  }
}

/* v10 folder/sidebar structure restored. */
#layout-menu {
  flex: 0 0 var(--outlook-rail-width) !important;
  width: var(--outlook-rail-width) !important;
  max-width: var(--outlook-rail-width) !important;
  min-width: var(--outlook-rail-width) !important;
  background: var(--mzuni-green-deep) !important;
  border-right: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: none !important;
  z-index: 4 !important;
}

#taskmenu {
  height: 100% !important;
  padding: 8px 0 !important;
  background: var(--mzuni-green-deep) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

#taskmenu a,
#taskmenu .button,
#taskmenu span.action-buttons a,
#taskmenu span.special-buttons a {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}

#taskmenu a .inner,
#taskmenu .button .inner {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #252423 !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  padding: 7px 9px !important;
  border-radius: 3px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .12s ease !important;
  z-index: 1200 !important;
}

#taskmenu a:hover .inner,
#taskmenu .button:hover .inner { opacity: 1 !important; }

#taskmenu a:hover,
#taskmenu .button:hover,
#taskmenu a.selected,
#taskmenu .button.selected,
#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

#taskmenu a.selected:after,
#taskmenu .button.selected:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 3px !important;
  height: 24px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--mzuni-lime) !important;
}

#layout-sidebar {
  flex: 0 0 var(--outlook-folder-width) !important;
  width: var(--outlook-folder-width) !important;
  max-width: var(--outlook-folder-width) !important;
  min-width: 220px !important;
  background: #fff !important;
  border-right: 1px solid var(--outlook-border) !important;
}

#layout-sidebar > .header {
  background: var(--outlook-surface) !important;
  color: var(--outlook-text) !important;
  border-bottom: 1px solid var(--outlook-border) !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
  justify-content: flex-start !important;
  font-weight: 600 !important;
}

#layout-sidebar > .header .header-title {
  text-align: left !important;
  margin: 0 !important;
  flex: 1 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#layout-sidebar .username:before {
  content: "Folders" !important;
  color: var(--outlook-text) !important;
  font-weight: 600 !important;
}
#layout-sidebar .username * { display: none !important; }

#folderlist-content {
  background: #fff !important;
  padding: 8px 6px !important;
}

#mailboxlist,
#mailboxlist ul,
#mailboxlist li {
  font-size: 14px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

#mailboxlist li,
#mailboxlist li.mailbox { margin: 1px 0 !important; padding: 0 !important; }

#mailboxlist li a,
#mailboxlist li.mailbox a,
#mailboxlist li.mailbox > a,
#mailboxlist li > div > a,
#mailboxlist .treetoggle + a,
ul.treelist li div {
  min-height: 32px !important;
  line-height: 32px !important;
  border-radius: 4px !important;
  color: var(--outlook-text) !important;
  padding: 0 8px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#mailboxlist li a:hover,
#mailboxlist li.mailbox a:hover,
#mailboxlist li > div > a:hover {
  background: #f3f2f1 !important;
  color: var(--mzuni-green-deep) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > div > a,
#mailboxlist li.mailbox.selected > a {
  background: var(--outlook-blue-soft) !important;
  color: var(--mzuni-green-deep) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#mailboxlist li.mailbox > a .name,
#mailboxlist li > div > a .name,
#mailboxlist li.mailbox > a span:not(.unreadcount):not(.count):not(.unread) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .unread {
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #dff1e3 !important;
  color: var(--mzuni-green-deep) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  right: auto !important;
  top: auto !important;
}

/* Compose keeps v22 iframe behaviour but prevents nested chrome if Roundcube returns full shell. */
html.outlook-framed-compose-clean #outlook-suitebar,
html.outlook-framed-compose-clean #layout-menu {
  display: none !important;
}
html.outlook-framed-compose-clean body.action-compose #layout-sidebar.sidebar-right {
  display: none !important;
}
html.outlook-framed-compose-clean body.action-compose #layout-content {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
}
html.outlook-framed-compose-clean body.action-compose #compose-content {
  padding-right: 18px !important;
}

/* Dialogs and secondary pages should inherit the MZUNI Outlook polish. */
.ui-dialog,
.popupmenu,
body.task-addressbook .ui-dialog,
body.task-settings .ui-dialog {
  border-radius: 12px !important;
  border: 1px solid rgba(6,79,43,.12) !important;
  box-shadow: 0 22px 70px rgba(33,33,30,.22) !important;
}
.ui-dialog .ui-dialog-titlebar,
.popupmenu .popupheader {
  background: #fff !important;
  color: var(--mzuni-charcoal) !important;
  border-bottom: 1px solid #e5ebe3 !important;
  font-weight: 700 !important;
}
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .btn-primary,
.popupmenu a:hover {
  border-radius: 7px !important;
}

/* Dark mode companion for the restored v10 folder layout. */
html.dark-mode #layout-sidebar,
html.dark-mode #folderlist-content {
  background: #101610 !important;
  color: #eef5ec !important;
}
html.dark-mode #layout-sidebar > .header {
  background: #151b15 !important;
  color: #eef5ec !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode #mailboxlist li a,
html.dark-mode #mailboxlist li.mailbox a,
html.dark-mode #mailboxlist li > div > a {
  color: #eef5ec !important;
}
html.dark-mode #mailboxlist li a:hover,
html.dark-mode #mailboxlist li.mailbox a:hover,
html.dark-mode #mailboxlist li > div > a:hover,
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode #mailboxlist li.selected > div > a,
html.dark-mode #mailboxlist li.mailbox.selected > a {
  background: rgba(141,198,62,.18) !important;
  color: #fff !important;
}