/* Desktop presentation only. Elastic owns pane visibility, resizers and menus.
 * The task rail + folder sidebar form the left navigation; DOM order is intact.
 * No selectors target the contents of received messages. */
@media screen and (min-width: 769px) {
  body.task-mail { font-family: var(--ay-font); color: var(--ay-text); }
  body.task-mail #layout-menu { background: var(--ay-background); border-right: 1px solid var(--ay-border); }
  body.task-mail #layout-menu .popover-header { background: var(--ay-background) !important; }
  body.task-mail #layout-menu #logo { width: 38px; height: 38px; object-fit: contain; padding: 0; margin: 11px auto; }
  body.task-mail #taskmenu a { color: var(--ay-muted); border-radius: 10px; margin: 6px; width: auto; }
  body.task-mail #taskmenu a:hover { color: var(--ay-primary); background: #e8efef; }
  body.task-mail #taskmenu a.selected { color: var(--ay-primary); background: #e0eeeb; }
  body.task-mail #taskmenu a.compose { color: #fff; background: var(--ay-primary); box-shadow: 0 2px 4px rgb(21 45 53 / 8%); }
  body.task-mail #taskmenu a.compose:hover { background: var(--ay-hover); }
  body.task-mail #layout-sidebar { background: var(--ay-background); border-color: var(--ay-border); }
  body.task-mail #layout-sidebar > .header { background: transparent; border-color: var(--ay-border); }
  body.task-mail #layout-sidebar .username { color: var(--ay-muted); font-size: 12px; }
  body.task-mail #folderlist-content { padding: 12px 8px; }
  body.task-mail #mailboxlist li { border-bottom: 0; }
  body.task-mail #mailboxlist li > a { min-height: 40px; border-radius: 8px; color: var(--ay-muted); font-size: 13px; }
  body.task-mail #mailboxlist li > a:hover { background: #e8efef; color: var(--ay-primary); }
  body.task-mail #mailboxlist li.selected > a { background: #dfeeea; color: var(--ay-primary); font-weight: 650; }
  body.task-mail #mailboxlist li.unread > a { font-weight: 650; color: var(--ay-text); }
  body.task-mail #mailboxlist li.selected > a .unreadcount { color: var(--ay-primary); background: #c9e1d9; }
  body.task-mail #mailboxlist .unreadcount { background: #e4e9ef; color: var(--ay-muted); border-radius: 6px; padding: 0 6px; font-size: 11px; }
  body.task-mail #mailboxlist li ul { border-top: 0; }
  body.task-mail #mailboxlist li.droptarget > a { background: #c9e1d9; outline: 2px dashed var(--ay-focus); }
  body.task-mail #layout-list { border-color: var(--ay-border); background: var(--ay-surface); }
  body.task-mail #layout-list > .header { background: var(--ay-surface); border-color: var(--ay-border); }
  body.task-mail #layout-list > .header .header-title { color: var(--ay-text); font-size: 16px; font-weight: 650; }
  body.task-mail #layout-list .searchbar { margin: 10px 12px; width: auto; border: 1px solid var(--ay-border); border-radius: 10px; background: var(--ay-background); }
  body.task-mail #layout-list .searchbar input { background: transparent; color: var(--ay-text); font-size: 14px; }
  body.task-mail #layout-list .searchbar:focus-within { outline: 2px solid var(--ay-focus); outline-offset: 2px; }
  body.task-mail #layout-list .searchbar a { color: var(--ay-muted); }
  body.task-mail #layout-sidebar > .footer,
  body.task-mail #layout-list > .footer { background: var(--ay-background); border-color: var(--ay-border); color: var(--ay-muted); }
  body.task-mail #layout .header a.button { color: var(--ay-muted); }
  body.task-mail #layout .header a.button:hover { color: var(--ay-primary); }
  body.task-mail #taskmenu a:focus-visible,
  body.task-mail #mailboxlist a:focus-visible { outline: 2px solid var(--ay-focus); outline-offset: -2px; }
}
@media screen and (min-width: 1201px) {
  body.task-mail:not(.action-compose) #layout-menu { width: 68px; flex-shrink: 0; }
  body.task-mail:not(.action-compose) #layout-sidebar { flex: 0 1 188px; min-width: 188px; max-width: 260px; }
  body.task-mail:not(.action-compose) #layout-list { flex: 0 1 400px; min-width: 360px; max-width: 450px; }
  body.task-mail:not(.action-compose) #layout-content { flex: 1 1 0; min-width: 0; }
  /* Keep the native resizers usable; their inline width supersedes the basis. */
  body.task-mail:not(.action-compose) #layout-sidebar[style*="width"],
  body.task-mail:not(.action-compose) #layout-list[style*="width"] { flex-basis: auto; }
  body.task-mail #messagelist-header > .header-title { display: block !important; flex: 1; min-width: 0; }
}
/* Native list cells and span structure: keep flags, threads and selection intact. */
@media screen and (min-width: 769px) {
  body.task-mail #messagelist tbody td { border-bottom-color: #e9eef2; padding-top: 10px; padding-bottom: 10px; color: var(--ay-text); }
  body.task-mail #messagelist td.subject { min-width: 0; padding-right: 8px; gap: 0 4px; }
  body.task-mail #messagelist td.subject span.fromto { order: 1; padding-left: 0; font-size: 13px; color: var(--ay-text); min-width: 0; }
  body.task-mail #messagelist td.subject span.date { order: 2; font-size: 11px; color: var(--ay-muted); white-space: nowrap; }
  body.task-mail #messagelist td.subject span.subject { order: 3; font-size: 13px; line-height: 1.7; }
  body.task-mail #messagelist td.subject span.subject a { color: var(--ay-muted); }
  body.task-mail #messagelist td.subject span.size,
  body.task-mail #messagelist td.subject span.folder { order: 4; font-size: 11px; color: var(--ay-muted); }
  body.task-mail #messagelist tr.unread td { background: #f5faf9; }
  body.task-mail #messagelist tr.unread span.fromto,
  body.task-mail #messagelist tr.unread span.subject a { font-weight: 650; color: var(--ay-text); }
  body.task-mail #messagelist tr:hover td { background: #eff4f6; }
  body.task-mail #messagelist tr.selected td { background: #e0eeeb; color: var(--ay-text); }
  body.task-mail #messagelist tr.selected:hover td { background: #d6e7e2; }
  body.task-mail #messagelist.focus tr.focused td:first-child,
  body.task-mail #messagelist.focus:not(.withselection) tr.focused td.selection + td { border-left: 2px solid var(--ay-focus); }
  body.task-mail #messagelist tr.droptarget td { background: #c9e1d9; }
  body.task-mail #messagelist tr.flagged span.flagged { color: var(--ay-warning); }
  body.task-mail #messagelist tr.deleted td,
  body.task-mail #messagelist tr.deleted td.subject span.subject a { color: #697780; }
  body.task-mail #messagelist td.flags { padding-right: 8px; }
  body.task-mail #messagelist span.msgicon.status.unread::before { color: var(--ay-secondary); }
  body.task-mail #messagelist input[type="checkbox"] { accent-color: var(--ay-primary); }
  body.task-mail #messagelist-content .listing-info { color: var(--ay-muted); font-weight: 500; font-size: 14px; line-height: 1.6; }
  body.task-mail .pagenav .form-control { border-radius: 6px; border-color: var(--ay-border); color: var(--ay-muted); }
}
/* Message chrome only, including the native preview iframe at narrow widths.
 * Received HTML below #messagebody is never restyled or rewritten. */
