/* G7 Mail authenticated shell — visual layer over native Roundcube behavior. */

.g7-rail-wordmark { display: none; }

.task-mail.action-none {
  --g7-rail-width: 110px;
  --g7-folders-width: 268px;
  --g7-list-width: 430px;
}

/* Application rail — theme-aware defaults (dark) */
.task-mail #layout-menu,
.task-addressbook #layout-menu {
  color: #aeb8c4;
  background:
    linear-gradient(180deg, rgba(188,143,74,.06), transparent 24%),
    #0b0f17;
  border-right: 1px solid #202938;
}

/* Rail logo — G7 mark only, theme-aware coloring */
.task-mail #layout-menu .popover-header,
.task-addressbook #layout-menu .popover-header {
  height: 84px;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 13px 8px 9px !important;
  border: 0;
  background: transparent !important;
  overflow: hidden;
  box-sizing: border-box;
}

.task-mail #layout-menu .popover-header #logo,
.task-addressbook #layout-menu .popover-header #logo {
  width: 44px;
  max-width: 44px;
  height: 42px;
  max-height: 42px;
  padding: 0;
  object-fit: contain;
}

html.dark-mode .task-mail #layout-menu .popover-header #logo,
html.dark-mode .task-addressbook #layout-menu .popover-header #logo {
  filter: brightness(0) invert(1);
}

.task-mail .g7-rail-wordmark,
.task-addressbook .g7-rail-wordmark {
  display: none;
}

.task-mail #taskmenu,
.task-addressbook #taskmenu {
  height: calc(100% - 84px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 5px 9px 14px;
}

.task-mail #taskmenu > a,
.task-mail #taskmenu > span > a,
.task-addressbook #taskmenu > a,
.task-addressbook #taskmenu > span > a {
  width: calc(100% - 2px);
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 auto 7px;
  padding: 7px 4px;
  border-radius: 11px;
  color: #8f9bad;
  background: transparent;
  text-align: center;
  box-sizing: border-box;
}

.task-mail #taskmenu > a::before,
.task-mail #taskmenu > span > a::before,
.task-addressbook #taskmenu > a::before,
.task-addressbook #taskmenu > span > a::before {
  width: auto;
  height: auto;
  float: none;
  margin: 0;
  font-size: 20px;
  line-height: 1;
}

.task-mail #taskmenu a .inner,
.task-addressbook #taskmenu a .inner {
  display: block;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  color: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.task-mail #taskmenu > a:hover,
.task-mail #taskmenu > span > a:hover,
.task-addressbook #taskmenu > a:hover,
.task-addressbook #taskmenu > span > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.09);
}

.task-mail #taskmenu > a.selected,
.task-mail #taskmenu > span > a.selected,
.task-addressbook #taskmenu > a.selected,
.task-addressbook #taskmenu > span > a.selected {
  color: #e5c583;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-mail #taskmenu .action-buttons,
.task-addressbook #taskmenu .action-buttons { display: none; }
.task-mail #taskmenu .special-buttons,
.task-addressbook #taskmenu .special-buttons {
  position: static;
  inset: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  background: transparent;
}

.task-mail #taskmenu .special-buttons a,
.task-addressbook #taskmenu .special-buttons a {
  min-height: 52px;
  margin-bottom: 3px;
}

.task-mail #taskmenu .special-buttons a.logout,
.task-addressbook #taskmenu .special-buttons a.logout { color: #d98a8a; }

/* Folders and account */
.task-mail #layout-sidebar {
  color: #d8dee7;
  border-right: 1px solid #253043;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.07), transparent 25%),
    #111827;
}

.task-mail #layout-sidebar > .header {
  height: 76px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid #293241;
  color: #f8fafc;
  background: transparent;
  line-height: normal;
}

.task-mail .g7-account-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,197,131,.32);
  border-radius: 50%;
  color: #e5c583;
  background: rgba(188,143,74,.11);
}

.task-mail .g7-account-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' 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") center / contain no-repeat;
}

.task-mail .g7-account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.task-mail .g7-account-copy .g7-account-name {
  margin-bottom: 4px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-mail .g7-account-copy .username {
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 0;
  color: #8391a5;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-mail #layout-sidebar .sidebar-menu {
  width: 30px;
  height: 32px;
  margin: 0;
  color: #8996a8;
}

.task-mail .g7-compose-button {
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 18px 15px 20px;
  border-radius: 10px;
  color: #fff !important;
  background: #bc8f4a;
  box-shadow: 0 10px 22px rgba(0,0,0,.2);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.task-mail .g7-compose-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail .g7-compose-button:hover {
  color: #fff;
  background: #8c652d;
  transform: translateY(-1px);
}

.task-mail .g7-folder-heading {
  padding: 0 24px 9px;
  color: #718096;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.task-mail #folderlist-content { padding: 0 11px 10px; }

.task-mail #mailboxlist li {
  margin: 2px 0;
  border: 0;
}

.task-mail #mailboxlist li > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 8px;
  color: #aeb8c4;
  font-size: 11px;
  text-decoration: none;
}

.task-mail #mailboxlist li > a::before {
  width: 22px;
  height: auto;
  margin: 0 9px 0 0;
  color: #7f8da2;
  font-size: 14px;
  line-height: 1;
}

.task-mail #mailboxlist li.selected > a {
  color: #f7e1b7;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-mail #mailboxlist li.selected > a::before { color: #e5c583; }

.task-mail #mailboxlist .unreadcount {
  min-width: 23px;
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #171d27;
  background: #e5c583;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
}

.task-mail #layout-sidebar > .footer {
  min-height: 62px;
  padding: 10px 14px;
  border-top: 1px solid #293241;
  color: #8290a3;
  background: transparent;
}

.task-mail #quotadisplay {
  max-width: none;
  padding: 6px 3px;
  color: #8190a5;
}

.task-mail #quotadisplay .bar {
  height: 5px;
  border: 0;
  background: #344054;
}

.task-mail #quotadisplay .value { background: #bc8f4a; }

/* Message list */
.task-mail #layout-list {
  min-width: 0;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
}

body.task-mail #layout-list > #messagelist-header {
  height: 84px;
  min-height: 84px;
  display: block;
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  color: #111827;
  background: #fff;
  line-height: normal;
}

.task-mail .g7-list-eyebrow {
  position: absolute;
  top: 17px;
  left: 21px;
  color: #8c652d;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.task-mail #messagelist-header > .header-title {
  position: absolute;
  right: 184px;
  bottom: 15px;
  left: 21px;
  width: auto;
  display: block !important;
  overflow: hidden;
  margin: 0 !important;
  color: #8c652d;
  font-size: 20px;
  font-weight: 720;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-mail #messagelist-header > #toolbar-list-menu {
  position: absolute;
  top: 24px;
  right: 94px;
  width: 80px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-mail #toolbar-list-menu > li {
  position: static !important;
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: none;
  margin: 0 2px;
  padding: 0;
  line-height: 36px;
}
.task-mail #toolbar-list-menu > li:has(> a.select),
.task-mail #toolbar-list-menu > li:has(> a.options) { display: block; }

.task-mail #toolbar-list-menu a.select,
.task-mail #toolbar-list-menu a.options {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  line-height: 36px !important;
}

.task-mail #toolbar-list-menu a.select::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail #toolbar-list-menu a.options::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M7 14v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail #toolbar-list-menu a.select .inner,
.task-mail #toolbar-list-menu a.options .inner { display: none !important; }

.task-mail #messagelist-header > a.g7-list-delete {
  position: absolute;
  top: 24px;
  right: 54px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  color: #64748b;
}

.task-mail #messagelist-header > a.g7-list-delete::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail #messagelist-header > a.g7-list-delete .inner { display: none !important; }
.task-mail #messagelist-header > a.g7-list-delete.disabled { opacity: .35; }

.task-mail #messagelist-header > a.refresh {
  position: absolute;
  top: 24px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 8px;
  color: #64748b;
}

.task-mail #messagelist-header > a.refresh::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail #messagelist-header > a.refresh .inner { display: none !important; }

.task-mail #layout-list > .searchbar {
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 14px 16px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.task-mail #layout-list > .searchbar form::before {
  margin-left: 13px;
  color: #7a8798;
}

.task-mail #layout-list > .searchbar #mailsearchform {
  width: 100%;
  height: 44px;
  display: block;
  margin: 0;
  padding-left: 6px;
  border: 0;
  color: #273244;
  background: transparent;
  font-size: 11px;
}

.task-mail #layout-list > .searchbar #mailsearchform::placeholder { color: #8e99a9; }

.task-mail #layout-list > .searchbar a {
  color: #7b8798;
  background: transparent;
}

.task-mail #messagelist-content {
  border-top: 1px solid #e8edf3;
  background: #fff;
}

.task-mail #messagelist {
  color: #475569;
  background: #fff;
}

.task-mail #messagelist tr {
  min-height: 82px;
  border-bottom: 1px solid #e8edf3;
  background: #fff;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.task-mail #messagelist tr:hover { background: #fbfcfe; }

.task-mail #messagelist tr:hover td { background: #fbfcfe; }

.task-mail #messagelist tr.unread {
  background: linear-gradient(90deg, #fff9ed 0, #fffcf6 48%, #fff 100%);
  box-shadow: inset 3px 0 rgba(188,143,74,.72);
}

.task-mail #messagelist tr.unread td {
  background: transparent;
}

.task-mail #messagelist tr.unread:hover,
.task-mail #messagelist tr.unread:hover td {
  background: #fff8eb;
}

.task-mail #messagelist tr.selected {
  background: #fff9ef;
  box-shadow: inset 3px 0 #bc8f4a;
}

.task-mail #messagelist tr.selected td { background: #fff9ef; }

.task-mail #messagelist td.subject:focus,
.task-mail #messagelist td.subject:focus-visible {
  outline: 0 !important;
}

.task-mail #messagelist tr.focused {
  box-shadow: inset 3px 0 #bc8f4a, inset 0 0 0 1px rgba(188,143,74,.28);
}

.task-mail #messagelist td {
  padding-top: 13px;
  padding-bottom: 12px;
  border: 0;
}

.task-mail #messagelist td.subject {
  position: relative;
  min-height: 76px;
  padding-left: 54px;
  padding-right: 9px;
}

.task-mail .g7-sender-avatar {
  position: absolute;
  top: 16px;
  left: 11px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: #fff;
  background: var(--g7-avatar-bg, #64748b);
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

.task-mail #messagelist tr.unread .g7-sender-avatar {
  box-shadow:
    0 2px 8px rgba(15,23,42,.12),
    0 0 0 2px #fff,
    0 0 0 3px rgba(188,143,74,.38);
}

.task-mail #messagelist tr.unread .g7-sender-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c3913e;
  box-shadow: 0 1px 3px rgba(140,101,45,.28);
}

.task-mail #messagelist td.subject span.fromto {
  order: 1;
  padding: 0 7px 0 0;
  color: #293241;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
}

.task-mail #messagelist td.subject span.date,
.task-mail #messagelist td.subject span.size {
  order: 2;
  color: #8995a7;
  font-size: 8px;
  line-height: 1.55;
}

.task-mail #messagelist td.subject span.subject {
  order: 3;
  margin-top: 3px;
  color: #556274;
  font-size: 10px;
  line-height: 1.55;
}

.task-mail #messagelist tr.unread td.subject span.fromto,
.task-mail #messagelist tr.unread td.subject span.subject {
  color: #1f2937;
  font-weight: 750;
}

.task-mail #messagelist tr.unread td.subject span.date {
  color: #9a6d2f;
  font-weight: 700;
}

.task-mail #messagelist .msgicon.status::before { color: #bc8f4a; }
.task-mail #messagelist td.flags { padding-right: 7px; color: #9ba6b4; }

.task-mail #messagelist-content .listing-hover-menu {
  right: 9px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  transform: translateY(18px);
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}

.task-mail #messagelist-content .listing-hover-menu .txt { display: none; }

.task-mail #messagelist-content .listing-hover-menu a.button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 7px;
  color: #64748b;
}

.task-mail #messagelist-content .listing-hover-menu a.button:hover {
  color: #8c652d;
  background: #fff6e7;
}

.task-mail #messagelist-content .listing-hover-menu a.button::before {
  content: "" !important;
  width: 16px;
  height: 16px;
  display: block;
  float: none;
  margin: 0;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.task-mail #messagelist-content .listing-hover-menu a.flag::before,
.task-mail #messagelist-content .listing-hover-menu a.unflag::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z'/%3E%3C/svg%3E");
}

.task-mail #messagelist-content .listing-hover-menu a.delete::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

.task-mail #messagelist-content .listing-hover-menu a.undo::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7 4 12l5 5'/%3E%3Cpath d='M20 17a7 7 0 0 0-7-7H4'/%3E%3C/svg%3E");
}

.task-mail #layout-list > .footer {
  min-height: 47px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

/* Reader container and native toolbar */
.task-mail.action-none #layout-content {
  min-width: 0;
  background: #fff;
}

.task-mail.action-none #layout-content > .header {
  height: 66px;
  min-height: 66px;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.task-mail #mailtoolbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-mail #mailtoolbar > a,
.task-mail #mailtoolbar > span > a {
  min-height: 36px;
  padding: 0 9px;
  border-radius: 8px;
  color: #64748b;
}

.task-mail #mailtoolbar > a:hover,
.task-mail #mailtoolbar > span > a:hover {
  color: #344054;
  background: #f1f4f7;
}

.task-mail #mailtoolbar a::before {
  height: auto;
  color: currentColor;
  font-size: 14px;
}

.task-mail #mailtoolbar a .inner {
  color: inherit;
  font-size: 9px;
  font-weight: 650;
}

.task-mail #mailtoolbar a.more,
.task-mail #layout-content > .header > ul.toolbar a.more {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  line-height: 36px !important;
  box-sizing: border-box;
}

.task-mail #mailtoolbar a.more::before,
.task-mail #layout-content > .header > ul.toolbar a.more::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-mail #mailtoolbar a.more .inner,
.task-mail #layout-content > .header > ul.toolbar a.more .inner {
  display: none !important;
}

.task-mail.action-none #layout-content .iframe-wrapper {
  background:
    radial-gradient(circle at 50% 34%, rgba(188,143,74,.055), transparent 24%),
    #fff;
}

/* Message page loaded inside the preview frame */
.task-mail:is(.action-show,.action-preview) #layout-content {
  color: #344054;
  background: #fff;
}

.task-mail:is(.action-show,.action-preview) #layout-content > .content {
  padding: 0;
  background: #fff;
}

.task-mail:is(.action-show,.action-preview) #message-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px clamp(28px,4vw,64px) 0;
}

.task-mail:is(.action-show,.action-preview) #message-header > .subject {
  margin: 0 0 25px;
  color: #141b28;
  font-size: clamp(22px,2vw,28px);
  line-height: 1.25;
  letter-spacing: -.03em;
}

.task-mail:is(.action-show,.action-preview) #message-header > .header {
  padding-bottom: 22px;
  border-bottom: 1px solid #edf0f4;
}

.task-mail:is(.action-show,.action-preview) #message-header .contactphoto {
  width: 44px;
  height: 44px;
  border: 1px solid #dce3eb;
  border-radius: 50%;
  background: #f5f7fa;
}

.task-mail:is(.action-show,.action-preview) #message-header .header-summary,
.task-mail:is(.action-show,.action-preview) #message-header .header-headers {
  color: #526075;
  font-size: 11px;
}

.task-mail:is(.action-show,.action-preview) #message-content {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 24px clamp(28px,4vw,64px) 50px;
}

.task-mail:is(.action-show,.action-preview) #message-content .leftcol,
.task-mail:is(.action-show,.action-preview) #message-content .rightcol {
  width: 100%;
  float: none;
}

.task-mail:is(.action-show,.action-preview) #message-content .rightcol {
  color: #3d4858;
  font-size: 12px;
  line-height: 1.75;
}

.task-mail:is(.action-show,.action-preview) .attachmentslist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-mail:is(.action-show,.action-preview) .attachmentslist li {
  min-height: 44px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
}

@media screen and (min-width: 1201px) {
  .task-mail.action-none #layout {
    display: grid;
    grid-template-columns:
      var(--g7-rail-width)
      var(--g7-folders-width)
      minmax(360px, var(--g7-list-width))
      minmax(480px, 1fr);
  }

  .task-mail.action-none #layout-menu,
  .task-mail.action-none #layout-sidebar,
  .task-mail.action-none #layout-list,
  .task-mail.action-none #layout-content {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: none;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .task-mail.action-none #layout,
  .task-addressbook.action-none #layout {
    display: grid;
    grid-template-columns: 96px 230px 350px minmax(360px,1fr);
  }

  .task-mail.action-none #layout-menu,
  .task-mail.action-none #layout-sidebar,
  .task-mail.action-none #layout-list,
  .task-mail.action-none #layout-content,
  .task-addressbook.action-none #layout-menu,
  .task-addressbook.action-none #layout-sidebar,
  .task-addressbook.action-none #layout-list,
  .task-addressbook.action-none #layout-content {
    width: auto !important;
    min-width: 0;
    max-width: none;
    flex: none !important;
  }

  .task-mail #taskmenu,
  .task-addressbook #taskmenu { padding-right: 7px; padding-left: 7px; }
  .task-mail #taskmenu a .inner,
  .task-addressbook #taskmenu a .inner { max-width: 80px; font-size: 8px; }
  .task-mail #mailtoolbar a .inner { display: none; }
}

@media screen and (max-width: 1024px) {
  .task-mail .g7-rail-wordmark,
  .task-addressbook .g7-rail-wordmark { display: none; }
  .task-mail .g7-list-eyebrow { display: none; }
  .task-mail #layout-menu .popover-header #logo,
  .task-addressbook #layout-menu .popover-header #logo { width: 36px; height: 36px; }
  .task-mail #taskmenu a .inner,
  .task-addressbook #taskmenu a .inner { display: none; }
  .task-mail .g7-compose-button { margin-right: 11px; margin-left: 11px; }

  .task-addressbook.action-none #layout {
    display: flex !important;
    grid-template-columns: none !important;
  }
}

@media screen and (max-width: 768px) {
  .task-mail #layout-sidebar > .header,
  .task-addressbook #layout-sidebar > .header {
    grid-template-columns: 38px minmax(0,1fr) 30px;
  }

  body.task-mail #layout-list > #messagelist-header {
    height: 70px;
    min-height: 70px;
  }

  .task-mail #messagelist-header > .header-title { bottom: 11px; font-size: 18px; }
  .task-mail #layout-list > .searchbar { margin: 10px 12px; }
  .task-mail #messagelist tr { min-height: 78px; }
  .task-mail:is(.action-show,.action-preview) #message-header,
  .task-mail:is(.action-show,.action-preview) #message-content { padding-right: 20px; padding-left: 20px; }
}

/* =========================================================
   Addressbook — same 4-column layout as Mail
   ========================================================= */

.task-addressbook.action-none {
  --g7-rail-width: 110px;
  --g7-folders-width: 268px;
  --g7-list-width: 430px;
}

@media screen and (min-width: 1201px) {
  .task-addressbook.action-none #layout {
    display: grid !important;
    grid-template-columns:
      var(--g7-rail-width)
      var(--g7-folders-width)
      minmax(360px, var(--g7-list-width))
      minmax(480px, 1fr);
  }

  .task-addressbook.action-none #layout-menu,
  .task-addressbook.action-none #layout-sidebar,
  .task-addressbook.action-none #layout-list,
  .task-addressbook.action-none #layout-content {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: none;
  }

  /* Override Roundcube JS visibility toggles on large screens */
  .task-addressbook.action-none #layout-sidebar,
  .task-addressbook.action-none #layout-list,
  .task-addressbook.action-none #layout-content { display: flex !important; }
  .task-addressbook.action-none #layout-sidebar.hidden,
  .task-addressbook.action-none #layout-content.hidden { display: flex !important; }
  .task-addressbook.action-none #layout-list.selected { width: auto; }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .task-addressbook.action-none #layout {
    display: grid !important;
    grid-template-columns: 96px 230px 350px minmax(360px,1fr);
  }

  .task-addressbook.action-none #layout-menu,
  .task-addressbook.action-none #layout-sidebar,
  .task-addressbook.action-none #layout-list,
  .task-addressbook.action-none #layout-content {
    width: auto !important;
    min-width: 0;
    max-width: none;
    flex: none !important;
  }

  .task-addressbook.action-none #layout-sidebar,
  .task-addressbook.action-none #layout-list,
  .task-addressbook.action-none #layout-content { display: flex !important; }
  .task-addressbook.action-none #layout-sidebar.hidden,
  .task-addressbook.action-none #layout-content.hidden { display: flex !important; }
  .task-addressbook.action-none #layout-list.selected { width: auto; }
}

/* Addressbook rail inherits mail rail styling via combined selectors below */
.task-addressbook #layout-sidebar {
  color: #d8dee7;
  border-right: 1px solid #253043;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.07), transparent 25%),
    #111827;
}

.task-addressbook #layout-sidebar > .header {
  height: 76px;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid #293241;
  color: #f8fafc;
  background: transparent;
  line-height: normal;
}

.task-addressbook #layout-sidebar > .header .header-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-addressbook #layout-sidebar .sidebar-menu {
  width: 30px;
  height: 32px;
  margin: 0;
  color: #8996a8;
}

.task-addressbook #directorylist,
.task-addressbook #savedsearchlist {
  margin: 0;
  padding: 11px;
  list-style: none;
}

.task-addressbook #directorylist li,
.task-addressbook #savedsearchlist li {
  margin: 2px 0;
}

.task-addressbook #directorylist li > a,
.task-addressbook #savedsearchlist li > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 8px;
  color: #aeb8c4;
  font-size: 11px;
  text-decoration: none;
}

.task-addressbook #directorylist li > a::before,
.task-addressbook #savedsearchlist li > a::before {
  width: 22px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 9px 0 0;
  color: #7f8da2;
  font-size: 14px;
  line-height: 1;
}

.task-addressbook #directorylist li.selected > a,
.task-addressbook #savedsearchlist li.selected > a {
  color: #f7e1b7;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-addressbook #directorylist li.selected > a::before,
.task-addressbook #savedsearchlist li.selected > a::before { color: #e5c583; }

