body {
  background-color: #e5e5e5;
}

/* Settings menu icons for plugin-registered tabs. */
#settings-menu li.wblist-white > a:before {
  content: "\f058" !important;          /* fa-check-circle */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#settings-menu li.wblist-black > a:before {
  content: "\f05e" !important;          /* fa-ban */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#settings-menu li.myaccount > a:before {
  content: "\f007" !important;          /* fa-user */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}

/* My Account subsection icons (left-list inside the My Account page).
 * The <ul> is rendered with id="myaccount-sections" and each <li> carries the subsection key as its class. */
#myaccount-sections li.profile > a:before {
  content: "\f007" !important;          /* fa-user */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.subscription > a:before {
  content: "\f005" !important;          /* fa-star */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.upgrade > a:before {
  content: "\f35b" !important;          /* fa-arrow-alt-circle-up */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.invoices > a:before {
  content: "\f543" !important;          /* fa-receipt */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.changepass > a:before {
  content: "\f084" !important;          /* fa-key */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.destroyaccount > a:before {
  content: "\f235" !important;          /* fa-user-times */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}
#myaccount-sections li.destroyaccount > * {
  color: red;
}

/* Support link lives in the main taskmenu (#taskmenu / .menu), not in #settings-menu */
.menu a.support:before {
  content: "\f059" !important;          /* fa-question-circle */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}

/* Min konto link in the taskmenu. */
.menu a.myaccount:before {
  content: "\f2bd" !important;          /* fa-user-circle */
  font-family: "Font Awesome 5 Free", "Icons" !important;
  font-weight: 900 !important;
}


/* Trash / Junk auto-purge notice, injected by mailcore_branding.js
 * inside #layout-content directly after the .header. Ported from the
 * old Bravo skin's #purgequicklink styling. */
#mc-purge-banner {
  padding: 0.5em 1em;
  background: #ffffcc;
  border-bottom: 1px solid #e6e6a6;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.4;
}
#mc-purge-banner a.mc-purge-cta {
  margin-left: 0.25em;
  font-weight: 600;
  color: #b55800;
  text-decoration: underline;
}
#mc-purge-banner a.mc-purge-cta:hover {
  color: #000;
}

/* Disable threaded message listing in the UI.
 * env:threads is true whenever the IMAP server advertises THREAD capability,
 * so we hide the entry points at the CSS layer — the <roundcube:if env:threads>
 * conditional in mail.html is evaluated during template parsing, too early
 * for a render_page hook to flip. */
a.threads[data-popup="threadselect-menu"],
#threadselect-menu {
  display: none !important;
}
/* Elastic's popover code clones the form and appends "-clone" to every id,
 * so we match both the original and its clone via a prefix selector, and
 * also fall back by hiding any .form-group that contains a [name="mode"]
 * select — the list-mode dropdown's `name` attribute is stable. */
.form-group:has(> label[for^="listoptions-threads"]),
.form-group:has(> .col-sm-8 > select[name="mode"]) {
  display: none !important;
}

/* Hide responses button in compose toolbar */
.toolbar .responses,
a.responses,
a[href="#responses"] {
  display: none !important;
}

/* Hide responses menu if it still appears */
#responses-menu {
  display: none !important;
}

html.layout-phone .popover-header, html.layout-small .popover-header {
  color: #fff;
  background-color: #ffa500 !important;
}

@media screen and (max-width: 480px) {
  #layout-menu .popover-header img {
    content: normal !important;
    width: 150px !important;
    margin-left: 6px;
  }
}

.messagelist td.subject span.fromto {
  color: #000 !important;
  font-size: 100% !important;
}
.messagelist td.subject span.subject a {
  color: #737677 !important;
  font-size: 90% !important;
}
.messagelist tr.unread span.subject a {
  /*color: darkorange !important;*/
}
.messagelist tr.unread span.fromto {
  font-weight: 700 !important;
}
.messagelist .msgicon.unread {
  color: darkorange !important;
}
.messagelist tr.unread {
  background-color: #FFF3E0 !important;
}
body.xelastic .ui-dialog-buttonpane .ui-dialog-buttonset .btn.delete {
  // color: #000 !important;
  background-color: red !important;
  font-weight: bold;
}

/* Login-form tweaks. Kept here (rather than editing the compiled
 * skins/*.min.css or xskin styles.css) so a Roundcube/xskin upgrade
 * doesn't wipe them.
 *
 * 1. Elastic's .formcontent/.propform label uses `overflow: hidden` which
 *    clips descenders on multi-line field labels; we want them fully visible.
 * 2. Increase the logo's padding-bottom on the login page for more breathing
 *    room between the black logo and the username field. */
.formcontent label,
.propform label {
  overflow: visible !important;
}
body.xskin.login-page #logo {
  padding-bottom: 15px !important;
}