body.task-mail #message-header { color: var(--ay-text); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ay-border); }
body.task-mail #message-header > .subject { font-family: var(--ay-font); font-weight: 650; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; letter-spacing: -.35px; overflow-wrap: anywhere; }
body.task-mail #message-header .header-content { min-width: 0; font-family: var(--ay-font); }
body.task-mail #message-header .header-summary { color: var(--ay-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
body.task-mail #message-header .header-summary a { color: var(--ay-primary); }
body.task-mail #message-header .header-headers { overflow-wrap: anywhere; }
body.task-mail #message-header .header-headers td { max-width: 100%; }
body.task-mail #message-header .header-links a { color: var(--ay-secondary); font-size: 12px; }
body.task-mail #message-header img.contactphoto { background: #e0eeeb; border: 1px solid var(--ay-border); }
body.task-mail #message-content { min-width: 0; }
body.task-mail #message-content > .rightcol { min-width: 0; }
body.task-mail #messagebody { max-width: 100%; overflow-x: auto; }
body.task-mail #attachment-list:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; padding: 0; }
body.task-mail #attachment-list li { background: var(--ay-background); border: 1px solid var(--ay-border); border-radius: 9px; padding: 6px 10px; max-width: 100%; min-width: 0; }
body.task-mail #attachment-list li a { color: var(--ay-primary); }
body.task-mail #attachment-list .attachment-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.task-mail #attachment-list .attachment-size { color: var(--ay-muted); }
@media screen and (min-width: 769px) {
  body.task-mail #layout-content > .header { background: var(--ay-surface); border-color: var(--ay-border); }
  body.task-mail #layout-content > .content.frame-content { padding: 24px; }
}
@media screen and (min-width: 769px) {
  body.task-mail .toolbar a:not(.disabled) { color: var(--ay-muted); }
  body.task-mail .toolbar a:hover:not(.disabled) { color: var(--ay-primary); background: #edf4f2; border-radius: 7px; }
  body.task-mail .toolbar a.delete:not(.disabled) { color: var(--ay-error); }
  body.task-mail .toolbar a.disabled { opacity: .45; }
  body.task-mail .toolbar a:focus-visible,
  body.task-mail .popupmenu a:focus-visible { outline: 2px solid var(--ay-focus); outline-offset: -2px; border-radius: 6px; }
  body.task-mail .popover { border: 1px solid var(--ay-border); border-radius: var(--ay-radius); box-shadow: var(--ay-shadow); }
  body.task-mail .popover .popover-body { border-radius: var(--ay-radius); }
  body.task-mail .popover .listing a { color: var(--ay-text); min-height: 36px; }
  body.task-mail .popover .listing li:hover > a { background: #edf4f2; color: var(--ay-primary); }
  body.task-mail #messagestack .alert { border-radius: var(--ay-radius); box-shadow: var(--ay-shadow); overflow-wrap: anywhere; }
  body.task-mail #messagestack .alert-danger { color: var(--ay-error); background: #fff3f4; border-color: #f0c6cb; }
  body.task-mail #messagestack .alert-success { color: var(--ay-success); background: #eff8f2; border-color: #cce5d4; }
  body.task-mail #messagestack .alert-warning { color: var(--ay-warning); background: #fff8e8; border-color: #ebddb6; }
  body.task-mail .btn-primary { background: var(--ay-primary); border-color: var(--ay-primary); border-radius: 8px; }
  body.task-mail .btn-primary:hover { background: var(--ay-hover); border-color: var(--ay-hover); }
  body.task-mail .btn-secondary { border-radius: 8px; }
  body.task-mail .ui-dialog { border-color: var(--ay-border); border-radius: var(--ay-radius); box-shadow: var(--ay-shadow); }
  body.task-mail .ui-dialog .ui-dialog-titlebar { background: var(--ay-background); color: var(--ay-text); border-color: var(--ay-border); }
}
@media screen and (min-width: 1201px) {
  body.task-mail #layout-sidebar > .header { position: relative; height: 100px; flex-shrink: 0; padding-top: 44px; }
  body.task-mail #layout-sidebar > .header::before { content: ""; position: absolute; top: 16px; left: 12px; width: 155px; height: 30px; background: url("../assets/logo.svg") left center / contain no-repeat; }
  body.task-mail #layout-sidebar > .header .username { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media screen and (min-width: 769px) {
  body.task-mail #taskmenu .special-buttons { background: var(--ay-background); }
}
@media screen and (min-width: 1201px) {
  body.task-mail:not(.action-compose) #layout-menu { width: 72px; }
  body.task-mail #taskmenu a .inner { font-size: 10px; width: auto; }
  body.task-mail #messagelist-header > .header-title { margin: 0 !important; padding: 0 8px !important; text-align: left; }
  body.task-mail #messagelist-header .toolbar a { width: 32px; padding: 0; }
  body.task-mail #messagelist-header .toolbar .inner { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  body.task-mail #messagelist-header > .header-title { line-height: 20px; padding-top: 10px; }
  body.task-mail #messagelist-header > .header-title::before { content: "AYTTECH Mail"; display: block; line-height: 14px; font-size: 10px; color: var(--ay-muted); font-weight: 500; }
}
/* Elastic overlays the flag cell in touch mode: its background must stay clear
 * or an unread/selected row background would obscure the date underneath. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html.touch body.task-mail #messagelist td.flags { background-color: transparent; }
}