/* Addressbook list */
.task-addressbook #layout-list {
  min-width: 0;
  border-right: 1px solid #202938;
  background: #f8fafc;
}

.task-addressbook #layout-list > .header {
  height: 84px;
  min-height: 84px;
  display: block;
  padding: 0;
  border-bottom: 1px solid #202938;
  color: #111827;
  background: #0b0f17;
  line-height: normal;
}

.task-addressbook #layout-list > .header .header-title {
  position: absolute;
  right: 100px;
  bottom: 15px;
  left: 21px;
  width: auto;
  display: block;
  overflow: hidden;
  margin: 0;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 720;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-addressbook #layout-list > .searchbar {
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 14px 16px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.task-addressbook #layout-list > .searchbar input {
  width: 100%;
  height: 44px;
  display: block;
  margin: 0;
  padding-left: 12px;
  border: 0;
  color: #273244;
  background: transparent;
  font-size: 11px;
}

.task-addressbook #contacts-table {
  width: 100%;
  color: #475569;
  background: #fff;
}

.task-addressbook #contacts-table tr {
  min-height: 62px;
  border-bottom: 1px solid #e8edf3;
  background: #fff;
  transition: background 140ms ease;
}

.task-addressbook #contacts-table tr:hover { background: #fbfcfe; }

.task-addressbook #contacts-table tr.selected {
  background: #fff9ef;
  box-shadow: inset 3px 0 #bc8f4a;
}

.task-addressbook #contacts-table td {
  padding: 12px 16px;
  border: 0;
}

/* Addressbook content */
.task-addressbook #layout-content {
  min-width: 0;
  background: #fff;
}

.task-addressbook #layout-content > .header {
  height: 66px;
  min-height: 66px;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.task-addressbook #layout-content > .header .header-title {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
}

.task-addressbook #layout-content > .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-addressbook #addressbooktoolbar,
.task-addressbook #layout-content > .header #toolbar-menu,
.task-addressbook #layout-content > .header .toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.task-addressbook #addressbooktoolbar > li,
.task-addressbook #layout-content > .header #toolbar-menu > li,
.task-addressbook #layout-content > .header .toolbar > li {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0;
}

.task-addressbook #addressbooktoolbar > a,
.task-addressbook #addressbooktoolbar > span > a,
.task-addressbook #addressbooktoolbar > button,
.task-addressbook #addressbooktoolbar > li > button,
.task-addressbook #layout-content > .header #toolbar-menu > li > a,
.task-addressbook #layout-content > .header .toolbar > li > a,
.task-addressbook #layout-content > .header #toolbar-menu > li > button,
.task-addressbook #layout-content > .header .toolbar > li > button,
.task-addressbook #layout-content > .header #toolbar-menu > li > span > a,
.task-addressbook #layout-content > .header .toolbar > li > span > a {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: #64748b;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.task-addressbook #addressbooktoolbar > a:hover,
.task-addressbook #addressbooktoolbar > span > a:hover,
.task-addressbook #addressbooktoolbar > button:hover,
.task-addressbook #addressbooktoolbar > li > button:hover,
.task-addressbook #layout-content > .header #toolbar-menu > li > a:hover,
.task-addressbook #layout-content > .header .toolbar > li > a:hover,
.task-addressbook #layout-content > .header #toolbar-menu > li > button:hover,
.task-addressbook #layout-content > .header .toolbar > li > button:hover,
.task-addressbook #layout-content > .header #toolbar-menu > li > span > a:hover,
.task-addressbook #layout-content > .header .toolbar > li > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

.task-addressbook #addressbooktoolbar a::before,
.task-addressbook #addressbooktoolbar button::before,
.task-addressbook #layout-content > .header #toolbar-menu a::before,
.task-addressbook #layout-content > .header .toolbar a::before,
.task-addressbook #layout-content > .header #toolbar-menu button::before,
.task-addressbook #layout-content > .header .toolbar button::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

.task-addressbook #addressbooktoolbar a .inner,
.task-addressbook #addressbooktoolbar button .inner,
.task-addressbook #layout-content > .header #toolbar-menu a .inner,
.task-addressbook #layout-content > .header .toolbar a .inner,
.task-addressbook #layout-content > .header #toolbar-menu button .inner,
.task-addressbook #layout-content > .header .toolbar button .inner {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

/* Esconde texto longo de acessibilidade no dropdown da toolbar, deixando só o ícone */
.task-addressbook #layout-content > .header #toolbar-menu .dropbutton > a.dropdown .inner,
.task-addressbook #layout-content > .header .toolbar .dropbutton > a.dropdown .inner,
.task-addressbook #layout-content > .header #toolbar-menu .dropbutton > button.dropdown .inner,
.task-addressbook #layout-content > .header .toolbar .dropbutton > button.dropdown .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;
}

.task-addressbook #addressbooktoolbar .spacer,
.task-addressbook #layout-content > .header #toolbar-menu .spacer,
.task-addressbook #layout-content > .header .toolbar .spacer { display: none; }

.task-addressbook #layout-content > .header #toolbar-menu .dropbutton,
.task-addressbook #layout-content > .header .toolbar .dropbutton {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.task-addressbook #layout-content > .header #toolbar-menu .dropbutton > a.dropdown,
.task-addressbook #layout-content > .header .toolbar .dropbutton > a.dropdown,
.task-addressbook #layout-content > .header #toolbar-menu .dropbutton > button.dropdown,
.task-addressbook #layout-content > .header .toolbar .dropbutton > button.dropdown {
  position: relative;
  width: 22px;
  min-width: 22px;
  padding: 0;
  justify-content: center;
}

.task-addressbook #addressbooktoolbar a.disabled,
.task-addressbook #addressbooktoolbar button.disabled,
.task-addressbook #layout-content > .header #toolbar-menu a.disabled,
.task-addressbook #layout-content > .header .toolbar a.disabled,
.task-addressbook #layout-content > .header #toolbar-menu button.disabled,
.task-addressbook #layout-content > .header .toolbar button.disabled { opacity: .45; cursor: not-allowed; }

.task-addressbook #layout-content > .header a.toolbar-menu-button,
.task-addressbook #layout-content > .header .toolbar-menu-button { display: none; }

.task-addressbook #layout-content > .header .header-title {
  flex: 0 0 auto;
  margin-right: auto;
}

/* =========================================================
   Light-mode overrides for the authenticated G7 Mail shell
   ========================================================= */

html:not(.dark-mode) .task-mail #layout-menu {
  color: #475569;
  background:
    linear-gradient(180deg, rgba(188,143,74,.05), transparent 24%),
    #f8fafc;
  border-right-color: #e2e8f0;
}

html:not(.dark-mode) .task-mail #layout-menu .popover-header {
  color: #111827;
}

html:not(.dark-mode) .task-mail .g7-rail-wordmark {
  color: #111827;
}

html:not(.dark-mode) .task-mail #taskmenu > a,
html:not(.dark-mode) .task-mail #taskmenu > span > a {
  color: #64748b;
}

html:not(.dark-mode) .task-mail #taskmenu > a:hover,
html:not(.dark-mode) .task-mail #taskmenu > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html:not(.dark-mode) .task-mail #taskmenu > a.selected,
html:not(.dark-mode) .task-mail #taskmenu > span > a.selected {
  color: #8c652d;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-mail #taskmenu .special-buttons a.logout {
  color: #dc4c4c;
}

html:not(.dark-mode) .task-mail #layout-sidebar {
  color: #475569;
  background:
    linear-gradient(180deg, rgba(188,143,74,.05), transparent 24%),
    #f8fafc;
  border-right-color: #e2e8f0;
}

html:not(.dark-mode) .task-mail #layout-menu .popover-header {
  color: #111827;
}

html:not(.dark-mode) .task-mail .g7-rail-wordmark {
  color: #111827;
}

html:not(.dark-mode) .task-mail #taskmenu > a,
html:not(.dark-mode) .task-mail #taskmenu > span > a {
  color: #64748b;
}

html:not(.dark-mode) .task-mail #taskmenu > a:hover,
html:not(.dark-mode) .task-mail #taskmenu > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html:not(.dark-mode) .task-mail #taskmenu > a.selected,
html:not(.dark-mode) .task-mail #taskmenu > span > a.selected {
  color: #8c652d;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-mail #taskmenu .special-buttons a.logout {
  color: #dc4c4c;
}

html:not(.dark-mode) .task-mail #layout-sidebar {
  color: #334155;
  border-right-color: #e2e8f0;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.05), transparent 25%),
    #fff;
}

html:not(.dark-mode) .task-mail #layout-sidebar > .header {
  border-bottom-color: #e2e8f0;
  color: #111827;
  background: transparent;
}

html:not(.dark-mode) .task-mail .g7-account-icon {
  border-color: rgba(188,143,74,.35);
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html:not(.dark-mode) .task-mail .g7-account-copy .g7-account-name {
  color: #111827;
}

html:not(.dark-mode) .task-mail .g7-account-copy .username {
  color: #64748b;
}

html:not(.dark-mode) .task-mail #layout-sidebar .sidebar-menu {
  color: #64748b;
}

html:not(.dark-mode) .task-mail .g7-compose-button {
  color: #fff !important;
  background: #bc8f4a;
  box-shadow: 0 10px 22px rgba(140,101,45,.18);
}

html:not(.dark-mode) .task-mail .g7-compose-button:hover {
  background: #8c652d;
}

html:not(.dark-mode) .task-mail .g7-folder-heading {
  color: #8c652d;
}

html:not(.dark-mode) .task-mail #mailboxlist li > a {
  color: #475569;
}

html:not(.dark-mode) .task-mail #mailboxlist li > a::before {
  color: #64748b;
}

html:not(.dark-mode) .task-mail #mailboxlist li.selected > a {
  color: #8c652d;
  background: rgba(188,143,74,.12);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-mail #mailboxlist li.selected > a::before {
  color: #bc8f4a;
}

html:not(.dark-mode) .task-mail #mailboxlist .unreadcount {
  color: #fff;
  background: #bc8f4a;
}

html:not(.dark-mode) .task-mail #layout-sidebar > .footer {
  border-top-color: #e2e8f0;
  color: #64748b;
}

html:not(.dark-mode) .task-mail #quotadisplay {
  color: #64748b;
}

html:not(.dark-mode) .task-mail #quotadisplay .bar {
  background: #e2e8f0;
}

html:not(.dark-mode) .task-mail #quotadisplay .value {
  background: #bc8f4a;
}

/* =========================================================
   Light-mode overrides for Addressbook
   ========================================================= */

html:not(.dark-mode) .task-addressbook #layout-menu {
  color: #475569;
  background:
    linear-gradient(180deg, rgba(188,143,74,.05), transparent 24%),
    #f8fafc;
  border-right-color: #e2e8f0;
}

html:not(.dark-mode) .task-addressbook #layout-menu .popover-header {
  color: #111827;
}

html:not(.dark-mode) .task-addressbook #taskmenu > a,
html:not(.dark-mode) .task-addressbook #taskmenu > span > a {
  color: #64748b;
}

html:not(.dark-mode) .task-addressbook #taskmenu > a:hover,
html:not(.dark-mode) .task-addressbook #taskmenu > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html:not(.dark-mode) .task-addressbook #taskmenu > a.selected,
html:not(.dark-mode) .task-addressbook #taskmenu > span > a.selected {
  color: #8c652d;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-addressbook #taskmenu .special-buttons a.logout {
  color: #dc4c4c;
}

html:not(.dark-mode) .task-addressbook #layout-sidebar {
  color: #334155;
  border-right-color: #e2e8f0;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.05), transparent 25%),
    #fff;
}

html:not(.dark-mode) .task-addressbook #layout-sidebar > .header {
  border-bottom-color: #e2e8f0;
  color: #111827;
  background: transparent;
}

html:not(.dark-mode) .task-addressbook #layout-sidebar .sidebar-menu {
  color: #64748b;
}

html:not(.dark-mode) .task-addressbook #directorylist li > a,
html:not(.dark-mode) .task-addressbook #savedsearchlist li > a {
  color: #475569;
}

html:not(.dark-mode) .task-addressbook #directorylist li > a::before,
html:not(.dark-mode) .task-addressbook #savedsearchlist li > a::before {
  color: #64748b;
}

html:not(.dark-mode) .task-addressbook #directorylist li.selected > a,
html:not(.dark-mode) .task-addressbook #savedsearchlist li.selected > a {
  color: #8c652d;
  background: rgba(188,143,74,.12);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-addressbook #directorylist li.selected > a::before,
html:not(.dark-mode) .task-addressbook #savedsearchlist li.selected > a::before {
  color: #bc8f4a;
}

html:not(.dark-mode) .task-addressbook #layout-list {
  border-right-color: #e2e8f0;
  background: #f8fafc;
}

html:not(.dark-mode) .task-addressbook #layout-list > .header {
  border-bottom-color: #e2e8f0;
  color: #111827;
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #layout-list > .header .header-title {
  color: #8c652d;
}

html:not(.dark-mode) .task-addressbook #layout-list > .searchbar {
  border-color: #e2e8f0;
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #layout-list > .searchbar input {
  color: #273244;
}

html:not(.dark-mode) .task-addressbook #contacts-table {
  color: #475569;
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #contacts-table tr {
  border-bottom-color: #e8edf3;
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #contacts-table tr:hover { background: #fbfcfe; }

html:not(.dark-mode) .task-addressbook #contacts-table tr.selected {
  background: #fff9ef;
  box-shadow: inset 3px 0 #bc8f4a;
}

html:not(.dark-mode) .task-addressbook #layout-content {
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #layout-content > .header {
  border-bottom-color: #e2e8f0;
  background: #fff;
}

html:not(.dark-mode) .task-addressbook #layout-content > .header .header-title {
  color: #111827;
}

html:not(.dark-mode) .task-addressbook #addressbooktoolbar > a,
html:not(.dark-mode) .task-addressbook #addressbooktoolbar > span > a,
html:not(.dark-mode) .task-addressbook #layout-content > .header #toolbar-menu > li > a,
html:not(.dark-mode) .task-addressbook #layout-content > .header .toolbar > li > a,
html:not(.dark-mode) .task-addressbook #layout-content > .header #toolbar-menu > li > span > a,
html:not(.dark-mode) .task-addressbook #layout-content > .header .toolbar > li > span > a {
  color: #64748b;
  background: transparent;
}

html:not(.dark-mode) .task-addressbook #addressbooktoolbar > a:hover,
html:not(.dark-mode) .task-addressbook #addressbooktoolbar > span > a:hover,
html:not(.dark-mode) .task-addressbook #layout-content > .header #toolbar-menu > li > a:hover,
html:not(.dark-mode) .task-addressbook #layout-content > .header .toolbar > li > a:hover,
html:not(.dark-mode) .task-addressbook #layout-content > .header #toolbar-menu > li > span > a:hover,
html:not(.dark-mode) .task-addressbook #layout-content > .header .toolbar > li > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html.dark-mode .task-addressbook #addressbooktoolbar > a,
html.dark-mode .task-addressbook #addressbooktoolbar > span > a,
html.dark-mode .task-addressbook #layout-content > .header #toolbar-menu > li > a,
html.dark-mode .task-addressbook #layout-content > .header .toolbar > li > a,
html.dark-mode .task-addressbook #layout-content > .header #toolbar-menu > li > span > a,
html.dark-mode .task-addressbook #layout-content > .header .toolbar > li > span > a {
  color: #aeb8c4;
  background: transparent;
}

html.dark-mode .task-addressbook #addressbooktoolbar > a:hover,
html.dark-mode .task-addressbook #addressbooktoolbar > span > a:hover,
html.dark-mode .task-addressbook #layout-content > .header #toolbar-menu > li > a:hover,
html.dark-mode .task-addressbook #layout-content > .header .toolbar > li > a:hover,
html.dark-mode .task-addressbook #layout-content > .header #toolbar-menu > li > span > a:hover,
html.dark-mode .task-addressbook #layout-content > .header .toolbar > li > span > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.10);
}

/* =========================================================
   Addressbook forms / dialogs / popups — G7 theme overrides
   ========================================================= */

/* ---------- Dialog chrome (jQuery UI) ---------- */
.task-addressbook .ui-dialog,
.task-addressbook .ui-dialog .ui-dialog-content,
.task-addressbook .ui-dialog .ui-dialog-titlebar,
.task-addressbook .ui-dialog .ui-dialog-buttonpane {
  background: #fff;
  border-color: #e2e8f0;
}

html.dark-mode .task-addressbook .ui-dialog,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-content,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-titlebar,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane {
  background: #21292c;
  border-color: #4d6066;
}

.task-addressbook .ui-dialog .ui-dialog-title {
  color: #111827;
  font-weight: 700;
}

html.dark-mode .task-addressbook .ui-dialog .ui-dialog-title,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-titlebar-close {
  color: #c5d1d3;
}

/* ---------- Buttons inside addressbook dialogs ---------- */
.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary,
.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.mainaction {
  color: #fff;
  background: #bc8f4a;
  border-color: #bc8f4a;
  border-radius: 8px;
}

.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary:hover:not(:disabled),
.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.mainaction:hover:not(:disabled) {
  background: #8c652d;
  border-color: #8c652d;
}

.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary,
.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
  color: #64748b;
  background: #f1f5f9;
  border-color: #f1f5f9;
  border-radius: 8px;
}

.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary:hover:not(:disabled),
.task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel:hover:not(:disabled) {
  color: #344054;
  background: #e2e8f0;
  border-color: #e2e8f0;
}

html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.mainaction {
  color: #fff;
  background: #bc8f4a;
  border-color: #bc8f4a;
}

html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary:hover:not(:disabled),
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.mainaction:hover:not(:disabled) {
  background: #8c652d;
  border-color: #8c652d;
}

html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary,
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
  color: #c5d1d3;
  background: #374549;
  border-color: #374549;
}

html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary:hover:not(:disabled),
html.dark-mode .task-addressbook .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel:hover:not(:disabled) {
  color: #e2e8e9;
  background: #4d6066;
  border-color: #4d6066;
}

/* ---------- Form controls (create/edit contact iframe + dialogs) ---------- */
.task-addressbook iframe body,
.task-addressbook #contact-frame body,
.task-addressbook #contact-frame .formcontent,
.task-addressbook .ui-dialog .formcontent,
.task-addressbook .ui-dialog-content.formcontent,
.task-addressbook .ui-dialog .propform {
  color: #2c363a;
  background: #fff;
}

html.dark-mode .task-addressbook iframe body,
html.dark-mode .task-addressbook #contact-frame body,
html.dark-mode .task-addressbook #contact-frame .formcontent,
html.dark-mode .task-addressbook .ui-dialog .formcontent,
html.dark-mode .task-addressbook .ui-dialog-content.formcontent,
html.dark-mode .task-addressbook .ui-dialog .propform {
  color: #c5d1d3;
  background: #21292c;
}

.task-addressbook .formcontent label,
.task-addressbook .formcontent .col-form-label,
.task-addressbook .propform label,
.task-addressbook .propform .col-form-label,
.task-addressbook .ui-dialog label,
.task-addressbook .ui-dialog .col-form-label {
  color: #334155;
  font-weight: 500;
}

html.dark-mode .task-addressbook .formcontent label,
html.dark-mode .task-addressbook .formcontent .col-form-label,
html.dark-mode .task-addressbook .propform label,
html.dark-mode .task-addressbook .propform .col-form-label,
html.dark-mode .task-addressbook .ui-dialog label,
html.dark-mode .task-addressbook .ui-dialog .col-form-label {
  color: #c5d1d3;
}

.task-addressbook .formcontent input.form-control,
.task-addressbook .formcontent select.form-control,
.task-addressbook .formcontent textarea.form-control,
.task-addressbook .propform input.form-control,
.task-addressbook .propform select.form-control,
.task-addressbook .propform textarea.form-control,
.task-addressbook .ui-dialog input.form-control,
.task-addressbook .ui-dialog select.form-control,
.task-addressbook .ui-dialog textarea.form-control,
.task-addressbook .ui-dialog .custom-file-label {
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.task-addressbook .formcontent input.form-control:focus,
.task-addressbook .formcontent select.form-control:focus,
.task-addressbook .formcontent textarea.form-control:focus,
.task-addressbook .propform input.form-control:focus,
.task-addressbook .propform select.form-control:focus,
.task-addressbook .propform textarea.form-control:focus,
.task-addressbook .ui-dialog input.form-control:focus,
.task-addressbook .ui-dialog select.form-control:focus,
.task-addressbook .ui-dialog textarea.form-control:focus,
.task-addressbook .ui-dialog .custom-file-label:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

html.dark-mode .task-addressbook .formcontent input.form-control,
html.dark-mode .task-addressbook .formcontent select.form-control,
html.dark-mode .task-addressbook .formcontent textarea.form-control,
html.dark-mode .task-addressbook .propform input.form-control,
html.dark-mode .task-addressbook .propform select.form-control,
html.dark-mode .task-addressbook .propform textarea.form-control,
html.dark-mode .task-addressbook .ui-dialog input.form-control,
html.dark-mode .task-addressbook .ui-dialog select.form-control,
html.dark-mode .task-addressbook .ui-dialog textarea.form-control,
html.dark-mode .task-addressbook .ui-dialog .custom-file-label {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

html.dark-mode .task-addressbook .formcontent input.form-control:focus,
html.dark-mode .task-addressbook .formcontent select.form-control:focus,
html.dark-mode .task-addressbook .formcontent textarea.form-control:focus,
html.dark-mode .task-addressbook .propform input.form-control:focus,
html.dark-mode .task-addressbook .propform select.form-control:focus,
html.dark-mode .task-addressbook .propform textarea.form-control:focus,
html.dark-mode .task-addressbook .ui-dialog input.form-control:focus,
html.dark-mode .task-addressbook .ui-dialog select.form-control:focus,
html.dark-mode .task-addressbook .ui-dialog textarea.form-control:focus,
html.dark-mode .task-addressbook .ui-dialog .custom-file-label:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

/* ---------- Submit buttons inside iframe forms ---------- */
.task-addressbook.action-add .btn-primary,
.task-addressbook.action-edit .btn-primary,
.task-addressbook.action-add button.submit,
.task-addressbook.action-edit button.submit,
.task-addressbook .formbuttons .btn-primary,
.task-addressbook #contact-frame .btn-primary,
.task-addressbook #contact-frame button.submit,
.task-addressbook #contact-frame .formbuttons .btn-primary {
  color: #fff;
  background: #bc8f4a;
  border-color: #bc8f4a;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.task-addressbook.action-add .btn-primary:hover:not(:disabled),
.task-addressbook.action-edit .btn-primary:hover:not(:disabled),
.task-addressbook.action-add button.submit:hover:not(:disabled),
.task-addressbook.action-edit button.submit:hover:not(:disabled),
.task-addressbook .formbuttons .btn-primary:hover:not(:disabled),
.task-addressbook #contact-frame .btn-primary:hover:not(:disabled),
.task-addressbook #contact-frame button.submit:hover:not(:disabled) {
  background: #8c652d;
  border-color: #8c652d;
}

html.dark-mode .task-addressbook.action-add .btn-primary,
html.dark-mode .task-addressbook.action-edit .btn-primary,
html.dark-mode .task-addressbook.action-add button.submit,
html.dark-mode .task-addressbook.action-edit button.submit,
html.dark-mode .task-addressbook .formbuttons .btn-primary,
html.dark-mode .task-addressbook #contact-frame .btn-primary,
html.dark-mode .task-addressbook #contact-frame button.submit,
html.dark-mode .task-addressbook #contact-frame .formbuttons .btn-primary {
  color: #fff;
  background: #bc8f4a;
  border-color: #bc8f4a;
}

html.dark-mode .task-addressbook.action-add .btn-primary:hover:not(:disabled),
html.dark-mode .task-addressbook.action-edit .btn-primary:hover:not(:disabled),
html.dark-mode .task-addressbook.action-add button.submit:hover:not(:disabled),
html.dark-mode .task-addressbook.action-edit button.submit:hover:not(:disabled),
html.dark-mode .task-addressbook .formbuttons .btn-primary:hover:not(:disabled),
html.dark-mode .task-addressbook #contact-frame .btn-primary:hover:not(:disabled),
html.dark-mode .task-addressbook #contact-frame button.submit:hover:not(:disabled) {
  background: #8c652d;
  border-color: #8c652d;
}

/* ---------- Tabs in advanced search ---------- */
.task-addressbook .nav-tabs {
  border-bottom-color: #e2e8f0;
}

.task-addressbook .nav-tabs .nav-link {
  color: #64748b;
  border-color: transparent;
  border-bottom-color: #e2e8f0;
  border-radius: 8px 8px 0 0;
}

.task-addressbook .nav-tabs .nav-link:hover {
  color: #8c652d;
  background: rgba(188,143,74,.08);
  border-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
}

.task-addressbook .nav-tabs .nav-link.active {
  color: #8c652d;
  background: #fff;
  border-color: #e2e8f0;
  border-bottom-color: #fff;
  font-weight: 700;
}

html.dark-mode .task-addressbook .nav-tabs {
  border-bottom-color: #4d6066;
}

html.dark-mode .task-addressbook .nav-tabs .nav-link {
  color: #aeb8c4;
  border-color: transparent;
  border-bottom-color: #4d6066;
}

html.dark-mode .task-addressbook .nav-tabs .nav-link:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.10);
  border-color: #4d6066;
  border-bottom-color: #4d6066;
}

html.dark-mode .task-addressbook .nav-tabs .nav-link.active {
  color: #f6e2ba;
  background: #21292c;
  border-color: #4d6066;
  border-bottom-color: #21292c;
}

/* ---------- Popup menus (More, Export, Group options) ---------- */
.task-addressbook .popupmenu .listing,
.task-addressbook .popupmenu .menu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.14);
}

html.dark-mode .task-addressbook .popupmenu .listing,
html.dark-mode .task-addressbook .popupmenu .menu {
  background: #1a2025;
  border-color: #2f3c40;
}

.task-addressbook .popupmenu .listing li > a,
.task-addressbook .popupmenu .menu li > a {
  color: #475569;
}

.task-addressbook .popupmenu .listing li > a:not(.disabled):hover,
.task-addressbook .popupmenu .menu li > a:not(.disabled):hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html.dark-mode .task-addressbook .popupmenu .listing li > a,
html.dark-mode .task-addressbook .popupmenu .menu li > a {
  color: #aeb8c4;
}

html.dark-mode .task-addressbook .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .task-addressbook .popupmenu .menu li > a:not(.disabled):hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.12);
}

/* ---------- Contact photo placeholder ---------- */
#contactpic {
  background-color: #f4f4f4;
  border-radius: 50%;
  border: 2px solid rgba(188,143,74,.25);
}

html.dark-mode #contactpic,
html.dark-mode #contactpic img.contactphoto {
  background-color: #374549 !important;
  border-color: rgba(188,143,74,.35);
}

/* ---------- Hints ---------- */
.task-addressbook .formcontent .hint,
.task-addressbook .ui-dialog .hint {
  color: #718096;
}

html.dark-mode .task-addressbook .formcontent .hint,
html.dark-mode .task-addressbook .ui-dialog .hint {
  color: #8ba3a7;
}

/* =========================================================
   Unified modern G7 theme for addressbook forms/iframe
   ========================================================= */

/* Scope: body inside contact-edit iframe */
body.task-addressbook.action-add,
body.task-addressbook.action-edit,
body.task-addressbook.action-add .formcontent,
body.task-addressbook.action-edit .formcontent {
  color: #334155;
  background: #fff;
}

html.dark-mode body.task-addressbook.action-add,
html.dark-mode body.task-addressbook.action-edit,
html.dark-mode body.task-addressbook.action-add .formcontent,
html.dark-mode body.task-addressbook.action-edit .formcontent {
  color: #c5d1d3;
  background: #21292c;
}

body.task-addressbook.action-add .contact-header,
body.task-addressbook.action-edit .contact-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

body.task-addressbook.action-add .contact-photo,
body.task-addressbook.action-edit .contact-photo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

body.task-addressbook.action-add .contact-head,
body.task-addressbook.action-edit .contact-head {
  flex: 1 1 auto;
  min-width: 0;
}

body.task-addressbook.action-add fieldset.propform,
body.task-addressbook.action-edit fieldset.propform {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff;
}

html.dark-mode body.task-addressbook.action-add fieldset.propform,
html.dark-mode body.task-addressbook.action-edit fieldset.propform {
  border-color: #4d6066;
  background: #21292c;
}

body.task-addressbook.action-add fieldset.propform legend,
body.task-addressbook.action-edit fieldset.propform legend {
  color: #8c652d;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 8px;
  width: auto;
}

html.dark-mode body.task-addressbook.action-add fieldset.propform legend,
html.dark-mode body.task-addressbook.action-edit fieldset.propform legend {
  color: #f6e2ba;
}

body.task-addressbook.action-add .propform .form-control-plaintext,
body.task-addressbook.action-edit .propform .form-control-plaintext {
  color: #334155;
}

html.dark-mode body.task-addressbook.action-add .propform .form-control-plaintext,
html.dark-mode body.task-addressbook.action-edit .propform .form-control-plaintext {
  color: #c5d1d3;
}

body.task-addressbook.action-add .nav-tabs,
body.task-addressbook.action-edit .nav-tabs {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

html.dark-mode body.task-addressbook.action-add .nav-tabs,
html.dark-mode body.task-addressbook.action-edit .nav-tabs {
  border-bottom-color: #4d6066;
}

body.task-addressbook.action-add .nav-tabs .nav-link,
body.task-addressbook.action-edit .nav-tabs .nav-link {
  color: #64748b;
  border: 1px solid transparent;
  border-bottom-color: #e2e8f0;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

body.task-addressbook.action-add .nav-tabs .nav-link:hover,
body.task-addressbook.action-edit .nav-tabs .nav-link:hover {
  color: #8c652d;
  background: rgba(188,143,74,.08);
  border-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
}

body.task-addressbook.action-add .nav-tabs .nav-link.active,
body.task-addressbook.action-edit .nav-tabs .nav-link.active {
  color: #8c652d;
  background: #fff;
  border-color: #e2e8f0;
  border-bottom-color: #fff;
}

html.dark-mode body.task-addressbook.action-add .nav-tabs .nav-link,
html.dark-mode body.task-addressbook.action-edit .nav-tabs .nav-link {
  color: #aeb8c4;
  border-bottom-color: #4d6066;
}

html.dark-mode body.task-addressbook.action-add .nav-tabs .nav-link:hover,
html.dark-mode body.task-addressbook.action-edit .nav-tabs .nav-link:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.10);
  border-color: #4d6066;
  border-bottom-color: #4d6066;
}

html.dark-mode body.task-addressbook.action-add .nav-tabs .nav-link.active,
html.dark-mode body.task-addressbook.action-edit .nav-tabs .nav-link.active {
  color: #f6e2ba;
  background: #21292c;
  border-color: #4d6066;
  border-bottom-color: #21292c;
}

body.task-addressbook.action-add .formbuttons,
body.task-addressbook.action-edit .formbuttons {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 0;
  border-top: 1px solid #e2e8f0;
}

html.dark-mode body.task-addressbook.action-add .formbuttons,
html.dark-mode body.task-addressbook.action-edit .formbuttons {
  border-top-color: #4d6066;
}

body.task-addressbook.action-add .formbuttons .btn-primary,
body.task-addressbook.action-edit .formbuttons .btn-primary,
body.task-addressbook.action-add .formbuttons button.submit,
body.task-addressbook.action-edit .formbuttons button.submit {
  color: #fff !important;
  background: #bc8f4a !important;
  border-color: #bc8f4a !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 20px;
  font-weight: 600;
}

body.task-addressbook.action-add .formbuttons .btn-primary:hover:not(:disabled),
body.task-addressbook.action-edit .formbuttons .btn-primary:hover:not(:disabled),
body.task-addressbook.action-add .formbuttons button.submit:hover:not(:disabled),
body.task-addressbook.action-edit .formbuttons button.submit:hover:not(:disabled) {
  background: #8c652d !important;
  border-color: #8c652d !important;
}

/* =========================================================
   Settings — unified modern G7 theme
   ========================================================= */

.task-settings {
  --g7-rail-width: 110px;
  --g7-settings-sidebar-width: 268px;
  --g7-settings-list-width: 360px;
}

@media screen and (min-width: 1201px) {
  .task-settings #layout {
    display: grid !important;
    grid-template-columns:
      var(--g7-rail-width)
      var(--g7-settings-sidebar-width)
      minmax(320px, var(--g7-settings-list-width))
      minmax(480px, 1fr);
  }

  .task-settings #layout-menu,
  .task-settings #layout-sidebar,
  .task-settings #layout-list,
  .task-settings #layout-content {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: none;
    display: flex !important;
  }

  .task-settings #layout-sidebar.hidden,
  .task-settings #layout-content.hidden {
    display: flex !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .task-settings #layout {
    display: grid !important;
    grid-template-columns: 96px 230px 320px minmax(360px,1fr);
  }

  .task-settings #layout-menu,
  .task-settings #layout-sidebar,
  .task-settings #layout-list,
  .task-settings #layout-content {
    width: auto !important;
    min-width: 0;
    max-width: none;
    flex: none !important;
    display: flex !important;
  }

  .task-settings #layout-sidebar.hidden,
  .task-settings #layout-content.hidden {
    display: flex !important;
  }
}

@media screen and (max-width: 1024px) {
  .task-settings #layout {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .task-settings #layout-sidebar,
  .task-settings #layout-list,
  .task-settings #layout-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: auto !important;
  }
}

.task-settings #layout-menu {
  color: #aeb8c4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(188,143,74,.06), transparent 24%),
    #0b0f17;
  border-right: 1px solid #202938;
}

.task-settings #layout-menu,
.task-settings #layout-sidebar,
.task-settings #layout-list,
.task-settings #layout-content {
  min-height: 0;
}

.task-settings #layout-menu .popover-header {
  height: 84px;
  min-height: 84px;
  width: 100%;
  min-width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 0;
  padding: 13px 8px 9px !important;
  border: 0;
  background: transparent !important;
  overflow: hidden;
  box-sizing: border-box;
}

.task-settings #layout-menu .popover-header a,
.task-settings #layout-menu .popover-header .cancel {
  display: none !important;
}

.task-settings #layout-menu .popover-header #logo {
  width: 44px;
  max-width: 44px;
  height: 42px;
  max-height: 42px;
  padding: 0;
  margin: 0 auto !important;
  object-fit: contain;
}

.task-settings #layout-menu .popover-header img {
  display: block !important;
  margin: 0 auto !important;
}

html.dark-mode .task-settings #layout-menu .popover-header #logo {
  filter: brightness(0) invert(1);
}

.task-settings .g7-rail-wordmark {
  display: none;
}

.task-settings #taskmenu {
  height: calc(100% - 84px);
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  padding: 5px 9px 14px;
}

.task-settings #taskmenu > a,
.task-settings #taskmenu > span > a {
  width: calc(100% - 2px);
  min-height: 62px;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
  margin: 0 auto 7px;
  padding: 7px 4px;
  border-radius: 11px;
  color: #8f9bad;
  background: transparent;
  text-align: center;
  box-sizing: border-box;
}

.task-settings #taskmenu > a::before,
.task-settings #taskmenu > span > a::before {
  display: block;
  width: auto;
  height: auto;
  float: none;
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}

.task-settings #taskmenu a .inner {
  display: block;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  color: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.task-settings #taskmenu > a:hover,
.task-settings #taskmenu > span > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.09);
}

.task-settings #taskmenu > a.selected,
.task-settings #taskmenu > span > a.selected {
  color: #e5c583;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-settings #taskmenu .action-buttons {
  display: none;
}

.task-settings #taskmenu .special-buttons {
  position: static;
  inset: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  background: transparent;
}

.task-settings #taskmenu .special-buttons a {
  min-height: 52px;
  margin-bottom: 3px;
}

.task-settings #taskmenu .special-buttons a.logout {
  color: #d98a8a;
}

.task-settings #layout-sidebar {
  color: #d8dee7;
  border-right: 1px solid #253043;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.07), transparent 25%),
    #111827;
}

.task-settings #layout-sidebar > .header,
.task-settings #layout-list > .header,
.task-settings #layout-content > .header {
  height: 76px;
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid #293241;
  color: #f8fafc;
  background: transparent;
  line-height: normal;
}

.task-settings #layout-sidebar > .header .header-title,
.task-settings #layout-list > .header .header-title,
.task-settings #layout-content > .header .header-title {
  margin: 0;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.task-settings #layout-sidebar .scroller,
.task-settings #layout-list .scroller {
  padding: 11px;
}

.task-settings #settings-menu,
.task-settings #sections-table,
.task-settings #identities-table,
.task-settings #responses-table {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-settings #settings-menu li,
.task-settings #sections-table li,
.task-settings #identities-table tr,
.task-settings #responses-table tr {
  margin: 2px 0;
}

.task-settings #settings-menu li > a,
.task-settings #sections-table li > a,
.task-settings #identities-table td,
.task-settings #responses-table td {
  display: flex;
  align-items: center;
  min-height: 39px;
  padding: 0 11px;
  border-radius: 8px;
  color: #aeb8c4;
  font-size: 11px;
  text-decoration: none;
}

.task-settings #sections-table tr td,
.task-settings #sections-table tr td a,
.task-settings #sections-table li > a {
  color: inherit;
  background: transparent;
  text-decoration: none;
}

.task-settings #sections-table tr td {
  min-height: 39px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 11px;
}

.task-settings #sections-table tr td.section::before {
  float: none;
  width: 16px;
  min-width: 16px;
  margin-right: 10px;
  text-align: center;
  line-height: 1;
}

.task-settings #sections-table tr td > a {
  display: inline-flex;
  align-items: center;
  min-height: 39px;
}

.task-settings #sections-table tr td.section,
.task-settings #sections-table tr td.section > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.task-settings #settings-menu li.selected > a,
.task-settings #sections-table li.selected > a,
.task-settings #identities-table tr.selected td,
.task-settings #responses-table tr.selected td {
  color: #f7e1b7;
  background: rgba(188,143,74,.12);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-settings #sections-table tr.selected td,
.task-settings #sections-table tr.selected td a {
  color: #f7e1b7;
  background: rgba(188,143,74,.14) !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.task-settings #settings-menu li > a:hover,
.task-settings #sections-table li > a:hover,
.task-settings #identities-table tr:hover td,
.task-settings #responses-table tr:hover td {
  color: #f6e2ba;
  background: rgba(188,143,74,.08);
}

.task-settings #sections-table tr:hover td,
.task-settings #sections-table tr:hover td a {
  color: #f6e2ba;
  background: rgba(188,143,74,.10) !important;
  border: 0 !important;
  outline: 0 !important;
}

.task-settings #layout-list {
  color: #d8dee7;
  border-right: 1px solid #253043;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.06), transparent 25%),
    #111827;
}

.task-settings #layout-list,
.task-settings #layout-list.listbox,
.task-settings #layout-list.listbox.selected {
  background-color: #111827 !important;
}

.task-settings #layout-list .listing,
.task-settings #layout-list .listing tbody,
.task-settings #layout-list .listing tr,
.task-settings #layout-list .listing td {
  background: transparent !important;
}

/* Folders list (settings -> folders) */
.task-settings.action-folders #layout-list > .searchbar.menu {
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 14px 16px 11px;
  border: 1px solid #2f3c40;
  border-radius: 10px;
  background: #1a2025;
}

.task-settings.action-folders #layout-list > .searchbar.menu input[type='text'],
.task-settings.action-folders #layout-list > .searchbar.menu .form-control {
  color: #c5d1d3;
  background: transparent;
  border: 0;
  height: 44px;
  font-size: 11px;
}

.task-settings.action-folders #layout-list > .searchbar.menu input[type='text']::placeholder,
.task-settings.action-folders #layout-list > .searchbar.menu .form-control::placeholder {
  color: #8ba3a7;
}

.task-settings #subscription-table {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-settings #subscription-table li {
  margin: 2px 0;
  border: 0;
  border-radius: 8px;
  transition: none !important;
}

.task-settings #subscription-table li > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 35px 0 11px;
  border-radius: 8px;
  color: #aeb8c4;
  font-size: 11px;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease !important;
}

.task-settings #subscription-table li > a::before {
  width: 22px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 9px 0 0;
  color: #7f8da2;
  font-size: 14px;
  line-height: 1;
}

.task-settings #subscription-table li.selected > a {
  color: #f7e1b7;
  background: rgba(188,143,74,.12);
  box-shadow: inset 2px 0 #bc8f4a;
}

.task-settings #subscription-table li.selected > a::before {
  color: #e5c583;
}

.task-settings #subscription-table li > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.08);
}

.task-settings #subscription-table li > div {
  right: 8px;
}

.task-settings #subscription-table li > div input {
  accent-color: #bc8f4a;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch {
  position: absolute;
  top: 50%;
  right: 8px;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  transform: translateY(-50%);
  width: 1.9rem;
  max-width: 1.9rem;
  min-height: 1rem;
  padding: 0;
  margin: 0;
  overflow: visible;
  z-index: 2;
  transition: none !important;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-label {
  position: relative;
  display: block;
  width: 1.9rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-label::before {
  width: 1.9rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid #55656f;
  background: #1f272b;
  left: 0;
  top: 0;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.12);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-label::after {
  width: .78rem;
  height: .78rem;
  border-radius: 50%;
  background: #dbe4ea;
  left: 2px;
  top: 2px;
  box-shadow: 0 1px 2px rgba(15,23,42,.2);
  transition: transform 120ms ease, background-color 120ms ease;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #bc8f4a;
  background: rgba(188,143,74,.28);
  box-shadow: 0 0 0 1px rgba(188,143,74,.18);
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(.9rem);
  background: #f6e2ba;
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:focus ~ .custom-control-label::before,
.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(188,143,74,.22);
}

.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:disabled ~ .custom-control-label,
.task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input[disabled] ~ .custom-control-label {
  cursor: default;
  opacity: 1;
}

/* Fallback only for plain checkboxes (if markup changes in future) */
.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input) {
  -webkit-appearance: none;
  appearance: none;
  accent-color: #bc8f4a;
  width: 16px;
  height: 16px;
  border: 1px solid #55656f;
  border-radius: 5px;
  background: #1f272b;
  margin: 0;
  position: relative;
  cursor: pointer;
  opacity: 1;
  vertical-align: middle;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):checked {
  border-color: #bc8f4a;
  background: rgba(188,143,74,.24);
  box-shadow: 0 0 0 1px rgba(188,143,74,.18);
}

.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #f6e2ba;
  border-bottom: 2px solid #f6e2ba;
  transform: rotate(45deg);
}

.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):disabled {
  cursor: default;
  opacity: 1;
}

.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):focus,
.task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(188,143,74,.22);
}

/* Column 4 forms: cover all settings action-edit-* pages */
.task-settings[class*='action-edit-'],
.task-settings[class*='action-add-'],
.task-settings[class*='action-edit-'] .formcontent,
.task-settings[class*='action-add-'] .formcontent,
.task-settings[class*='action-edit-'] .propform,
.task-settings[class*='action-add-'] .propform,
.task-settings[class*='action-edit-'] table.propform,
.task-settings[class*='action-add-'] table.propform {
  color: #334155;
  background: #fff;
}

.task-settings[class*='action-edit-'] .formcontent,
.task-settings[class*='action-add-'] .formcontent {
  padding: 18px;
}

.task-settings[class*='action-edit-'] table.propform,
.task-settings[class*='action-add-'] table.propform {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}

.task-settings[class*='action-edit-'] table.propform tr,
.task-settings[class*='action-add-'] table.propform tr {
  background: transparent;
}

.task-settings[class*='action-edit-'] table.propform tr > th,
.task-settings[class*='action-edit-'] table.propform tr > td,
.task-settings[class*='action-add-'] table.propform tr > th,
.task-settings[class*='action-add-'] table.propform tr > td {
  border: 0;
  border-top: 1px solid #edf2f7;
  vertical-align: middle;
  padding: 10px 14px;
}

.task-settings[class*='action-edit-'] table.propform tr:first-child > th,
.task-settings[class*='action-edit-'] table.propform tr:first-child > td,
.task-settings[class*='action-add-'] table.propform tr:first-child > th,
.task-settings[class*='action-add-'] table.propform tr:first-child > td {
  border-top: 0;
}

.task-settings[class*='action-edit-'] table.propform tr > th,
.task-settings[class*='action-edit-'] table.propform tr > td.title,
.task-settings[class*='action-edit-'] table.propform tr > td:first-child,
.task-settings[class*='action-add-'] table.propform tr > th,
.task-settings[class*='action-add-'] table.propform tr > td.title,
.task-settings[class*='action-add-'] table.propform tr > td:first-child {
  width: 34%;
  color: #64748b;
  font-weight: 600;
}

.task-settings[class*='action-edit-'] table.propform tr > td:not(.title):not(:first-child),
.task-settings[class*='action-add-'] table.propform tr > td:not(.title):not(:first-child) {
  color: #334155;
  font-weight: 500;
}

.task-settings[class*='action-edit-'] table.propform label,
.task-settings[class*='action-add-'] table.propform label {
  margin-bottom: 0;
  color: #475569;
  font-weight: 500;
}

.task-settings[class*='action-edit-'] table.propform input,
.task-settings[class*='action-edit-'] table.propform select,
.task-settings[class*='action-edit-'] table.propform textarea,
.task-settings[class*='action-edit-'] .formcontent input,
.task-settings[class*='action-edit-'] .formcontent select,
.task-settings[class*='action-edit-'] .formcontent textarea,
.task-settings[class*='action-add-'] table.propform input,
.task-settings[class*='action-add-'] table.propform select,
.task-settings[class*='action-add-'] table.propform textarea,
.task-settings[class*='action-add-'] .formcontent input,
.task-settings[class*='action-add-'] .formcontent select,
.task-settings[class*='action-add-'] .formcontent textarea {
  width: 100%;
  min-height: 38px;
}

.task-settings[class*='action-edit-'] .formbuttons,
.task-settings[class*='action-add-'] .formbuttons {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.task-settings #layout-content {
  color: #d8dee7;
  border-right: 0;
  background:
    radial-gradient(circle at 20% 0, rgba(188,143,74,.05), transparent 25%),
    #111827;
}

.task-settings #layout-content .scroller,
.task-settings #layout-content .iframe-wrapper,
.task-settings #layout-content > .content,
.task-settings #layout-content > .formcontent {
  background-color: transparent !important;
}

.task-settings #layout-content .iframe-wrapper,
.task-settings #layout-content > .content,
.task-settings #layout-content > .formcontent {
  background: transparent;
}

.task-settings #layout-content > .header .toolbar,
.task-settings #layout-content > .header #responsestoolbar,
.task-settings #layout-content > .header #identitiestoolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.task-settings #layout-content > .header .toolbar > a,
.task-settings #layout-content > .header #responsestoolbar > a,
.task-settings #layout-content > .header #identitiestoolbar > a {
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: #aeb8c4;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.task-settings #layout-content > .header .toolbar > a:hover,
.task-settings #layout-content > .header #responsestoolbar > a:hover,
.task-settings #layout-content > .header #identitiestoolbar > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.12);
}

.task-settings.action-edit,
.task-settings.action-edit .formcontent,
.task-settings.action-edit .propform {
  color: #334155;
  background: #fff;
}

.task-settings.action-edit .formcontent {
  padding: 18px;
}

body.task-settings.action-edit,
body.task-settings.action-edit .formcontent,
body.task-settings.action-edit .propform {
  background: #fff !important;
  color: #334155 !important;
}

.task-settings.action-edit .propform {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.task-settings.action-edit .propform table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.task-settings.action-edit .propform tr > th,
.task-settings.action-edit .propform tr > td {
  border: 0;
  vertical-align: middle;
}

.task-settings.action-edit .propform tr > th {
  width: 34%;
  color: #64748b;
  font-weight: 600;
  padding: 8px 12px 8px 0;
}

.task-settings.action-edit .propform tr > td {
  color: #334155;
  padding: 8px 0;
}

.task-settings.action-edit .propform label {
  margin-bottom: 0;
  color: #475569;
  font-weight: 500;
}

.task-settings.action-edit .propform input,
.task-settings.action-edit .propform select,
.task-settings.action-edit .propform textarea {
  width: 100%;
  min-height: 38px;
}

.task-settings .formcontent,
.task-settings .propform {
  color: #334155;
  background: #fff;
}

.task-settings fieldset.propform {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff;
}

.task-settings fieldset.propform legend {
  color: #8c652d;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 8px;
  width: auto;
}

.task-settings input.form-control,
.task-settings select.form-control,
.task-settings textarea.form-control,
.task-settings .custom-file-label,
.task-settings .propform input,
.task-settings .propform select,
.task-settings .propform textarea {
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 8px;
}

.task-settings input.form-control:focus,
.task-settings select.form-control:focus,
.task-settings textarea.form-control:focus,
.task-settings .propform input:focus,
.task-settings .propform select:focus,
.task-settings .propform textarea:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

/* Column 4 polish: softer focus, modern selects, branded switches and save button */
.task-settings[class*='action-edit-'] input.form-control,
.task-settings[class*='action-edit-'] select.form-control,
.task-settings[class*='action-edit-'] textarea.form-control,
.task-settings[class*='action-edit-'] .propform input,
.task-settings[class*='action-edit-'] .propform select,
.task-settings[class*='action-edit-'] .propform textarea,
.task-settings[class*='action-add-'] input.form-control,
.task-settings[class*='action-add-'] select.form-control,
.task-settings[class*='action-add-'] textarea.form-control,
.task-settings[class*='action-add-'] .propform input,
.task-settings[class*='action-add-'] .propform select,
.task-settings[class*='action-add-'] .propform textarea {
  border-radius: 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.task-settings[class*='action-edit-'] input:focus,
.task-settings[class*='action-edit-'] select:focus,
.task-settings[class*='action-edit-'] textarea:focus,
.task-settings[class*='action-edit-'] input:focus-visible,
.task-settings[class*='action-edit-'] select:focus-visible,
.task-settings[class*='action-edit-'] textarea:focus-visible,
.task-settings[class*='action-add-'] input:focus,
.task-settings[class*='action-add-'] select:focus,
.task-settings[class*='action-add-'] textarea:focus,
.task-settings[class*='action-add-'] input:focus-visible,
.task-settings[class*='action-add-'] select:focus-visible,
.task-settings[class*='action-add-'] textarea:focus-visible {
  outline: 0 !important;
  border-color: #bc8f4a !important;
  box-shadow: 0 0 0 2px rgba(188,143,74,.22) !important;
}

.task-settings[class*='action-edit-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
.task-settings[class*='action-edit-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus-visible,
.task-settings[class*='action-add-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
.task-settings[class*='action-add-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus-visible {
  outline: 0 !important;
  border-color: #bc8f4a !important;
  box-shadow: 0 0 0 2px rgba(188,143,74,.22) !important;
}

.task-settings[class*='action-edit-'] select.form-control,
.task-settings[class*='action-edit-'] .pretty-select,
.task-settings[class*='action-add-'] select.form-control,
.task-settings[class*='action-add-'] .pretty-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  border-radius: 10px;
  background-image:
    linear-gradient(45deg, transparent 50%, #8c652d 50%),
    linear-gradient(135deg, #8c652d 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.task-settings[class*='action-edit-'] .custom-control.custom-switch,
.task-settings[class*='action-add-'] .custom-control.custom-switch {
  min-height: 24px;
  padding-left: 2.55rem;
}

.task-settings[class*='action-edit-'] .custom-control.custom-switch .custom-control-label::before,
.task-settings[class*='action-add-'] .custom-control.custom-switch .custom-control-label::before {
  width: 2.05rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.12);
}

.task-settings[class*='action-edit-'] .custom-control.custom-switch .custom-control-label::after,
.task-settings[class*='action-add-'] .custom-control.custom-switch .custom-control-label::after {
  top: calc(.26rem + 1px);
  left: calc(-2.55rem + 2px);
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(15,23,42,.18);
  transition: transform 140ms ease, background-color 140ms ease;
}

.task-settings[class*='action-edit-'] .custom-control-input:checked ~ .custom-control-label::before,
.task-settings[class*='action-add-'] .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #bc8f4a;
  background: rgba(188,143,74,.35);
}

.task-settings[class*='action-edit-'] .custom-control-input:checked ~ .custom-control-label::after,
.task-settings[class*='action-add-'] .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(.84rem);
  background: #f6e2ba;
}

.task-settings[class*='action-edit-'] .custom-control-input:focus ~ .custom-control-label::before,
.task-settings[class*='action-add-'] .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px rgba(188,143,74,.22);
}

.task-settings[class*='action-edit-'] input[type='checkbox'],
.task-settings[class*='action-edit-'] input[type='radio'],
.task-settings[class*='action-add-'] input[type='checkbox'],
.task-settings[class*='action-add-'] input[type='radio'] {
  accent-color: #bc8f4a;
}

.task-settings[class*='action-edit-'] .formbuttons .btn-primary,
.task-settings[class*='action-edit-'] .formbuttons button.submit,
.task-settings[class*='action-edit-'] .formbuttons .submit,
.task-settings[class*='action-add-'] .formbuttons .btn-primary,
.task-settings[class*='action-add-'] .formbuttons button.submit,
.task-settings[class*='action-add-'] .formbuttons .submit {
  min-height: 42px;
  padding: 9px 24px;
  border: 1px solid #8c652d !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #c89a52 0%, #bc8f4a 55%, #a57a39 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(140,101,45,.28);
  transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.task-settings[class*='action-edit-'] .formbuttons .btn-primary:hover:not(:disabled),
.task-settings[class*='action-edit-'] .formbuttons button.submit:hover:not(:disabled),
.task-settings[class*='action-edit-'] .formbuttons .submit:hover:not(:disabled),
.task-settings[class*='action-add-'] .formbuttons .btn-primary:hover:not(:disabled),
.task-settings[class*='action-add-'] .formbuttons button.submit:hover:not(:disabled),
.task-settings[class*='action-add-'] .formbuttons .submit:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 20px rgba(140,101,45,.34);
}

.task-settings[class*='action-edit-'] .formbuttons .btn-primary:active,
.task-settings[class*='action-edit-'] .formbuttons button.submit:active,
.task-settings[class*='action-edit-'] .formbuttons .submit:active,
.task-settings[class*='action-add-'] .formbuttons .btn-primary:active,
.task-settings[class*='action-add-'] .formbuttons button.submit:active,
.task-settings[class*='action-add-'] .formbuttons .submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(140,101,45,.24);
}

.task-settings .formbuttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid #e2e8f0;
}

.task-settings .formbuttons .btn-primary,
.task-settings .formbuttons button.submit,
.task-settings .formbuttons .submit {
  color: #fff !important;
  background: #bc8f4a !important;
  border-color: #bc8f4a !important;
  border-radius: 8px !important;
  min-height: 40px;
  padding: 8px 20px;
  font-weight: 600;
}

.task-settings .formbuttons .btn-primary:hover:not(:disabled),
.task-settings .formbuttons button.submit:hover:not(:disabled),
.task-settings .formbuttons .submit:hover:not(:disabled) {
  background: #8c652d !important;
  border-color: #8c652d !important;
}

.task-settings .popupmenu .listing,
.task-settings .popupmenu .menu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.14);
}

.task-settings .popupmenu .listing li > a,
.task-settings .popupmenu .menu li > a {
  color: #475569;
}

.task-settings .popupmenu .listing li > a:not(.disabled):hover,
.task-settings .popupmenu .menu li > a:not(.disabled):hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

.task-settings .ui-dialog,
.task-settings .ui-dialog .ui-dialog-content,
.task-settings .ui-dialog .ui-dialog-titlebar,
.task-settings .ui-dialog .ui-dialog-buttonpane {
  background: #fff;
  color: #334155;
  border-color: #e2e8f0;
}

html.dark-mode .task-settings #layout-sidebar,
html.dark-mode .task-settings #layout-list,
html.dark-mode .task-settings #layout-content {
  color: #c5d1d3;
  background: #1a2025;
  border-color: #2f3c40;
}

html.dark-mode .task-settings #layout-sidebar > .header,
html.dark-mode .task-settings #layout-list > .header,
html.dark-mode .task-settings #layout-content > .header {
  border-bottom-color: #374549;
}

html.dark-mode .task-settings #layout-sidebar > .header .header-title,
html.dark-mode .task-settings #layout-list > .header .header-title,
html.dark-mode .task-settings #layout-content > .header .header-title {
  color: #c5d1d3;
}

html:not(.dark-mode) .task-settings #layout-sidebar,
html:not(.dark-mode) .task-settings #layout-list,
html:not(.dark-mode) .task-settings #layout-content {
  color: #475569;
  background: #fff;
  border-color: #e2e8f0;
}

html:not(.dark-mode) .task-settings #layout-list,
html:not(.dark-mode) .task-settings #layout-list.listbox,
html:not(.dark-mode) .task-settings #layout-list.listbox.selected {
  background-color: #fff !important;
}

html:not(.dark-mode) .task-settings #layout-list .listing,
html:not(.dark-mode) .task-settings #layout-list .listing tbody,
html:not(.dark-mode) .task-settings #layout-list .listing tr,
html:not(.dark-mode) .task-settings #layout-list .listing td {
  background: transparent !important;
}

html:not(.dark-mode) .task-settings.action-folders #layout-list > .searchbar.menu {
  border-color: #e2e8f0;
  background: #fff;
}

html:not(.dark-mode) .task-settings.action-folders #layout-list > .searchbar.menu input[type='text'],
html:not(.dark-mode) .task-settings.action-folders #layout-list > .searchbar.menu .form-control {
  color: #273244;
}

html:not(.dark-mode) .task-settings.action-folders #layout-list > .searchbar.menu input[type='text']::placeholder,
html:not(.dark-mode) .task-settings.action-folders #layout-list > .searchbar.menu .form-control::placeholder {
  color: #8e99a9;
}

html:not(.dark-mode) .task-settings #subscription-table li > a {
  color: #475569;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input) {
  accent-color: #bc8f4a !important;
  border-color: #94a3b8;
  background: #ffffff;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-label::before {
  border-color: #94a3b8;
  background: #ffffff;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-label::after {
  background: #64748b;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #bc8f4a;
  background: #fff4e0;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table li > .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background: #8c652d;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):checked {
  border-color: #bc8f4a;
  background: #fff4e0;
}

html:not(.dark-mode) .task-settings.action-folders #subscription-table input[type='checkbox']:not(.custom-control-input):checked::after {
  border-right-color: #8c652d;
  border-bottom-color: #8c652d;
}

html:not(.dark-mode) .task-settings #subscription-table li > a::before {
  color: #64748b;
}

html:not(.dark-mode) .task-settings #subscription-table li.selected > a {
  color: #8c652d;
  background: #fff6e7;
}

html:not(.dark-mode) .task-settings #subscription-table li > a:hover {
  color: #8c652d;
  background: #fff9ef;
}

html:not(.dark-mode) .task-settings #layout-menu {
  color: #475569;
  background:
    linear-gradient(180deg, rgba(188,143,74,.05), transparent 24%),
    #f8fafc;
  border-right-color: #e2e8f0;
}

html:not(.dark-mode) .task-settings #layout-menu .popover-header {
  color: #111827;
}

html:not(.dark-mode) .task-settings #taskmenu > a,
html:not(.dark-mode) .task-settings #taskmenu > span > a {
  color: #64748b;
}

html:not(.dark-mode) .task-settings #taskmenu > a:hover,
html:not(.dark-mode) .task-settings #taskmenu > span > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html:not(.dark-mode) .task-settings #taskmenu > a.selected,
html:not(.dark-mode) .task-settings #taskmenu > span > a.selected {
  color: #8c652d;
  background: rgba(188,143,74,.14);
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-settings #taskmenu .special-buttons a.logout {
  color: #dc4c4c;
}

html:not(.dark-mode) .task-settings #layout-sidebar > .header,
html:not(.dark-mode) .task-settings #layout-list > .header,
html:not(.dark-mode) .task-settings #layout-content > .header {
  border-bottom-color: #e2e8f0;
}

html:not(.dark-mode) .task-settings #layout-sidebar > .header .header-title,
html:not(.dark-mode) .task-settings #layout-list > .header .header-title,
html:not(.dark-mode) .task-settings #layout-content > .header .header-title {
  color: #111827;
}

html:not(.dark-mode) .task-settings #settings-menu li > a,
html:not(.dark-mode) .task-settings #sections-table li > a,
html:not(.dark-mode) .task-settings #identities-table td,
html:not(.dark-mode) .task-settings #responses-table td {
  color: #475569;
}

html:not(.dark-mode) .task-settings #settings-menu li > a::before,
html:not(.dark-mode) .task-settings #sections-table tr td.section::before,
html:not(.dark-mode) .task-settings #identities-table td::before,
html:not(.dark-mode) .task-settings #responses-table td::before {
  color: #64748b;
}

html:not(.dark-mode) .task-settings #sections-table tr td,
html:not(.dark-mode) .task-settings #sections-table tr td a {
  color: #475569;
}

html:not(.dark-mode) .task-settings #settings-menu li.selected > a,
html:not(.dark-mode) .task-settings #sections-table li.selected > a,
html:not(.dark-mode) .task-settings #identities-table tr.selected td,
html:not(.dark-mode) .task-settings #responses-table tr.selected td {
  color: #8c652d;
  background: #fff6e7;
  box-shadow: inset 2px 0 #bc8f4a;
}

html:not(.dark-mode) .task-settings #sections-table tr.selected td,
html:not(.dark-mode) .task-settings #sections-table tr.selected td a {
  color: #8c652d;
  background: #fff6e7 !important;
  box-shadow: none !important;
  border: 0 !important;
}

html:not(.dark-mode) .task-settings #settings-menu li > a:hover,
html:not(.dark-mode) .task-settings #sections-table li > a:hover,
html:not(.dark-mode) .task-settings #sections-table tr:hover td,
html:not(.dark-mode) .task-settings #sections-table tr:hover td a,
html:not(.dark-mode) .task-settings #identities-table tr:hover td,
html:not(.dark-mode) .task-settings #responses-table tr:hover td {
  color: #8c652d;
  background: #fff9ef !important;
}

@media screen and (min-width: 1025px) {
  .task-settings #layout-sidebar > .header .back-sidebar-button,
  .task-settings #layout-list > .header .back-sidebar-button,
  .task-settings #layout-content > .header .back-list-button,
  .task-settings #layout-list > .header .header-title,
  .task-settings #layout-content > .header .header-title {
    display: none !important;
  }

  .task-settings #layout-sidebar > .header {
    grid-template-columns: minmax(0,1fr) 30px;
  }

  .task-settings #layout-sidebar > .header .header-title {
    display: block;
  }
}

html:not(.dark-mode) .task-settings #layout-content > .header .toolbar > a,
html:not(.dark-mode) .task-settings #layout-content > .header #responsestoolbar > a,
html:not(.dark-mode) .task-settings #layout-content > .header #identitiestoolbar > a {
  color: #64748b;
}

html:not(.dark-mode) .task-settings #layout-content > .header .toolbar > a:hover,
html:not(.dark-mode) .task-settings #layout-content > .header #responsestoolbar > a:hover,
html:not(.dark-mode) .task-settings #layout-content > .header #identitiestoolbar > a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.10);
}

html.dark-mode .task-settings .formcontent,
html.dark-mode .task-settings .propform,
html.dark-mode .task-settings.action-edit,
html.dark-mode .task-settings.action-edit .formcontent,
html.dark-mode .task-settings.action-edit .propform {
  color: #c5d1d3;
  background: #21292c;
}

html.dark-mode .task-settings.action-edit .propform {
  border-color: #4d6066;
}

html.dark-mode .task-settings[class*='action-edit-'],
html.dark-mode .task-settings[class*='action-add-'],
html.dark-mode .task-settings[class*='action-edit-'] .formcontent,
html.dark-mode .task-settings[class*='action-add-'] .formcontent,
html.dark-mode .task-settings[class*='action-edit-'] .propform,
html.dark-mode .task-settings[class*='action-add-'] .propform,
html.dark-mode .task-settings[class*='action-edit-'] table.propform,
html.dark-mode .task-settings[class*='action-add-'] table.propform {
  background: #21292c !important;
  color: #c5d1d3 !important;
}

html.dark-mode .task-settings[class*='action-edit-'] table.propform,
html.dark-mode .task-settings[class*='action-add-'] table.propform {
  border-color: #4d6066;
}

html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > th,
html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > td,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > th,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > td {
  border-top-color: #374549;
}

html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > th,
html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > td.title,
html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > td:first-child,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > th,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > td.title,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > td:first-child {
  color: #aeb8c4;
}

html.dark-mode .task-settings[class*='action-edit-'] table.propform tr > td:not(.title):not(:first-child),
html.dark-mode .task-settings[class*='action-edit-'] table.propform label,
html.dark-mode .task-settings[class*='action-add-'] table.propform tr > td:not(.title):not(:first-child),
html.dark-mode .task-settings[class*='action-add-'] table.propform label {
  color: #c5d1d3;
}

html.dark-mode .task-settings[class*='action-edit-'] .formbuttons,
html.dark-mode .task-settings[class*='action-add-'] .formbuttons {
  border-top-color: #4d6066;
}

html.dark-mode body.task-settings.action-edit,
html.dark-mode body.task-settings.action-edit .formcontent,
html.dark-mode body.task-settings.action-edit .propform {
  background: #21292c !important;
  color: #c5d1d3 !important;
}

html.dark-mode .task-settings.action-edit .propform tr > th {
  color: #aeb8c4;
}

html.dark-mode .task-settings.action-edit .propform tr > td,
html.dark-mode .task-settings.action-edit .propform label {
  color: #c5d1d3;
}

html.dark-mode .task-settings fieldset.propform {
  border-color: #4d6066;
  background: #21292c;
}

html.dark-mode .task-settings fieldset.propform legend {
  color: #f6e2ba;
}

html.dark-mode .task-settings input.form-control,
html.dark-mode .task-settings select.form-control,
html.dark-mode .task-settings textarea.form-control,
html.dark-mode .task-settings .custom-file-label,
html.dark-mode .task-settings .propform input,
html.dark-mode .task-settings .propform select,
html.dark-mode .task-settings .propform textarea {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

html.dark-mode .task-settings[class*='action-edit-'] select.form-control,
html.dark-mode .task-settings[class*='action-edit-'] .pretty-select,
html.dark-mode .task-settings[class*='action-add-'] select.form-control,
html.dark-mode .task-settings[class*='action-add-'] .pretty-select {
  -webkit-appearance: auto;
  appearance: auto;
  background-color: #222a2f;
  color: #d3dde2;
  border-color: #4d6066;
  background-image: none;
  padding-right: 12px;
}

html.dark-mode .task-settings[class*='action-edit-'] input.form-control,
html.dark-mode .task-settings[class*='action-edit-'] textarea.form-control,
html.dark-mode .task-settings[class*='action-edit-'] .propform input,
html.dark-mode .task-settings[class*='action-edit-'] .propform textarea,
html.dark-mode .task-settings[class*='action-add-'] input.form-control,
html.dark-mode .task-settings[class*='action-add-'] textarea.form-control,
html.dark-mode .task-settings[class*='action-add-'] .propform input,
html.dark-mode .task-settings[class*='action-add-'] .propform textarea {
  background-color: #222a2f;
  color: #d3dde2;
  border-color: #4d6066;
}

html.dark-mode .task-settings[class*='action-edit-'] input.form-control::placeholder,
html.dark-mode .task-settings[class*='action-edit-'] textarea.form-control::placeholder,
html.dark-mode .task-settings[class*='action-edit-'] .propform input::placeholder,
html.dark-mode .task-settings[class*='action-edit-'] .propform textarea::placeholder,
html.dark-mode .task-settings[class*='action-add-'] input.form-control::placeholder,
html.dark-mode .task-settings[class*='action-add-'] textarea.form-control::placeholder,
html.dark-mode .task-settings[class*='action-add-'] .propform input::placeholder,
html.dark-mode .task-settings[class*='action-add-'] .propform textarea::placeholder {
  color: #8fa0aa;
}

html.dark-mode .task-settings[class*='action-edit-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
html.dark-mode .task-settings[class*='action-edit-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus-visible,
html.dark-mode .task-settings[class*='action-add-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
html.dark-mode .task-settings[class*='action-add-'] .propform input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus-visible,
html.dark-mode .task-settings[class*='action-edit-'] .propform textarea:focus,
html.dark-mode .task-settings[class*='action-edit-'] .propform textarea:focus-visible,
html.dark-mode .task-settings[class*='action-add-'] .propform textarea:focus,
html.dark-mode .task-settings[class*='action-add-'] .propform textarea:focus-visible {
  outline: 0 !important;
  border-color: #bc8f4a !important;
  background-color: #222a2f !important;
  box-shadow: 0 0 0 1px rgba(188,143,74,.38), 0 0 0 3px rgba(188,143,74,.12) !important;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu {
  border: 1px solid #4d6066;
  border-radius: 10px;
  background: #1a2024;
  color: #d6e1e5;
  box-shadow: 0 12px 24px rgba(0,0,0,.4);
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .popover-header,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .popover-header {
  border-bottom: 1px solid #344147;
  background: #1f272b;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .popover-header .button.cancel,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .popover-header .button.cancel {
  color: #aebec6;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .popover-header .button.cancel:hover,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .popover-header .button.cancel:hover {
  color: #f6e2ba;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .listing,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .listing {
  padding: 6px;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .listing li > a,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .listing li > a {
  border-radius: 8px;
  color: #d6e1e5;
  padding: 7px 10px;
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .listing li > a:hover,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .listing li > a:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.14);
}

html.dark-mode .task-settings[class*='action-edit-'] .popover.select-menu .listing li > a.selected,
html.dark-mode .task-settings[class*='action-add-'] .popover.select-menu .listing li > a.selected {
  color: #f7e6c2;
  background: rgba(188,143,74,.2);
}

html.dark-mode .task-settings[class*='action-edit-'] .custom-control.custom-switch .custom-control-label::before,
html.dark-mode .task-settings[class*='action-add-'] .custom-control.custom-switch .custom-control-label::before {
  border-color: #4d6066;
  background: #2b3539;
}

html.dark-mode .task-settings[class*='action-edit-'] .custom-control.custom-switch .custom-control-label::after,
html.dark-mode .task-settings[class*='action-add-'] .custom-control.custom-switch .custom-control-label::after {
  background: #dbe4ea;
}

html.dark-mode .task-settings[class*='action-edit-'] .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .task-settings[class*='action-add-'] .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #bc8f4a;
  background: rgba(188,143,74,.32);
}

html.dark-mode .task-settings[class*='action-edit-'] .custom-control-input:checked ~ .custom-control-label::after,
html.dark-mode .task-settings[class*='action-add-'] .custom-control-input:checked ~ .custom-control-label::after {
  background: #f6e2ba;
}

html.dark-mode .task-settings[class*='action-edit-'] .formbuttons .btn-primary,
html.dark-mode .task-settings[class*='action-edit-'] .formbuttons button.submit,
html.dark-mode .task-settings[class*='action-edit-'] .formbuttons .submit,
html.dark-mode .task-settings[class*='action-add-'] .formbuttons .btn-primary,
html.dark-mode .task-settings[class*='action-add-'] .formbuttons button.submit,
html.dark-mode .task-settings[class*='action-add-'] .formbuttons .submit {
  border-color: #d5ae72 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(245,220,170,.06) inset;
}

@media screen and (max-width: 1024px) {
  .task-settings #layout-menu .popover-header #logo {
    width: 36px;
    height: 36px;
  }

  .task-settings #taskmenu a .inner {
    display: none;
  }
}

html.dark-mode .task-settings .formbuttons {
  border-top-color: #4d6066;
}

html.dark-mode .task-settings .popupmenu .listing,
html.dark-mode .task-settings .popupmenu .menu {
  background: #1a2025;
  border-color: #2f3c40;
}

html.dark-mode .task-settings .popupmenu .listing li > a,
html.dark-mode .task-settings .popupmenu .menu li > a {
  color: #aeb8c4;
}

html.dark-mode .task-settings .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .task-settings .popupmenu .menu li > a:not(.disabled):hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.12);
}

html.dark-mode .task-settings .ui-dialog,
html.dark-mode .task-settings .ui-dialog .ui-dialog-content,
html.dark-mode .task-settings .ui-dialog .ui-dialog-titlebar,
html.dark-mode .task-settings .ui-dialog .ui-dialog-buttonpane {
  background: #21292c;
  color: #c5d1d3;
  border-color: #4d6066;
}

/* =========================================================
   Compose page — unified modern G7 theme (v2)
   ========================================================= */

/* ---------- Layout shell ---------- */
.task-mail.action-compose {
  --g7-rail-width: 110px;
}

.task-mail.action-compose #layout {
  display: grid;
  grid-template-columns:
    var(--g7-rail-width)
    minmax(360px, 1fr)
    minmax(300px, 480px);
  grid-template-rows: 100%;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
}

.task-mail.action-compose #layout-menu,
.task-mail.action-compose #layout-content,
.task-mail.action-compose #layout-sidebar {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: none;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.task-mail.action-compose #layout-menu {
  width: var(--g7-rail-width);
  grid-column: 1;
  grid-row: 1;
}

.task-mail.action-compose #layout-content {
  grid-column: 2;
  grid-row: 1;
}

.task-mail.action-compose #layout-sidebar {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

/* Keep the recipient selector as a popup/modal, not a permanent column. */
.task-mail.action-compose #layout > #recipient-dialog {
  display: none !important;
}

.task-mail.action-compose #layout-sidebar > .scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Stabilization for medium desktops/laptops: keep 3 columns but reduce the
   right pane footprint to avoid clipping or forced overflow. */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .task-mail.action-compose #layout {
    grid-template-columns:
      var(--g7-rail-width)
      minmax(320px, 1fr)
      minmax(260px, 34vw);
  }

  .task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
    min-width: 0 !important;
    font-size: 13px !important;
  }
}

/* Tablet and below: preserve navigation + editor and avoid cramped 3rd column.
   Options/attachments stay reachable via the native toolbar toggle. */
@media screen and (max-width: 1024px) {
  .task-mail.action-compose #layout {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .task-mail.action-compose #layout-sidebar,
  .task-mail.action-compose #layout-sidebar.hidden {
    display: none !important;
  }

  .task-mail.action-compose #layout-content {
    width: auto !important;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto !important;
  }
}

/* On large screens keep the compose sidebar (attachments/options) visible
   regardless of Roundcube JS toggling the .hidden class. */
@media screen and (min-width: 1025px) {
  html body.task-mail.action-compose #layout-sidebar,
  html body.task-mail.action-compose #layout-sidebar.hidden {
    display: flex !important;
  }
}

.task-mail.action-compose #layout-content,
.task-mail.action-compose #compose-content {
  background: #f8fafc;
}

html.dark-mode .task-mail.action-compose #layout-content,
html.dark-mode .task-mail.action-compose #compose-content {
  background: #1a2025;
}

.task-mail.action-compose #compose-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.task-mail.action-compose #compose-content > form.formcontent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 10% 0, rgba(188,143,74,.04), transparent 35%),
    #f8fafc;
  padding: 20px;
}

html.dark-mode .task-mail.action-compose #compose-content > form.formcontent {
  background:
    radial-gradient(circle at 10% 0, rgba(188,143,74,.04), transparent 35%),
    #1a2025;
}

/* ---------- Compose toolbar ---------- */
.task-mail.action-compose #compose-content > .header,
.task-mail.action-compose #layout-content > .header {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #compose-content > .header,
html.dark-mode .task-mail.action-compose #layout-content > .header {
  background: #21292c;
  border-bottom-color: #4d6066;
}

/* ---------- Compose toolbar ---------- */
/* Use a Flex layout with explicit gaps and separators. We keep all items
   in one row, but visually group them: Save / Attach | Signature / Responses
   / Review-language. The hidden-big mobile toggle is shown only on small
   screens and styled as a secondary button. */

.task-mail.action-compose #compose-content > .header #toolbar-menu,
.task-mail.action-compose #layout-content > .header #toolbar-menu {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Each top-level item in the toolbar row */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Toolbar links/buttons: consistent footprint and vertical alignment */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a,
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > button,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > button {
  height: 34px;
  min-height: 34px;
  align-self: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  color: #475569;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a,
html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > button,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > button {
  color: #c5d1d3;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a:hover,
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > button:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > button:hover {
  color: #8c652d;
  background: rgba(188,143,74,.12);
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a:hover,
html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > button:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > button:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.14);
}

/* Icon sizing and alignment */
.task-mail.action-compose #compose-content > .header #toolbar-menu a::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a::before,
.task-mail.action-compose #compose-content > .header #toolbar-menu button::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu button::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu a .inner,
.task-mail.action-compose #layout-content > .header #toolbar-menu a .inner,
.task-mail.action-compose #compose-content > .header #toolbar-menu button .inner,
.task-mail.action-compose #layout-content > .header #toolbar-menu button .inner {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

/* Hide native spacer; we will add our own group separators */
.task-mail.action-compose #compose-content > .header #toolbar-menu .spacer,
.task-mail.action-compose #layout-content > .header #toolbar-menu .spacer { display: none; }

/* --- Group separators between logical button sets --- */
/* Order in DOM: [hidden-big Options], Salvar, Anexar, Signature, Responses, Spell(dropbutton) */
/* We want: (Options) | Salvar | Anexar || Signature | Responses | Spell-Lang */

/* Group separators: keep items visually grouped */

/* Separator after "Options" (mobile only) */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li.hidden-big + li,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big + li {
  margin-left: 8px;
}

/* Separator between Anexar and Assinatura */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.attach,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.attach {
  margin-right: 10px;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.attach::after,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.attach::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  pointer-events: none;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.attach::after,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.attach::after {
  background: #4d6066;
}

/* Breathing room after the visual separator */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.signature,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.signature {
  margin-left: 6px;
}

/* Save button: same base style as others; only hover gets the gold treatment */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.save,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.save,
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.draft,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.draft {
  color: #475569;
  background: transparent;
  font-weight: 600;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.save:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.save:hover,
.task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.draft:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.draft:hover {
  color: #fff;
  background: #bc8f4a;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.save,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.save,
html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.draft,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.draft {
  color: #c5d1d3;
  background: transparent;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.save:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.save:hover,
html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li > a.draft:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a.draft:hover {
  color: #0b0f17;
  background: #e5c583;
}

/* Mobile "Options" toggle on small screens */
.task-mail.action-compose #compose-content > .header #toolbar-menu > li.hidden-big > a.options,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big > a.options {
  color: #64748b;
  background: #f1f5f9;
  padding: 0 12px;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu > li.hidden-big > a.options,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big > a.options {
  color: #c5d1d3;
  background: #374549;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu > li.hidden-big > a.options:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big > a.options:hover {
  color: #8c652d;
  background: rgba(188,143,74,.12);
}

/* Dropbutton grouping (Revisar + Idioma) */
.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0;
  margin-left: 2px;
  border-radius: 7px;
  background: transparent;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a {
  align-self: center;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a:first-child,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a:first-child {
  border-radius: 7px 0 0 7px;
  padding-right: 8px;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a.dropdown,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a.dropdown {
  position: relative;
  width: 24px;
  min-width: 24px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 0 7px 7px 0;
  border-left: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a.dropdown,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a.dropdown {
  border-left-color: #4d6066;
}

/* Hover state covers the whole dropbutton */
.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton:hover {
  background: rgba(188,143,74,.12);
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton:hover {
  background: rgba(188,143,74,.14);
}

.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a.dropdown:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a.dropdown:hover,
.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a:first-child:hover,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a:first-child:hover {
  color: #8c652d;
  background: transparent;
}

html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a.dropdown:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a.dropdown:hover,
html.dark-mode .task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a:first-child:hover,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a:first-child:hover {
  color: #f6e2ba;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu .dropbutton > a.dropdown .inner,
.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a.dropdown .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.task-mail.action-compose #compose-content > .header #toolbar-menu a.disabled,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.disabled,
.task-mail.action-compose #compose-content > .header #toolbar-menu button.disabled,
.task-mail.action-compose #layout-content > .header #toolbar-menu button.disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Compose headers (De/Para/Assunto) — card style ---------- */
.task-mail.action-compose .compose-headers {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  padding: 20px 24px 12px;
  margin-bottom: 16px;
}

html.dark-mode .task-mail.action-compose .compose-headers {
  background: #21292c;
  border-color: #4d6066;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.task-mail.action-compose .compose-headers::before {
  content: 'Cabeçalhos da mensagem';
  display: block;
  color: #8c652d;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

html.dark-mode .task-mail.action-compose .compose-headers::before {
  color: #f6e2ba;
  border-bottom-color: #374549;
}

.task-mail.action-compose .compose-headers .form-group.row {
  align-items: center;
  margin-bottom: 14px;
}

.task-mail.action-compose .compose-headers label.col-form-label {
  color: #334155;
  font-weight: 500;
  font-size: 13px;
}

html.dark-mode .task-mail.action-compose .compose-headers label.col-form-label {
  color: #c5d1d3;
}

.task-mail.action-compose .compose-headers .form-control,
.task-mail.action-compose .compose-headers .custom-select,
.task-mail.action-compose .compose-headers .recipient-input {
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  min-height: 38px;
}

html.dark-mode .task-mail.action-compose .compose-headers .form-control,
html.dark-mode .task-mail.action-compose .compose-headers .custom-select,
html.dark-mode .task-mail.action-compose .compose-headers .recipient-input {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

.task-mail.action-compose .compose-headers .form-control:focus,
.task-mail.action-compose .compose-headers .custom-select:focus,
.task-mail.action-compose .compose-headers .recipient-input.focus,
.task-mail.action-compose .compose-headers .recipient-input:focus-within {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

.task-mail.action-compose .compose-headers .input-group-text {
  color: #64748b;
  background: #f1f5f9;
  border-color: #ced4da;
  border-radius: 0 6px 6px 0;
}

html.dark-mode .task-mail.action-compose .compose-headers .input-group-text {
  color: #aeb8c4;
  background: #374549;
  border-color: #4d6066;
}

.task-mail.action-compose .compose-headers .input-group-text:hover {
  color: #8c652d;
  background: rgba(188,143,74,.12);
}

.task-mail.action-compose .compose-headers .recipient-input .input input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Compose body textarea — card style ---------- */
.task-mail.action-compose #composebodycontainer {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  padding: 16px 20px 20px;
  margin-bottom: 16px;
}

html.dark-mode .task-mail.action-compose #composebodycontainer {
  background: #21292c;
  border-color: #4d6066;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.task-mail.action-compose #composebodycontainer::before {
  content: 'Corpo da mensagem';
  display: block;
  color: #8c652d;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

html.dark-mode .task-mail.action-compose #composebodycontainer::before {
  color: #f6e2ba;
}

.task-mail.action-compose #composebody {
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  width: 100%;
  min-height: 320px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
}

html.dark-mode .task-mail.action-compose #composebody {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

.task-mail.action-compose #composebody:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

.task-mail.action-compose #composebodycontainer .editor-toolbar {
  margin-top: 10px;
  text-align: right;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar a {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
}

html.dark-mode .task-mail.action-compose #composebodycontainer .editor-toolbar a {
  color: #aeb8c4;
  background: #374549;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar a:hover {
  color: #8c652d;
  background: rgba(188,143,74,.12);
}

/* ---------- Compose sidebar (options + attachments) ---------- */
.task-mail.action-compose #compose-options,
.task-mail.action-compose #compose-attachments {
  background: #fff;
  border-left: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #compose-options,
html.dark-mode .task-mail.action-compose #compose-attachments {
  background: #21292c;
  border-left-color: #4d6066;
}

.task-mail.action-compose #compose-attachments {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #compose-attachments {
  border-bottom-color: #4d6066;
}

/* Sidebar section header cards */
.task-mail.action-compose #compose-attachments::before,
.task-mail.action-compose #compose-options::before {
  display: block;
  color: #8c652d;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

html.dark-mode .task-mail.action-compose #compose-attachments::before,
html.dark-mode .task-mail.action-compose #compose-options::before {
  color: #f6e2ba;
}

.task-mail.action-compose #compose-attachments::before {
  content: 'Anexos';
  margin-bottom: 12px;
}

.task-mail.action-compose #compose-attachments .hint {
  color: #64748b;
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}

html.dark-mode .task-mail.action-compose #compose-attachments .hint {
  color: #8ba3a7;
}

.task-mail.action-compose #compose-attachments .btn-secondary {
  color: #fff;
  background: #bc8f4a;
  border-color: #bc8f4a;
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 16px;
}

.task-mail.action-compose #compose-attachments .btn-secondary:hover {
  background: #8c652d;
  border-color: #8c652d;
}

.task-mail.action-compose #compose-options {
  padding: 20px 0;
}

.task-mail.action-compose #compose-options::before {
  content: 'Opções';
  margin: 0 20px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

html.dark-mode .task-mail.action-compose #compose-options::before {
  border-bottom-color: #374549;
}

/* Sidebar top header: change generic "Opções e anexos" to contextual title */
.task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

html.dark-mode .task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
  color: #c5d1d3;
}

/* Replace the header text via ::before and hide original text.
   We keep the span visible-sized so the grid cell still has width,
   but hide the original characters by using a zero-width font trick
   (::before provides the readable text). */
.task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  font-size: 14px !important;
  font-weight: 700;
  color: transparent !important;
  line-height: 1.2;
  overflow: visible !important;
}

.task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes::before {
  content: 'Configurações da mensagem';
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

html.dark-mode .task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes::before {
  color: #c5d1d3;
}

.task-mail.action-compose #compose-options .form-group.row,
.task-mail.action-compose #compose-options .form-check {
  align-items: center;
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid #f8fafc;
}

html.dark-mode .task-mail.action-compose #compose-options .form-group.row,
html.dark-mode .task-mail.action-compose #compose-options .form-check {
  border-bottom-color: #2f3c40;
}

.task-mail.action-compose #compose-options label.col-form-label {
  color: #334155;
  font-weight: 500;
  font-size: 13px;
}

html.dark-mode .task-mail.action-compose #compose-options label.col-form-label {
  color: #c5d1d3;
}

.task-mail.action-compose #compose-options .custom-control-input:checked ~ .custom-control-label::before {
  background: #bc8f4a;
  border-color: #bc8f4a;
}

.task-mail.action-compose #compose-options select.form-control {
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  min-height: 34px;
  font-size: 13px;
}

html.dark-mode .task-mail.action-compose #compose-options select.form-control {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

.task-mail.action-compose #compose-options select.form-control:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.15);
}

/* ---------- Form buttons (Enviar, Salvar rascunho, etc.) ---------- */
.task-mail.action-compose .formbuttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose .formbuttons {
  background: #21292c;
  border-top-color: #4d6066;
}

.task-mail.action-compose .formbuttons .btn,
.task-mail.action-compose .formbuttons button {
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 22px;
  font-weight: 600;
  font-size: 13px;
  border: 0;
  cursor: pointer;
}

.task-mail.action-compose .formbuttons .btn-primary,
.task-mail.action-compose .formbuttons button.send,
.task-mail.action-compose .formbuttons .btn.send {
  color: #fff !important;
  background: #bc8f4a !important;
  border-color: #bc8f4a !important;
  box-shadow: 0 4px 12px rgba(188,143,74,.25);
}

.task-mail.action-compose .formbuttons .btn-primary:hover:not(:disabled),
.task-mail.action-compose .formbuttons button.send:hover:not(:disabled),
.task-mail.action-compose .formbuttons .btn.send:hover:not(:disabled) {
  background: #8c652d !important;
  border-color: #8c652d !important;
  box-shadow: 0 6px 16px rgba(188,143,74,.32);
}

.task-mail.action-compose .formbuttons .btn-secondary,
.task-mail.action-compose .formbuttons button.save,
.task-mail.action-compose .formbuttons .btn.save,
.task-mail.action-compose .formbuttons .button {
  color: #64748b;
  background: #f1f5f9;
  border-color: #f1f5f9;
}

.task-mail.action-compose .formbuttons .btn-secondary:hover:not(:disabled),
.task-mail.action-compose .formbuttons button.save:hover:not(:disabled),
.task-mail.action-compose .formbuttons .btn.save:hover:not(:disabled) {
  color: #344054;
  background: #e2e8f0;
  border-color: #e2e8f0;
}

html.dark-mode .task-mail.action-compose .formbuttons .btn-secondary,
html.dark-mode .task-mail.action-compose .formbuttons button.save,
html.dark-mode .task-mail.action-compose .formbuttons .btn.save {
  color: #c5d1d3;
  background: #374549;
  border-color: #374549;
}

html.dark-mode .task-mail.action-compose .formbuttons .btn-secondary:hover:not(:disabled),
html.dark-mode .task-mail.action-compose .formbuttons button.save:hover:not(:disabled),
html.dark-mode .task-mail.action-compose .formbuttons .btn.save:hover:not(:disabled) {
  color: #e2e8e9;
  background: #4d6066;
  border-color: #4d6066;
}

/* =========================================================
   Compose recipient/contact picker dialog (jQuery UI)
   ========================================================= */

/* Overlay */
.task-mail.action-compose .ui-widget-overlay {
  background: rgba(15, 23, 42, .55);
  opacity: 1;
}

/* Dialog frame */
.task-mail.action-compose .ui-dialog {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .22);
  padding: 0;
  overflow: hidden;
}

html.dark-mode .task-mail.action-compose .ui-dialog {
  background: #21292c;
  border-color: #4d6066;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

/* Title bar */
.task-mail.action-compose .ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 0;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-titlebar {
  background: #21292c;
  border-bottom-color: #374549;
}

.task-mail.action-compose .ui-dialog .ui-dialog-title {
  color: #475569;
  font-size: 15px;
  font-weight: 700;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-title {
  color: #c5d1d3;
}

.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: #f1f5f9;
  cursor: pointer;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close {
  color: #c5d1d3;
  background: #374549;
}

.task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close:hover {
  color: #8c652d;
  background: rgba(188, 143, 74, .12);
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-titlebar-close:hover {
  color: #f6e2ba;
  background: rgba(188, 143, 74, .14);
}

/* Content */
.task-mail.action-compose .ui-dialog .ui-dialog-content {
  color: #475569;
  background: #fff;
  padding: 0;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-content {
  color: #c5d1d3;
  background: #21292c;
}

/* Recipient dialog internal layout */
.task-mail.action-compose #recipient-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.task-mail.action-compose #recipient-dialog .listbox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
}

/* Search bar inside dialog */
.task-mail.action-compose #recipient-dialog .searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #recipient-dialog .searchbar {
  background: #1a2025;
  border-bottom-color: #4d6066;
}

.task-mail.action-compose #recipient-dialog .searchbar input {
  flex: 1 1 auto;
  min-width: 0;
  color: #273244;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

html.dark-mode .task-mail.action-compose #recipient-dialog .searchbar input {
  color: #c5d1d3;
  background: #21292c;
  border-color: #4d6066;
}

.task-mail.action-compose #recipient-dialog .searchbar input:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188, 143, 74, .15);
}

/* Source list (addressbooks) */
.task-mail.action-compose #recipient-dialog .scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.task-mail.action-compose #recipient-dialog ul.listing {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.task-mail.action-compose #recipient-dialog ul.listing li {
  margin: 0 0 2px;
}

.task-mail.action-compose #recipient-dialog ul.listing li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

html.dark-mode .task-mail.action-compose #recipient-dialog ul.listing li a {
  color: #c5d1d3;
}

.task-mail.action-compose #recipient-dialog ul.listing li a:hover {
  background: rgba(188, 143, 74, .10);
  color: #8c652d;
}

html.dark-mode .task-mail.action-compose #recipient-dialog ul.listing li a:hover {
  color: #f6e2ba;
  background: rgba(188, 143, 74, .12);
}

.task-mail.action-compose #recipient-dialog ul.listing li a.selected {
  color: #8c652d;
  background: rgba(188, 143, 74, .14);
}

html.dark-mode .task-mail.action-compose #recipient-dialog ul.listing li a.selected {
  color: #f6e2ba;
}

/* Contact list rows */
.task-mail.action-compose #recipient-dialog .contactlist {
  border-top: 1px solid #e2e8f0;
}

html.dark-mode .task-mail.action-compose #recipient-dialog .contactlist {
  border-top-color: #4d6066;
}

.task-mail.action-compose #recipient-dialog .contactlist li {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 13px;
}

html.dark-mode .task-mail.action-compose #recipient-dialog .contactlist li {
  border-bottom-color: #2f3c40;
  color: #c5d1d3;
}

.task-mail.action-compose #recipient-dialog .contactlist li:hover {
  background: rgba(188, 143, 74, .06);
}

/* Footer buttons */
.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  margin: 0;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-buttonpane {
  background: #1a2025;
  border-top-color: #4d6066;
}

.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:first-child {
  color: #fff;
  background: #bc8f4a;
}

.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:first-child:hover {
  background: #8c652d;
}

.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:last-child {
  color: #64748b;
  background: #f1f5f9;
}

.task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:last-child:hover {
  color: #344054;
  background: #e2e8f0;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:first-child {
  color: #0b0f17;
  background: #e5c583;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:first-child:hover {
  background: #bc8f4a;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:last-child {
  color: #c5d1d3;
  background: #374549;
}

html.dark-mode .task-mail.action-compose .ui-dialog .ui-dialog-buttonpane .ui-button:last-child:hover {
  color: #e2e8e9;
  background: #4d6066;
}

/* Remove default jQuery UI corner radius noise */
.task-mail.action-compose .ui-dialog .ui-corner-all,
.task-mail.action-compose .ui-dialog .ui-corner-top,
.task-mail.action-compose .ui-dialog .ui-corner-bottom {
  border-radius: 0;
}

/* ---------- Mobile: keep native stacked toolbar height reasonable ---------- */
@media screen and (max-width: 1024px) {
  .task-addressbook #addressbooktoolbar > li,
  .task-addressbook #layout-content > .header #toolbar-menu > li,
  .task-addressbook #layout-content > .header .toolbar > li {
    height: 46px;
  }

  .task-addressbook #addressbooktoolbar > a,
  .task-addressbook #addressbooktoolbar > span > a,
  .task-addressbook #layout-content > .header #toolbar-menu > li > a,
  .task-addressbook #layout-content > .header .toolbar > li > a,
  .task-addressbook #layout-content > .header #toolbar-menu > li > span > a,
  .task-addressbook #layout-content > .header .toolbar > li > span > a {
    min-height: 46px;
  }
}

/* =========================================================
   Critical iframe forms — stable full-width column layout
   Roundcube renders contact and settings editors inside iframes.
   Keep their form content and action bar in a vertical flow.
   ========================================================= */

html.iframe body.task-settings[class*='action-edit-'],
html.iframe body.task-settings[class*='action-add-'],
html.iframe body.task-addressbook.action-add,
html.iframe body.task-addressbook.action-edit {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

html.iframe body.task-settings[class*='action-edit-'] > .formcontent,
html.iframe body.task-settings[class*='action-add-'] > .formcontent,
html.iframe body.task-addressbook.action-add > .formcontent,
html.iframe body.task-addressbook.action-edit > .formcontent {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 1080px;
  margin: 0 auto !important;
  padding: 22px 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box;
}

html.iframe body.task-settings[class*='action-edit-'] > .formbuttons,
html.iframe body.task-settings[class*='action-add-'] > .formbuttons,
html.iframe body.task-addressbook.action-add > .formbuttons,
html.iframe body.task-addressbook.action-edit > .formbuttons {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 13px max(24px, calc((100% - 1032px) / 2)) !important;
  border-top: 1px solid #e2e8f0 !important;
  background: rgba(248,250,252,.96) !important;
  box-sizing: border-box;
}

html.dark-mode.iframe body.task-settings[class*='action-edit-'] > .formbuttons,
html.dark-mode.iframe body.task-settings[class*='action-add-'] > .formbuttons,
html.dark-mode.iframe body.task-addressbook.action-add > .formbuttons,
html.dark-mode.iframe body.task-addressbook.action-edit > .formbuttons {
  border-top-color: #374549 !important;
  background: rgba(26,32,37,.97) !important;
}

html.iframe body.task-settings[class*='action-edit-'] > .formbuttons > button,
html.iframe body.task-settings[class*='action-add-'] > .formbuttons > button,
html.iframe body.task-addressbook.action-add > .formbuttons > button,
html.iframe body.task-addressbook.action-edit > .formbuttons > button {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: 220px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 22px !important;
  white-space: nowrap !important;
}

html.iframe body.task-settings[class*='action-edit-'] > .formcontent .propform,
html.iframe body.task-settings[class*='action-add-'] > .formcontent .propform {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

html.iframe body.task-settings[class*='action-edit-'] > .formcontent table.propform,
html.iframe body.task-settings[class*='action-add-'] > .formcontent table.propform {
  table-layout: auto !important;
}

html.iframe body.task-settings[class*='action-edit-'] > .formcontent table.propform tr > th,
html.iframe body.task-settings[class*='action-edit-'] > .formcontent table.propform tr > td.title,
html.iframe body.task-settings[class*='action-add-'] > .formcontent table.propform tr > th,
html.iframe body.task-settings[class*='action-add-'] > .formcontent table.propform tr > td.title {
  width: 32% !important;
  min-width: 190px;
}

html.iframe body.task-addressbook.action-add > .formcontent #contact-details,
html.iframe body.task-addressbook.action-edit > .formcontent #contact-details,
html.iframe body.task-addressbook.action-add > .formcontent #contacttabs,
html.iframe body.task-addressbook.action-edit > .formcontent #contacttabs {
  width: 100%;
  min-width: 0;
}

@media screen and (max-width: 700px) {
  html.iframe body.task-settings[class*='action-edit-'] > .formcontent,
  html.iframe body.task-settings[class*='action-add-'] > .formcontent,
  html.iframe body.task-addressbook.action-add > .formcontent,
  html.iframe body.task-addressbook.action-edit > .formcontent {
    padding: 16px !important;
  }

  html.iframe body.task-settings[class*='action-edit-'] > .formcontent table.propform tr > th,
  html.iframe body.task-settings[class*='action-edit-'] > .formcontent table.propform tr > td.title,
  html.iframe body.task-settings[class*='action-add-'] > .formcontent table.propform tr > th,
  html.iframe body.task-settings[class*='action-add-'] > .formcontent table.propform tr > td.title {
    width: 40% !important;
    min-width: 0;
  }

  html.iframe body.task-settings[class*='action-edit-'] > .formbuttons,
  html.iframe body.task-settings[class*='action-add-'] > .formbuttons,
  html.iframe body.task-addressbook.action-add > .formbuttons,
  html.iframe body.task-addressbook.action-edit > .formbuttons {
    min-height: 64px !important;
    padding: 11px 16px !important;
  }
}

/* Context-specific blank states sit in the parent document so Roundcube's
   global blank-page URL cannot flash mail copy in Contacts or Settings. */
.task-addressbook #layout-content .iframe-wrapper,
.task-settings #layout-content .iframe-wrapper {
  position: relative;
}

.g7-context-empty-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 32px;
  color: #64748b;
  background:
    radial-gradient(circle at 50% 42%, rgba(188,143,74,.065), transparent 25%),
    #fff;
  text-align: center;
  box-sizing: border-box;
}

.g7-context-empty-logo {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  margin-bottom: 13px;
  border: 1px solid rgba(188,143,74,.18);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(188,143,74,.08));
  box-shadow: 0 18px 45px rgba(15,23,42,.07);
}

.g7-context-empty-logo img {
  width: 62px;
  height: 44px;
  object-fit: contain;
  opacity: .86;
}

.g7-context-empty-overlay strong {
  color: #1e293b;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.01em;
}

.g7-context-empty-overlay > span:last-child {
  max-width: 320px;
  font-size: 12px;
  line-height: 1.55;
}

html.dark-mode .g7-context-empty-overlay {
  color: #93a4aa;
  background:
    radial-gradient(circle at 50% 42%, rgba(188,143,74,.065), transparent 25%),
    #1a2025;
}

html.dark-mode .g7-context-empty-logo {
  border-color: rgba(229,197,131,.2);
  background: linear-gradient(145deg, rgba(55,69,73,.95), rgba(188,143,74,.09));
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

html.dark-mode .g7-context-empty-logo img {
  filter: brightness(0) invert(1);
}

html.dark-mode .g7-context-empty-overlay strong {
  color: #e2e8e9;
}

@media screen and (max-width: 600px) {
  .g7-context-empty-overlay {
    padding: 20px;
  }

  .g7-context-empty-logo {
    width: 82px;
    height: 82px;
    border-radius: 23px;
  }

  .g7-context-empty-logo img {
    width: 54px;
  }
}

/* =========================================================
   G7 Mail — Compose workspace refinement (2026-07-30)
   ========================================================= */

/* ---------- Structure ---------- */
@media screen and (min-width: 1025px) {
  .task-mail.action-compose #layout {
    grid-template-columns:
      var(--g7-rail-width)
      minmax(560px, 1fr)
      minmax(330px, 360px) !important;
  }
}

.task-mail.action-compose #layout-content,
.task-mail.action-compose #compose-content {
  background: #f4f7fa;
}

html.dark-mode .task-mail.action-compose #layout-content,
html.dark-mode .task-mail.action-compose #compose-content {
  background: #151c20;
}

.task-mail.action-compose #compose-content > form.formcontent {
  padding: 22px 26px 28px;
  background:
    radial-gradient(circle at 12% -8%, rgba(188,143,74,.08), transparent 30%),
    #f4f7fa;
}

html.dark-mode .task-mail.action-compose #compose-content > form.formcontent {
  background:
    radial-gradient(circle at 12% -8%, rgba(188,143,74,.08), transparent 30%),
    #151c20;
}

/* ---------- Main header and action toolbar ---------- */
.task-mail.action-compose #layout-content > .header {
  min-height: 64px;
  height: 64px;
  padding: 0 20px;
  justify-content: flex-start;
  overflow: visible;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e0e6eb;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

html.dark-mode .task-mail.action-compose #layout-content > .header {
  background: #1d272b;
  border-bottom-color: #34464c;
}

.task-mail.action-compose #layout-content > .header > .header-title {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  min-width: 132px;
  margin: 0 18px 0 0 !important;
  color: #17233a;
  font-size: 16px;
  font-weight: 750;
  text-align: left;
  letter-spacing: -.01em;
}

html.dark-mode .task-mail.action-compose #layout-content > .header > .header-title {
  color: #f4f7f8;
}

.task-mail.action-compose #layout-content > .header #toolbar-menu {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 4px;
  padding: 0;
  margin-left: auto;
}

.task-mail.action-compose #layout-content > .header #toolbar-menu > li {
  height: 44px;
}

.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > button {
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  color: #526176;
  font-size: 12px;
  font-weight: 650;
}

html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a,
html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu > li > button {
  color: #c8d2d5;
}

.task-mail.action-compose #layout-content > .header #toolbar-menu > li > a:focus-visible,
.task-mail.action-compose #layout-content > .header #toolbar-menu > li > button:focus-visible {
  outline: 2px solid rgba(188,143,74,.7);
  outline-offset: 2px;
}

/* Modern monochrome toolbar symbols */
.task-mail.action-compose #layout-content > .header #toolbar-menu a.save::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.draft::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.attach::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.signature::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.responses::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.spellcheck::before {
  content: '' !important;
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.task-mail.action-compose #layout-content > .header #toolbar-menu a.save::before,
.task-mail.action-compose #layout-content > .header #toolbar-menu a.draft::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v6h8V4M8 20v-6h8v6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v6h8V4M8 20v-6h8v6'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-content > .header #toolbar-menu a.attach::before {
  mask-image: 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='m20.5 11.5-8.7 8.7a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.3 9.3a2 2 0 0 1-2.8-2.8l8.7-8.7'/%3E%3C/svg%3E");
  -webkit-mask-image: 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='m20.5 11.5-8.7 8.7a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.3 9.3a2 2 0 0 1-2.8-2.8l8.7-8.7'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-content > .header #toolbar-menu a.signature::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.7 6.3 3 3M4 20l3.7-.8L19 7.9a2.1 2.1 0 0 0-3-3L4.8 16.2zM12 20h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.7 6.3 3 3M4 20l3.7-.8L19 7.9a2.1 2.1 0 0 0-3-3L4.8 16.2zM12 20h8'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-content > .header #toolbar-menu a.responses::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2.2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2.2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-content > .header #toolbar-menu a.spellcheck::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h6M7 4v13M4.5 4h5a3.5 3.5 0 0 1 0 7h-5M13 17l3 3 5-7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h6M7 4v13M4.5 4h5a3.5 3.5 0 0 1 0 7h-5M13 17l3 3 5-7'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-height: 38px;
  color: #526176;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

html.dark-mode .task-mail.action-compose #layout-content > .header #toolbar-menu .dropbutton > a {
  color: #c8d2d5;
}

/* ---------- Compose introduction ---------- */
.task-mail.action-compose .g7-compose-intro {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 1080px;
  margin: 0 auto 14px;
  padding: 0 2px;
}

.task-mail.action-compose .g7-compose-intro-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(188,143,74,.28);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(188,143,74,.15), rgba(255,255,255,.85));
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}

html.dark-mode .task-mail.action-compose .g7-compose-intro-mark {
  background: linear-gradient(145deg, rgba(188,143,74,.2), rgba(35,47,52,.88));
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}

.task-mail.action-compose .g7-compose-intro-mark img {
  display: block;
  width: 27px;
  height: auto;
}

.task-mail.action-compose .g7-compose-intro > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.task-mail.action-compose .g7-compose-intro strong {
  color: #17233a;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.25;
}

.task-mail.action-compose .g7-compose-intro > div > span {
  color: #6b788a;
  font-size: 12px;
  line-height: 1.35;
}

html.dark-mode .task-mail.action-compose .g7-compose-intro strong {
  color: #f3f6f7;
}

html.dark-mode .task-mail.action-compose .g7-compose-intro > div > span {
  color: #9eb0b5;
}

/* ---------- Recipient and subject card ---------- */
.task-mail.action-compose .compose-headers {
  max-width: 1080px;
  margin: 0 auto 14px;
  padding: 8px 20px;
  border: 1px solid #e0e6eb;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.055);
}

html.dark-mode .task-mail.action-compose .compose-headers {
  background: #1d272b;
  border-color: #34464c;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.task-mail.action-compose .compose-headers::before {
  display: none;
}

.task-mail.action-compose .compose-headers .form-group.row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  min-height: 56px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #edf1f4;
}

.task-mail.action-compose .compose-headers .form-group.row:last-child,
.task-mail.action-compose .compose-headers #compose_subject {
  border-bottom: 0;
}

html.dark-mode .task-mail.action-compose .compose-headers .form-group.row {
  border-bottom-color: #2e3c41;
}

.task-mail.action-compose .compose-headers label.col-form-label {
  width: auto;
  max-width: none;
  padding: 0 12px 0 2px;
  color: #536176;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

html.dark-mode .task-mail.action-compose .compose-headers label.col-form-label {
  color: #b9c6ca;
}

.task-mail.action-compose .compose-headers .form-group.row > .col-10 {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.task-mail.action-compose .compose-headers .input-group {
  display: flex;
  align-items: stretch;
  min-height: 42px;
  overflow: visible;
  border: 1px solid #d7dfe6;
  border-radius: 10px;
  background: #fbfcfd;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

html.dark-mode .task-mail.action-compose .compose-headers .input-group {
  border-color: #405158;
  background: #202c30;
}

.task-mail.action-compose .compose-headers .input-group:focus-within {
  border-color: #bc8f4a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(188,143,74,.14);
}

html.dark-mode .task-mail.action-compose .compose-headers .input-group:focus-within {
  background: #202c30;
}

.task-mail.action-compose .compose-headers .input-group > .form-control,
.task-mail.action-compose .compose-headers .input-group > .recipient-input,
.task-mail.action-compose .compose-headers .input-group .recipient-input,
.task-mail.action-compose .compose-headers .recipient-input.focus,
.task-mail.action-compose .compose-headers .recipient-input:focus-within {
  min-height: 40px;
  margin: 0;
  border: 0 !important;
  border-radius: 10px 0 0 10px;
  background: transparent;
  box-shadow: none !important;
}

.task-mail.action-compose .compose-headers .recipient-input {
  padding: 4px 6px;
}

.task-mail.action-compose .compose-headers .recipient-input .input {
  min-height: 30px;
  margin: 0;
}

.task-mail.action-compose .compose-headers .recipient-input .input input {
  height: 30px;
  min-height: 30px;
  padding: 0 6px;
  color: #273449;
  font-size: 13px;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark-mode .task-mail.action-compose .compose-headers .recipient-input .input input {
  color: #edf2f3;
}

.task-mail.action-compose .compose-headers .recipient-input li.recipient {
  min-height: 28px;
  margin: 2px 4px 2px 0;
  border: 1px solid rgba(188,143,74,.28);
  border-radius: 8px;
  background: rgba(188,143,74,.12);
  color: #725326;
}

html.dark-mode .task-mail.action-compose .compose-headers .recipient-input li.recipient {
  color: #f0d49e;
  background: rgba(188,143,74,.16);
}

.task-mail.action-compose .compose-headers .input-group-append {
  display: flex;
}

.task-mail.action-compose .compose-headers .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: auto;
  min-height: 40px;
  padding: 0;
  color: #68788d;
  border: 0;
  border-left: 1px solid #dfe5ea;
  border-radius: 0;
  background: #f6f8fa;
  transition: color .15s ease, background .15s ease;
}

.task-mail.action-compose .compose-headers .input-group-append:last-child .input-group-text {
  border-radius: 0 9px 9px 0;
}

html.dark-mode .task-mail.action-compose .compose-headers .input-group-text {
  color: #a9b7bc;
  border-left-color: #405158;
  background: #27353a;
}

.task-mail.action-compose .compose-headers .input-group-text:hover,
.task-mail.action-compose .compose-headers .input-group-text:focus-visible {
  color: #8c652d;
  background: rgba(188,143,74,.14);
}

.task-mail.action-compose .compose-headers #compose-subject {
  min-height: 42px;
  padding: 8px 12px;
  color: #273449;
  border: 1px solid #d7dfe6;
  border-radius: 10px;
  background: #fbfcfd;
  font-size: 13px;
  box-shadow: none;
}

html.dark-mode .task-mail.action-compose .compose-headers #compose-subject {
  color: #edf2f3;
  border-color: #405158;
  background: #202c30;
}

.task-mail.action-compose .compose-headers #compose-subject:focus {
  border-color: #bc8f4a;
  box-shadow: 0 0 0 3px rgba(188,143,74,.14);
}

/* ---------- Message editor card ---------- */
.task-mail.action-compose #composebodycontainer {
  position: relative;
  max-width: 1080px;
  min-height: 430px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e0e6eb;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.055);
}

html.dark-mode .task-mail.action-compose #composebodycontainer {
  background: #1d272b;
  border-color: #34464c;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.task-mail.action-compose #composebodycontainer::before {
  display: none;
}

.task-mail.action-compose .g7-compose-body-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 68px 0 18px;
  color: #34435a;
  border-bottom: 1px solid #e7ecef;
  background: #fbfcfd;
}

html.dark-mode .task-mail.action-compose .g7-compose-body-heading {
  color: #d8e0e2;
  border-bottom-color: #34464c;
  background: #202c30;
}

.task-mail.action-compose .g7-compose-body-heading strong {
  font-size: 12px;
  font-weight: 720;
}

.task-mail.action-compose .g7-compose-body-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: #bc8f4a;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM7 9h10M7 13h7M7 17h5'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM7 9h10M7 13h7M7 17h5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.task-mail.action-compose #composebody {
  width: 100% !important;
  min-height: 380px;
  padding: 22px !important;
  color: #263247;
  border: 0 !important;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  box-shadow: none !important;
}

html.dark-mode .task-mail.action-compose #composebody {
  color: #edf2f3;
  background: #1d272b;
}

.task-mail.action-compose #composebody:focus {
  outline: 0;
  box-shadow: inset 3px 0 0 rgba(188,143,74,.78) !important;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 12px;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar a.mce-i-html {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  color: #64748b;
  border: 1px solid #dfe5ea;
  border-radius: 9px;
  background: #fff;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar a.mce-i-html::before {
  content: '</>' !important;
  width: auto;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

html.dark-mode .task-mail.action-compose #composebodycontainer .editor-toolbar a.mce-i-html {
  color: #b8c5c9;
  border-color: #405158;
  background: #27353a;
}

.task-mail.action-compose #composebodycontainer .editor-toolbar a.mce-i-html:hover,
.task-mail.action-compose #composebodycontainer .editor-toolbar a.mce-i-html:focus-visible {
  color: #8c652d;
  border-color: rgba(188,143,74,.55);
  background: rgba(188,143,74,.12);
}

.task-mail.action-compose #composebodycontainer .tox.tox-tinymce {
  min-height: 380px;
  border: 0;
  border-radius: 0;
}

.task-mail.action-compose #composebodycontainer .tox .tox-toolbar-overlord,
.task-mail.action-compose #composebodycontainer .tox .tox-toolbar__primary {
  background: #fbfcfd;
}

html.dark-mode .task-mail.action-compose #composebodycontainer .tox .tox-toolbar-overlord,
html.dark-mode .task-mail.action-compose #composebodycontainer .tox .tox-toolbar__primary {
  background: #202c30;
}

/* ---------- Attachments and options pane ---------- */
.task-mail.action-compose #layout-sidebar {
  background: #f8fafb;
  border-left: 1px solid #e0e6eb;
}

html.dark-mode .task-mail.action-compose #layout-sidebar {
  background: #182125;
  border-left-color: #34464c;
}

.task-mail.action-compose #layout-sidebar > .header {
  min-height: 64px;
  height: 64px;
  padding: 0 20px;
  justify-content: flex-start;
  background: #fff;
  border-bottom: 1px solid #e0e6eb;
}

html.dark-mode .task-mail.action-compose #layout-sidebar > .header {
  background: #1d272b;
  border-bottom-color: #34464c;
}

.task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  color: #34435a !important;
  font-size: 13px !important;
}

.task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes::before {
  display: none;
}

html.dark-mode .task-mail.action-compose #layout-sidebar > .header .header-title.all-sizes {
  color: #d8e0e2 !important;
}

.task-mail.action-compose #layout-sidebar > .scroller {
  padding: 16px;
}

.task-mail.action-compose #layout-sidebar .g7-compose-side-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.task-mail.action-compose .g7-compose-side-heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.task-mail.action-compose .g7-compose-side-heading strong {
  color: #34435a;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.task-mail.action-compose .g7-compose-side-copy {
  overflow: hidden;
  color: #7a8797;
  font-size: 10.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .task-mail.action-compose .g7-compose-side-heading strong {
  color: #e4eaec;
}

html.dark-mode .task-mail.action-compose .g7-compose-side-copy {
  color: #91a4aa;
}

.task-mail.action-compose .g7-compose-side-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background-color: rgba(188,143,74,.14);
  background-position: center;
  background-repeat: no-repeat;
}

.task-mail.action-compose .g7-compose-side-icon::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  margin: 8.5px;
  background: #9a7135;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.task-mail.action-compose .g7-compose-side-icon.attachment::before {
  mask-image: 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='m20.5 11.5-8.7 8.7a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.3 9.3a2 2 0 0 1-2.8-2.8l8.7-8.7'/%3E%3C/svg%3E");
  -webkit-mask-image: 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='m20.5 11.5-8.7 8.7a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.3 9.3a2 2 0 0 1-2.8-2.8l8.7-8.7'/%3E%3C/svg%3E");
}

.task-mail.action-compose .g7-compose-side-icon.options::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6'/%3E%3C/svg%3E");
}

.task-mail.action-compose #layout-sidebar .file-upload {
  min-height: 218px;
  margin: 0 0 14px;
  padding: 16px 16px 72px;
  border: 1px dashed #c9d4dc;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(188,143,74,.035), transparent 45%),
    #fff;
}

html.dark-mode .task-mail.action-compose #layout-sidebar .file-upload {
  border-color: #486068;
  background:
    linear-gradient(145deg, rgba(188,143,74,.07), transparent 45%),
    #1d272b;
}

.task-mail.action-compose #compose-attachments::before,
.task-mail.action-compose #compose-options::before {
  display: none;
}

.task-mail.action-compose #compose-attachments .upload-form {
  padding: 0;
  text-align: left;
}

.task-mail.action-compose #compose-attachments .hint {
  margin: 0 0 12px;
  color: #7a8797;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
}

html.dark-mode .task-mail.action-compose #compose-attachments .hint {
  color: #91a4aa;
}

.task-mail.action-compose #compose-attachments .btn-secondary {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #bc8f4a;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #c79a52, #aa7c39);
  box-shadow: 0 5px 14px rgba(188,143,74,.2);
  font-size: 12px;
}

.task-mail.action-compose #compose-attachments .btn-secondary:hover,
.task-mail.action-compose #compose-attachments .btn-secondary:focus-visible {
  background: linear-gradient(135deg, #b48743, #93682e);
  box-shadow: 0 7px 18px rgba(188,143,74,.27);
}

.task-mail.action-compose #layout-sidebar .file-upload.droptarget::after {
  width: 56px;
  height: 56px;
  margin: 24px auto 0;
  opacity: .34;
}

.task-mail.action-compose #compose-attachments .attachmentslist {
  margin-top: 12px;
}

.task-mail.action-compose #compose-attachments .attachmentslist li {
  min-height: 38px;
  margin: 6px 0 0;
  padding: 8px 34px 8px 10px;
  border: 1px solid #e3e9ed;
  border-radius: 9px;
  background: #f8fafb;
}

html.dark-mode .task-mail.action-compose #compose-attachments .attachmentslist li {
  border-color: #405158;
  background: #253237;
}

.task-mail.action-compose #compose-options {
  margin: 0;
  padding: 16px;
  border: 1px solid #e0e6eb;
  border-radius: 14px;
  background: #fff;
}

html.dark-mode .task-mail.action-compose #compose-options {
  border-color: #34464c;
  background: #1d272b;
}

.task-mail.action-compose #compose-options .g7-compose-side-heading {
  padding-bottom: 13px;
  border-bottom: 1px solid #edf1f4;
}

html.dark-mode .task-mail.action-compose #compose-options .g7-compose-side-heading {
  border-bottom-color: #2e3c41;
}

.task-mail.action-compose #compose-options .form-group.row,
.task-mail.action-compose #compose-options .form-check {
  min-height: 48px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f4;
}

html.dark-mode .task-mail.action-compose #compose-options .form-group.row,
html.dark-mode .task-mail.action-compose #compose-options .form-check {
  border-bottom-color: #2e3c41;
}

.task-mail.action-compose #compose-options .form-group.row:last-child {
  border-bottom: 0;
}

.task-mail.action-compose #compose-options label.col-form-label {
  color: #536176;
  font-size: 11px;
  font-weight: 650;
}

html.dark-mode .task-mail.action-compose #compose-options label.col-form-label {
  color: #bdc8cc;
}

.task-mail.action-compose #compose-options select.form-control,
.task-mail.action-compose #compose-options .custom-select {
  min-height: 36px;
  border-color: #d7dfe6;
  border-radius: 9px;
  background-color: #fbfcfd;
  font-size: 11.5px;
}

html.dark-mode .task-mail.action-compose #compose-options select.form-control,
html.dark-mode .task-mail.action-compose #compose-options .custom-select {
  border-color: #405158;
  background-color: #202c30;
}

/* ---------- Sticky send bar ---------- */
.task-mail.action-compose .formbuttons {
  min-height: 74px;
  padding: 14px 26px;
  border-top: 1px solid #e0e6eb;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -5px 18px rgba(15,23,42,.045);
}

html.dark-mode .task-mail.action-compose .formbuttons {
  border-top-color: #34464c;
  background: rgba(29,39,43,.98);
  box-shadow: 0 -5px 18px rgba(0,0,0,.12);
}

.task-mail.action-compose .formbuttons > .float-right {
  order: 1;
  float: none !important;
}

.task-mail.action-compose .formbuttons > .send {
  order: 2;
}

.task-mail.action-compose .formbuttons .send {
  min-width: 132px;
  min-height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #c79a52, #a97835) !important;
  box-shadow: 0 7px 18px rgba(188,143,74,.26);
  font-size: 13px;
}

.task-mail.action-compose .formbuttons .send::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 7px 0 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4zM22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4zM22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat;
}

.task-mail.action-compose .formbuttons .button.extwin {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #dbe2e8;
  border-radius: 11px;
  color: #5d6d82;
  background: #f7f9fb;
}

html.dark-mode .task-mail.action-compose .formbuttons .button.extwin {
  color: #bdc8cc;
  border-color: #405158;
  background: #253237;
}

/* ---------- Responsive compose workspace ---------- */
@media screen and (max-width: 1220px) and (min-width: 1025px) {
  .task-mail.action-compose #layout {
    grid-template-columns:
      var(--g7-rail-width)
      minmax(520px, 1fr)
      330px !important;
  }

  .task-mail.action-compose #layout-content > .header > .header-title {
    min-width: 112px;
    margin-right: 10px !important;
    font-size: 14px;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a {
    padding: 0 8px;
  }
}

@media screen and (max-width: 1024px) {
  .task-mail.action-compose #compose-content > form.formcontent {
    padding: 18px 20px 24px;
  }

  .task-mail.action-compose #layout-content > .header > .header-title {
    min-width: 120px;
    margin-right: 10px !important;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu > li > a {
    padding: 0 9px;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big {
    display: inline-flex !important;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big > a.options {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu > li.hidden-big > a.options .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  .task-mail.action-compose #layout-sidebar.selected,
  .task-mail.action-compose #layout-sidebar.selected.hidden {
    position: fixed;
    z-index: 130;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    display: flex !important;
    width: min(360px, calc(100vw - var(--g7-rail-width))) !important;
    height: 100% !important;
    box-shadow: -18px 0 48px rgba(15,23,42,.18);
  }

  .task-mail.action-compose #layout-sidebar.selected > .header .back-content-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin: 0 10px 0 -8px;
    border-radius: 9px;
    color: #5d6d82;
    background: #f4f7f9;
  }

  html.dark-mode .task-mail.action-compose #layout-sidebar.selected > .header .back-content-button {
    color: #bdc8cc;
    background: #27353a;
  }

  .task-mail.action-compose .g7-compose-drawer-backdrop {
    position: fixed;
    z-index: 120;
    inset: 0 0 0 var(--g7-rail-width);
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(15,23,42,.22);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  html.dark-mode .task-mail.action-compose #layout-sidebar.selected,
  html.dark-mode .task-mail.action-compose #layout-sidebar.selected.hidden {
    box-shadow: -18px 0 48px rgba(0,0,0,.34);
  }

  html.dark-mode .task-mail.action-compose .g7-compose-drawer-backdrop {
    background: rgba(0,0,0,.4);
  }
}

@media screen and (max-width: 760px) {
  .task-mail.action-compose #layout-content > .header {
    padding: 0 10px;
  }

  .task-mail.action-compose #layout-content > .header > .header-title {
    display: none !important;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .task-mail.action-compose #layout-content > .header #toolbar-menu a .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  .task-mail.action-compose #compose-content > form.formcontent {
    padding: 14px 12px 20px;
  }

  .task-mail.action-compose .g7-compose-intro {
    margin-bottom: 12px;
  }

  .task-mail.action-compose .compose-headers {
    padding: 6px 14px;
  }

  .task-mail.action-compose .compose-headers .form-group.row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .task-mail.action-compose #composebodycontainer {
    min-height: 380px;
  }

  .task-mail.action-compose #composebody {
    min-height: 330px;
    padding: 18px !important;
  }

  .task-mail.action-compose .formbuttons {
    min-height: 68px;
    padding: 12px;
  }

  .task-mail.action-compose .formbuttons .button.extwin {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .task-mail.action-compose .g7-compose-intro > div > span,
  .task-mail.action-compose .g7-compose-side-copy {
    display: none;
  }

  .task-mail.action-compose .compose-headers .form-group.row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 9px 0;
  }

  .task-mail.action-compose .compose-headers label.col-form-label {
    padding-left: 2px;
  }

  .task-mail.action-compose .formbuttons .send {
    width: 100%;
  }
}

/* =========================================================
   G7 Mail — Reader controls, menus and dialogs (2026-07-30)
   ========================================================= */

/* ---------- Reader toolbar after Elastic moves it to #toolbar-menu ---------- */
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header {
  min-height: 68px;
  height: 68px;
  padding: 0 18px;
  overflow: visible;
  justify-content: center;
  border-bottom: 1px solid #e1e7ec;
  background: rgba(255,255,255,.98);
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header {
  border-bottom-color: #344249;
  background: rgba(24,33,38,.98);
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header > .header-title {
  display: none;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: 68px;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li.spacer {
  width: 1px;
  min-width: 1px;
  height: 26px;
  margin: 0 7px;
  background: #e2e7ec;
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li.spacer {
  background: #405057;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-height: 40px;
  padding: 0 11px;
  color: #4c5b70;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color .15s ease,
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a,
html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
  color: #bdc8cd;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a:hover:not(.disabled),
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:hover:not(.disabled) {
  color: #8c652d;
  border-color: rgba(188,143,74,.24);
  background: rgba(188,143,74,.1);
  box-shadow: 0 3px 10px rgba(15,23,42,.05);
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a:hover:not(.disabled),
html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:hover:not(.disabled) {
  color: #f4dba9;
  border-color: rgba(229,197,131,.24);
  background: rgba(188,143,74,.14);
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a:focus-visible {
  outline: 2px solid rgba(188,143,74,.72);
  outline-offset: 2px;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.disabled {
  color: #a5aeb9;
  opacity: .52;
  cursor: not-allowed;
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.disabled {
  color: #718087;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a .inner {
  display: inline-block;
  overflow: visible;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-overflow: clip;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton:hover {
  border-color: rgba(188,143,74,.24);
  background: rgba(188,143,74,.1);
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton > a:not(.dropdown) {
  border: 0;
  border-radius: 9px 0 0 9px;
  box-shadow: none;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton > a.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  color: #718096;
  border: 0;
  border-left: 1px solid #e1e6eb;
  border-radius: 0 8px 8px 0;
  background: transparent;
}

html.dark-mode .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton > a.dropdown {
  color: #9babb1;
  border-left-color: #405057;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu .dropbutton > a.dropdown .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Modern line icons for every visible reader action */
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply-all::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.forward::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.delete::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.print::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.markmessage::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.more::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.prev::before,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.next::before {
  content: '' !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply-all::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5M12 17l-5-5 5-5M21 18v-2a4 4 0 0 0-4-4H7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5M12 17l-5-5 5-5M21 18v-2a4 4 0 0 0-4-4H7'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.forward::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 7 5 5-5 5M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 7 5 5-5 5M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.delete::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.print::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.markmessage::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13 13 20 4 11V4h7z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13 13 20 4 11V4h7z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.more::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.prev::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.next::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.more,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.prev,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.next {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.more .inner,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.prev .inner,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.next .inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---------- Message header links ---------- */
.task-mail:is(.action-show,.action-preview) #message-header .header-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.task-mail:is(.action-show,.action-preview) #message-header .header-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  color: #5f6f83;
  border: 1px solid #e1e7ec;
  border-radius: 8px;
  background: #f8fafb;
  font-size: 10.5px;
  font-weight: 650;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.task-mail:is(.action-show,.action-preview) #message-header .header-links > a:hover,
.task-mail:is(.action-show,.action-preview) #message-header .header-links > a:focus-visible {
  color: #8c652d;
  border-color: rgba(188,143,74,.34);
  background: rgba(188,143,74,.1);
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header .header-links > a {
  color: #5f6f83;
  border-color: #e1e7ec;
  background: #f8fafb;
}

/* ---------- G7 popup menus ---------- */
.task-mail #message-menu.popupmenu,
.task-mail #markmessage-menu.popupmenu,
.task-mail #forward-menu.popupmenu,
.task-mail #replyall-menu.popupmenu {
  min-width: 226px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #dce3e9;
  border-radius: 14px;
  background: rgba(255,255,255,.99);
  box-shadow:
    0 18px 48px rgba(15,23,42,.17),
    0 3px 10px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.dark-mode .task-mail #message-menu.popupmenu,
html.dark-mode .task-mail #markmessage-menu.popupmenu,
html.dark-mode .task-mail #forward-menu.popupmenu,
html.dark-mode .task-mail #replyall-menu.popupmenu {
  border-color: #435158;
  background: rgba(29,39,43,.99);
  box-shadow:
    0 20px 52px rgba(0,0,0,.44),
    0 3px 12px rgba(0,0,0,.24);
}

.task-mail #message-menu > ul.menu,
.task-mail #markmessage-menu > ul.menu,
.task-mail #forward-menu > ul.menu,
.task-mail #replyall-menu > ul.menu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.task-mail #message-menu > ul.menu > li,
.task-mail #markmessage-menu > ul.menu > li,
.task-mail #forward-menu > ul.menu > li,
.task-mail #replyall-menu > ul.menu > li {
  margin: 2px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-mail #message-menu > ul.menu > li > a,
.task-mail #markmessage-menu > ul.menu > li > a,
.task-mail #forward-menu > ul.menu > li > a,
.task-mail #replyall-menu > ul.menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  color: #3f4d61;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.3;
  text-decoration: none;
  transition: color .14s ease, background .14s ease;
}

html.dark-mode .task-mail #message-menu > ul.menu > li > a,
html.dark-mode .task-mail #markmessage-menu > ul.menu > li > a,
html.dark-mode .task-mail #forward-menu > ul.menu > li > a,
html.dark-mode .task-mail #replyall-menu > ul.menu > li > a {
  color: #c8d2d5;
}

.task-mail #message-menu > ul.menu > li > a:hover:not(.disabled),
.task-mail #markmessage-menu > ul.menu > li > a:hover:not(.disabled),
.task-mail #forward-menu > ul.menu > li > a:hover:not(.disabled),
.task-mail #replyall-menu > ul.menu > li > a:hover:not(.disabled),
.task-mail #message-menu > ul.menu > li > a:focus-visible,
.task-mail #markmessage-menu > ul.menu > li > a:focus-visible,
.task-mail #forward-menu > ul.menu > li > a:focus-visible,
.task-mail #replyall-menu > ul.menu > li > a:focus-visible {
  color: #765323;
  background: rgba(188,143,74,.12);
  outline: 0;
}

html.dark-mode .task-mail #message-menu > ul.menu > li > a:hover:not(.disabled),
html.dark-mode .task-mail #markmessage-menu > ul.menu > li > a:hover:not(.disabled),
html.dark-mode .task-mail #forward-menu > ul.menu > li > a:hover:not(.disabled),
html.dark-mode .task-mail #replyall-menu > ul.menu > li > a:hover:not(.disabled) {
  color: #f4dba9;
  background: rgba(188,143,74,.15);
}

.task-mail #message-menu > ul.menu > li > a::before,
.task-mail #markmessage-menu > ul.menu > li > a::before,
.task-mail #forward-menu > ul.menu > li > a::before,
.task-mail #replyall-menu > ul.menu > li > a::before {
  content: '' !important;
  display: block;
  width: 18px;
  height: 18px;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px;
  margin: 0 10px 0 0;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.task-mail #message-menu a.print::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.download::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M4 20h16'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M4 20h16'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.edit::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.7 6.3 3 3M4 20l3.7-.8L19 7.9a2.1 2.1 0 0 0-3-3L4.8 16.2zM13 20h7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.7 6.3 3 3M4 20l3.7-.8L19 7.9a2.1 2.1 0 0 0-3-3L4.8 16.2zM13 20h7'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.source::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M10 12l-2 2 2 2M15 12l2 2-2 2M13 11l-2 6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M10 12l-2 2 2 2M15 12l2 2-2 2M13 11l-2 6'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.move::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7l2 2h9v11H3zM8 13h8M13 10l3 3-3 3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7l2 2h9v11H3zM8 13h8M13 10l3 3-3 3'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.copy::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
}

.task-mail #message-menu a.extwin::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 13v7H4V5h7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 13v7H4V5h7'/%3E%3C/svg%3E");
}

.task-mail #markmessage-menu a.read::before,
.task-mail #markmessage-menu a.unread::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.task-mail #markmessage-menu a.flag::before,
.task-mail #markmessage-menu a.unflag::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 5h11l-1 4 4 3H5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 5h11l-1 4 4 3H5'/%3E%3C/svg%3E");
}

/* ---------- G7 dialogs in the mail reader ---------- */
.task-mail .ui-widget-overlay {
  background: rgba(18,28,38,.48);
  opacity: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.task-mail .ui-dialog {
  padding: 0;
  overflow: hidden;
  color: #344054;
  border: 1px solid #dce3e9 !important;
  border-radius: 17px !important;
  background: #fff;
  box-shadow:
    0 26px 72px rgba(15,23,42,.26),
    0 5px 16px rgba(15,23,42,.1);
}

html.dark-mode .task-mail .ui-dialog {
  color: #d9e2e5;
  border-color: #435158 !important;
  background: #1d272b;
  box-shadow:
    0 30px 80px rgba(0,0,0,.54),
    0 6px 18px rgba(0,0,0,.28);
}

.task-mail .ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 18px 0 20px;
  color: #233044;
  border: 0;
  border-bottom: 1px solid #e5eaee;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(188,143,74,.09), transparent 34%),
    #fbfcfd;
}

html.dark-mode .task-mail .ui-dialog .ui-dialog-titlebar {
  color: #edf2f3;
  border-bottom-color: #39494f;
  background:
    linear-gradient(90deg, rgba(188,143,74,.13), transparent 38%),
    #202c30;
}

.task-mail .ui-dialog .ui-dialog-title {
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 740;
  line-height: 1.25;
  letter-spacing: -.012em;
}

.task-mail .ui-dialog .ui-dialog-titlebar-close {
  position: relative;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  color: #607086;
  border: 1px solid #e0e6eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

html.dark-mode .task-mail .ui-dialog .ui-dialog-titlebar-close {
  color: #b9c6ca;
  border-color: #435158;
  background: #27353a;
}

.task-mail .ui-dialog .ui-dialog-titlebar-close::before {
  content: '' !important;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  background: currentColor;
  mask: 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'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: 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'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}

.task-mail .ui-dialog .ui-dialog-titlebar-close:hover,
.task-mail .ui-dialog .ui-dialog-titlebar-close:focus-visible {
  color: #8c652d;
  border-color: rgba(188,143,74,.34);
  background: rgba(188,143,74,.1);
  outline: 0;
}

.task-mail .ui-dialog .ui-dialog-content {
  padding: 0;
  color: #475569;
  border: 0;
  background: #fff;
}

html.dark-mode .task-mail .ui-dialog .ui-dialog-content {
  color: #c6d0d4;
  background: #1d272b;
}

.task-mail .ui-dialog .ui-dialog-content.popup.iframe {
  overflow: hidden;
}

.task-mail .ui-dialog .ui-dialog-content.popup.iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

html.dark-mode .task-mail .ui-dialog .ui-dialog-content.popup.iframe iframe {
  background: #1d272b;
}

.task-mail .ui-dialog .ui-dialog-buttonpane {
  min-height: 66px;
  margin: 0;
  padding: 11px 17px;
  border: 0;
  border-top: 1px solid #e5eaee;
  background: #fbfcfd;
}

html.dark-mode .task-mail .ui-dialog .ui-dialog-buttonpane {
  border-top-color: #39494f;
  background: #202c30;
}

.task-mail .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 8px;
}

.task-mail .ui-dialog .ui-dialog-buttonpane button,
.task-mail .ui-dialog .ui-dialog-buttonpane .btn-primary,
.task-mail .ui-dialog .ui-dialog-buttonpane .mainaction {
  min-width: 104px;
  min-height: 42px;
  margin: 0;
  padding: 8px 18px;
  color: #fff;
  border: 1px solid #bc8f4a;
  border-radius: 10px;
  background: linear-gradient(135deg, #c79a52, #a97835);
  box-shadow: 0 6px 16px rgba(188,143,74,.24);
  font-size: 12px;
  font-weight: 700;
}

.task-mail .ui-dialog .ui-dialog-buttonpane button:hover,
.task-mail .ui-dialog .ui-dialog-buttonpane .btn-primary:hover,
.task-mail .ui-dialog .ui-dialog-buttonpane .mainaction:hover {
  color: #fff;
  border-color: #93682e;
  background: linear-gradient(135deg, #b48743, #93682e);
}

.task-mail .ui-dialog .ui-resizable-handle {
  opacity: 0;
}

.task-mail .ui-dialog .iframe-loader {
  color: #bc8f4a;
  background: rgba(255,255,255,.82);
}

html.dark-mode .task-mail .ui-dialog .iframe-loader {
  color: #e5c583;
  background: rgba(29,39,43,.84);
}

/* The headers dialog content is a same-origin iframe using this skin. */
html.iframe body.task-mail.action-headers {
  min-height: 100%;
  padding: 0;
  color: #536176;
  background: #f8fafb;
  overflow: auto;
}

html.iframe body.task-mail.action-headers .frame-content {
  min-height: 100%;
  padding: 20px 22px 28px;
  color: #536176;
  background:
    linear-gradient(180deg, rgba(188,143,74,.045), transparent 120px),
    #f8fafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.72;
}

html.iframe body.task-mail.action-headers .frame-content .bold {
  color: #8c652d;
  font-weight: 760;
}

html.dark-mode.iframe body.task-mail.action-headers {
  color: #bdc9cd;
  background: #1d272b;
}

html.dark-mode.iframe body.task-mail.action-headers .frame-content {
  color: #bdc9cd;
  background:
    linear-gradient(180deg, rgba(188,143,74,.07), transparent 120px),
    #1d272b;
}

html.dark-mode.iframe body.task-mail.action-headers .frame-content .bold {
  color: #e5c583;
}

/* Neutralize Elastic's label and focus constraints inside the new controls. */
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a .inner {
  max-width: none !important;
  white-space: nowrap;
}

.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.reply-all,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.forward,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.delete,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.print,
.task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.markmessage {
  width: auto !important;
  max-width: none !important;
}

.task-mail .ui-dialog .ui-dialog-buttonpane button:focus,
.task-mail .ui-dialog .ui-dialog-buttonpane button:focus-visible {
  outline: 2px solid rgba(188,143,74,.48);
  outline-offset: 2px;
  box-shadow: none !important;
}

@media screen and (max-width: 1100px) {
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a,
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    padding-right: 8px;
    padding-left: 8px;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.print .inner,
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.markmessage .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.print,
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a.markmessage {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }
}

@media screen and (max-width: 760px) {
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header {
    padding: 0 8px;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu::-webkit-scrollbar {
    display: none;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu a .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }

  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > a,
  .task-mail:is(.action-none,.action-show,.action-preview) #layout-content > .header #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .task-mail .ui-dialog {
    width: min(94vw, 640px) !important;
    max-width: 94vw;
  }
}

/* =========================================================
   Inbox + reader refinement — corporate clarity pass
   Keeps every native Roundcube command and interaction.
   ========================================================= */

/* Inbox header actions */
.task-mail #messagelist-header > #toolbar-list-menu,
.task-mail #messagelist-header > a.g7-list-delete,
.task-mail #messagelist-header > a.refresh {
  top: 23px;
}

.task-mail #toolbar-list-menu a.select,
.task-mail #toolbar-list-menu a.options,
.task-mail #messagelist-header > a.g7-list-delete,
.task-mail #messagelist-header > a.refresh {
  border: 1px solid transparent;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.task-mail #toolbar-list-menu a.select:hover,
.task-mail #toolbar-list-menu a.options:hover,
.task-mail #messagelist-header > a.g7-list-delete:hover:not(.disabled),
.task-mail #messagelist-header > a.refresh:hover {
  color: #8c652d;
  border-color: rgba(188,143,74,.2);
  background: rgba(188,143,74,.09);
}

.task-mail #toolbar-list-menu a.select:focus-visible,
.task-mail #toolbar-list-menu a.options:focus-visible,
.task-mail #messagelist-header > a.g7-list-delete:focus-visible,
.task-mail #messagelist-header > a.refresh:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(188,143,74,.18);
}

/* Search */
.task-mail #layout-list > .searchbar {
  height: 44px;
  min-height: 44px;
  margin: 13px 15px 12px;
  border-color: #dfe5ec;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(15,23,42,.035);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.task-mail #layout-list > .searchbar:focus-within {
  border-color: rgba(188,143,74,.72);
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(188,143,74,.13),
    0 8px 18px rgba(15,23,42,.06);
}

.task-mail #layout-list > .searchbar #mailsearchform {
  height: 42px;
  padding-right: 6px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 500;
}

.task-mail #layout-list > .searchbar #mailsearchform::placeholder {
  color: #8894a5;
  opacity: 1;
}

/* Message rows */
.task-mail #messagelist tr {
  min-height: 86px;
}

.task-mail #messagelist td {
  padding-top: 14px;
  padding-bottom: 13px;
}

.task-mail #messagelist td.subject {
  min-height: 80px;
  padding-right: 12px;
  padding-left: 62px;
}

.task-mail .g7-sender-avatar {
  top: 17px;
  left: 13px;
  width: 36px;
  height: 36px;
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 3px 10px rgba(15,23,42,.14);
  font-size: 10px;
}

.task-mail #messagelist td.subject span.fromto {
  padding-right: 8px;
  color: #202a39;
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1.45;
  letter-spacing: -.005em;
}

.task-mail #messagelist td.subject span.date,
.task-mail #messagelist td.subject span.size {
  color: #7f8b9d;
  font-size: 9.5px;
  font-weight: 550;
  line-height: 1.45;
  transition: opacity 120ms ease;
}

.task-mail #messagelist td.subject span.subject {
  margin-top: 5px;
  color: #526075;
  font-size: 11px;
  line-height: 1.45;
}

.task-mail #messagelist tr:hover,
.task-mail #messagelist tr:hover td {
  background: #f7f9fc;
}

.task-mail #messagelist tr.selected,
.task-mail #messagelist tr.selected td {
  background: linear-gradient(90deg, #fff7e8 0, #fffbf3 100%);
}

.task-mail #messagelist tr.unread {
  background: linear-gradient(90deg, #fff7e7 0, #fffcf6 52%, #fff 100%);
}

.task-mail #messagelist tr.unread td.subject span.fromto {
  color: #131b28;
}

.task-mail #messagelist tr.unread td.subject span.subject {
  color: #344054;
}

.task-mail #messagelist-content .listing-hover-menu {
  top: 50%;
  right: 10px;
  height: 36px;
  gap: 3px;
  padding: 4px;
  transform: translateY(-50%);
  border-color: #dce3eb;
  border-radius: 10px;
  box-shadow: 0 9px 24px rgba(15,23,42,.14);
}

.task-mail #messagelist-content .listing-hover-menu a.button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.task-mail #messagelist-content .listing-hover-menu a.button::before {
  width: 17px;
  height: 17px;
}

.task-mail #messagelist tr:hover td.subject span.date {
  opacity: 0;
}

/* Reader toolbar */
.task-mail.action-none #layout-content > .header,
.task-mail.action-show #layout-content > .header {
  height: 64px;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid #e3e8ef;
  background: rgba(255,255,255,.97);
}

.task-mail #mailtoolbar {
  gap: 6px;
}

.task-mail #mailtoolbar > a,
.task-mail #mailtoolbar > span > a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #4c5b70;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}

.task-mail #mailtoolbar > a:hover:not(.disabled),
.task-mail #mailtoolbar > span > a:hover:not(.disabled) {
  color: #8c652d;
  border-color: rgba(188,143,74,.2);
  background: rgba(188,143,74,.09);
}

.task-mail #mailtoolbar a.disabled {
  color: #a7b0bd;
  opacity: .58;
}

.task-mail #mailtoolbar a .inner {
  color: inherit;
  font-size: 10.5px;
  font-weight: 650;
}

.task-mail #mailtoolbar .dropbutton {
  display: inline-flex;
  align-items: center;
}

.task-mail #mailtoolbar .dropbutton > a:not(.dropdown) {
  border-radius: 9px 4px 4px 9px;
}

.task-mail #mailtoolbar .dropbutton > a.dropdown {
  width: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: 4px 9px 9px 4px;
}

.task-mail #mailtoolbar a.reply::before,
.task-mail #mailtoolbar a.reply-all::before,
.task-mail #mailtoolbar a.forward::before,
.task-mail #mailtoolbar a.delete::before,
.task-mail #mailtoolbar a.markmessage::before,
.task-mail #mailtoolbar a.print::before,
.task-mail #mailtoolbar a.prev::before,
.task-mail #mailtoolbar a.next::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: 0 0 18px;
  float: none !important;
  margin: 0 !important;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.task-mail #mailtoolbar a.reply::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.reply-all::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5'/%3E%3Cpath d='m12 17-5-5 5-5'/%3E%3Cpath d='M21 18v-2a4 4 0 0 0-4-4H7'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.forward::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.delete::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.markmessage::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.print::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='7'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.prev::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}

.task-mail #mailtoolbar a.next::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* Reader content */
.task-mail:is(.action-show,.action-preview) #message-header,
.task-mail:is(.action-show,.action-preview) #message-content {
  max-width: 960px;
}

.task-mail:is(.action-show,.action-preview) #message-header {
  padding-top: 30px;
}

.task-mail:is(.action-show,.action-preview) #message-header > .subject {
  margin-bottom: 22px;
  color: #172033;
  font-size: clamp(22px,1.7vw,26px);
  font-weight: 720;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.task-mail:is(.action-show,.action-preview) #message-header > .header {
  padding-bottom: 20px;
  border-bottom-color: #e7ebf0;
}

.task-mail:is(.action-show,.action-preview) #message-header .contactphoto {
  width: 46px;
  height: 46px;
  border-color: rgba(188,143,74,.24);
  background: #f5f7fa;
  box-shadow: 0 3px 12px rgba(15,23,42,.08);
}

.task-mail:is(.action-show,.action-preview) #message-header .header-summary,
.task-mail:is(.action-show,.action-preview) #message-header .header-headers {
  color: #48576c;
  font-size: 12px;
  line-height: 1.55;
}

.task-mail:is(.action-show,.action-preview) #message-content {
  padding-top: 26px;
}

.task-mail:is(.action-show,.action-preview) #message-content .rightcol {
  color: #344054;
  font-size: 14px;
  line-height: 1.72;
}

.task-mail:is(.action-show,.action-preview) #message-content .rightcol a {
  color: #8c652d;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.task-mail:is(.action-show,.action-preview) .attachmentslist li {
  min-height: 46px;
  padding: 8px 12px;
  border-color: #dde4ec;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(15,23,42,.04);
}

/* Dark mode parity */
html.dark-mode .task-mail #layout-list > .searchbar {
  border-color: #344249;
  background: rgba(30,39,43,.96);
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}

html.dark-mode .task-mail #layout-list,
html.dark-mode .task-mail #messagelist-content,
html.dark-mode .task-mail #messagelist,
html.dark-mode .task-mail #layout-list > .footer {
  color: #c6d0d5;
  border-color: #303c42;
  background: #182126;
}

html.dark-mode body.task-mail #layout-list > #messagelist-header {
  color: #e7edef;
  border-bottom-color: #303c42;
  background: #1b2429;
}

html.dark-mode .task-mail #messagelist-header > .header-title {
  color: #e5c583;
}

html.dark-mode .task-mail #toolbar-list-menu a.select,
html.dark-mode .task-mail #toolbar-list-menu a.options,
html.dark-mode .task-mail #messagelist-header > a.g7-list-delete,
html.dark-mode .task-mail #messagelist-header > a.refresh {
  color: #aebbc1;
}

html.dark-mode .task-mail #toolbar-list-menu a.select:hover,
html.dark-mode .task-mail #toolbar-list-menu a.options:hover,
html.dark-mode .task-mail #messagelist-header > a.g7-list-delete:hover:not(.disabled),
html.dark-mode .task-mail #messagelist-header > a.refresh:hover {
  color: #f6e2ba;
  border-color: rgba(229,197,131,.2);
  background: rgba(188,143,74,.13);
}

html.dark-mode .task-mail #messagelist tr,
html.dark-mode .task-mail #messagelist tr td {
  border-bottom-color: #2c373d;
  background: #182126;
}

html.dark-mode .task-mail #layout-list > .searchbar:focus-within {
  border-color: rgba(229,197,131,.64);
  background: #222b2f;
  box-shadow:
    0 0 0 3px rgba(188,143,74,.14),
    0 8px 20px rgba(0,0,0,.22);
}

html.dark-mode .task-mail #layout-list > .searchbar #mailsearchform {
  color: #e1e8eb;
}

html.dark-mode .task-mail #layout-list > .searchbar #mailsearchform::placeholder {
  color: #8fa0aa;
}

html.dark-mode .task-mail #messagelist td.subject span.fromto {
  color: #d9e2e6;
}

html.dark-mode .task-mail #messagelist td.subject span.subject {
  color: #aebcc3;
}

html.dark-mode .task-mail #messagelist td.subject span.date,
html.dark-mode .task-mail #messagelist td.subject span.size {
  color: #93a2aa;
}

html.dark-mode .task-mail #messagelist tr:hover,
html.dark-mode .task-mail #messagelist tr:hover td {
  background: #232e32;
}

html.dark-mode .task-mail #messagelist tr.selected,
html.dark-mode .task-mail #messagelist tr.selected td {
  background: linear-gradient(90deg, rgba(188,143,74,.2), rgba(188,143,74,.08));
}

html.dark-mode .task-mail #messagelist tr.unread,
html.dark-mode .task-mail #messagelist tr.unread td {
  background: linear-gradient(90deg, rgba(188,143,74,.18), rgba(188,143,74,.045));
}

html.dark-mode .task-mail #messagelist tr.unread td.subject span.fromto,
html.dark-mode .task-mail #messagelist tr.unread td.subject span.subject {
  color: #eef2f3;
}

html.dark-mode .task-mail #messagelist-content .listing-hover-menu {
  border-color: #435159;
  background: rgba(31,40,44,.98);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}

html.dark-mode .task-mail #messagelist-content .listing-hover-menu a.button {
  color: #b7c2c7;
}

html.dark-mode .task-mail #messagelist-content .listing-hover-menu a.button:hover {
  color: #f6e2ba;
  background: rgba(188,143,74,.15);
}

html.dark-mode .task-mail.action-none #layout-content > .header,
html.dark-mode .task-mail.action-show #layout-content > .header {
  border-bottom-color: #303c42;
  background: rgba(25,32,36,.98);
}

html.dark-mode .task-mail #mailtoolbar > a,
html.dark-mode .task-mail #mailtoolbar > span > a {
  color: #bcc7cc;
}

html.dark-mode .task-mail #mailtoolbar > a:hover:not(.disabled),
html.dark-mode .task-mail #mailtoolbar > span > a:hover:not(.disabled) {
  color: #f6e2ba;
  border-color: rgba(229,197,131,.2);
  background: rgba(188,143,74,.13);
}

html.dark-mode .task-mail #mailtoolbar a.disabled {
  color: #718087;
  opacity: .62;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #layout-content,
html.dark-mode .task-mail:is(.action-show,.action-preview) #layout-content > .content,
html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header,
html.dark-mode .task-mail:is(.action-show,.action-preview) #message-content {
  color: #344054;
  background: #fff;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header > .subject {
  color: #172033;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header > .header {
  border-bottom-color: #e7ebf0;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header .contactphoto {
  border-color: rgba(188,143,74,.24);
  background: #f5f7fa;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header .header-summary,
html.dark-mode .task-mail:is(.action-show,.action-preview) #message-header .header-headers {
  color: #48576c;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-content .rightcol {
  color: #344054;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) #message-content .rightcol a {
  color: #8c652d;
}

html.dark-mode .task-mail:is(.action-show,.action-preview) .attachmentslist li {
  border-color: #dde4ec;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,.04);
}

@media screen and (max-width: 1024px) {
  .task-mail #messagelist-header > #toolbar-list-menu,
  .task-mail #messagelist-header > a.g7-list-delete,
  .task-mail #messagelist-header > a.refresh {
    top: 7px;
  }

  .task-mail #messagelist-header > .header-title {
    right: 14px;
    bottom: 10px;
    left: 21px;
    font-size: 18px;
  }

  .task-mail #mailtoolbar {
    gap: 3px;
  }

  .task-mail #mailtoolbar > a,
  .task-mail #mailtoolbar > span > a {
    min-height: 38px;
    padding: 0 8px;
  }

  .task-mail #mailtoolbar a .inner {
    display: none;
  }

  .task-mail #messagelist td.subject span.fromto {
    font-size: 11px;
  }

  .task-mail #messagelist td.subject span.subject {
    font-size: 10.5px;
  }
}

@media screen and (max-width: 600px) {
  .task-mail #messagelist td.subject {
    padding-left: 57px;
  }

  .task-mail .g7-sender-avatar {
    left: 11px;
    width: 34px;
    height: 34px;
  }

  .task-mail:is(.action-show,.action-preview) #message-header {
    padding-top: 22px;
  }

  .task-mail:is(.action-show,.action-preview) #message-header > .subject {
    font-size: 21px;
  }

  .task-mail:is(.action-show,.action-preview) #message-content .rightcol {
    font-size: 13.5px;
  }
}

/* Keep message preview scrollable in every mailbox. */
.task-mail #layout-content .iframe-wrapper { overflow-y: auto !important; overscroll-behavior: contain; }
.task-mail #layout-content #messagecontframe { min-height: 100%; }

/* Inbox previews: shrink flex region and preserve iframe scrolling. */
.task-mail #layout-content { min-height: 0; }
.task-mail #layout-content .iframe-wrapper { min-height: 0 !important; height: 0; overflow: auto !important; }
.task-mail #layout-content #messagecontframe { min-height: 0 !important; height: 100% !important; }

/* Desktop reader: grid columns must remain constrained to the viewport. */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .task-mail.action-none #layout { grid-template-rows: minmax(0, 1fr); }
  .task-mail.action-none #layout-content { min-height: 0 !important; height: auto !important; overflow: hidden !important; align-self: stretch; }
  .task-mail.action-none #layout-content .iframe-wrapper { min-height: 0 !important; }
}

/* Full-width desktop reader: constrain the grid row to the viewport. */
@media screen and (min-width: 1201px) {
  .task-mail.action-none #layout { grid-template-rows: minmax(0, 1fr); }
  .task-mail.action-none #layout-content { min-height: 0 !important; height: auto !important; overflow: hidden !important; align-self: stretch; }
  .task-mail.action-none #layout-content .iframe-wrapper { min-height: 0 !important; }
}