/* MarkWeb mail workspace: scoped to application pages, not authentication. */
body:not(.task-login){font-size:14px}
html.dark-mode body:not(.task-login){--mw-base:#181b20;--mw-panel:#20242a;--mw-raised:#282d34;--mw-line:#343a43;--mw-text:#e8ebf0;--mw-muted:#a4adba;background:var(--mw-base);color:var(--mw-text)}
html.dark-mode body:not(.task-login) #layout-menu{background:#181b20;border-color:#30353d}
html.dark-mode body:not(.task-login) #layout-sidebar{background:#20242a;border-color:#30353d}
html.dark-mode body:not(.task-login) #layout-list{background:#24282f;border-color:#343a43}
html.dark-mode body:not(.task-login) #layout-content{background:#1b1e23}
html.dark-mode body:not(.task-login) .header,html.dark-mode body:not(.task-login) .footer{background:transparent!important;border-color:#343a43!important}
@media(min-width:1200px){
body:not(.task-login) #layout-menu{width:176px!important;min-width:176px!important;flex:0 0 176px!important}
body.task-mail:not(.action-compose):not(.action-preview):not(.action-show) #layout-sidebar{width:230px!important;min-width:200px!important;max-width:260px!important;flex:0 0 230px!important}
body.task-mail:not(.action-compose):not(.action-preview):not(.action-show) #layout-list{width:380px!important;min-width:320px!important;max-width:460px!important;flex:0 0 380px!important}
}
@media(min-width:1025px){
#taskmenu a{font-size:14px;min-height:46px;margin-top:4px;margin-bottom:4px;border-radius:8px}
#taskmenu a .inner{font-size:13px!important;font-weight:500}
#taskmenu a:not(.compose):not(.logout){margin-left:10px;margin-right:10px;padding-left:12px!important}
html.dark-mode #taskmenu a.selected:not(.compose){background:#2c323b;color:#fff;box-shadow:inset 3px 0 #6ca8ff}
#taskmenu a.compose{margin-bottom:24px;min-height:44px}
}
#layout-sidebar>.header{font-size:13px;font-weight:600;padding:0 18px}
#mailboxlist{padding:16px 10px}
#mailboxlist li{margin-bottom:4px;border:0}
#mailboxlist li a{min-height:40px;line-height:40px;padding-left:12px;border-radius:7px;font-size:14px}
html.dark-mode #mailboxlist li.selected>a{background:#303b4b;color:#eef4ff;box-shadow:inset 3px 0 #6aa6ff}
html.dark-mode #mailboxlist li a:hover{background:#2b3139}
#mailboxlist .unreadcount{border-radius:10px;font-size:11px;padding:1px 7px}
#layout-list .searchbar{margin:12px 14px;border:1px solid #3b424d;border-radius:8px;min-height:40px;overflow:hidden}
html.dark-mode #layout-list .searchbar{background:#1b1f25}
#messagelist{border-collapse:separate;border-spacing:0}
#messagelist tr.message>td{padding-top:16px!important;padding-bottom:16px!important;border-bottom:1px solid #353b44!important}
#messagelist td.subject{padding-left:18px!important;padding-right:16px!important}
#messagelist .fromto{font-size:14px!important;font-weight:600;color:#e4e8ee!important;margin-bottom:7px;max-width:calc(100% - 85px)}
#messagelist .date{font-size:11px!important;color:#a4adba!important}
#messagelist td.subject>span.subject{display:block;margin-top:6px;font-size:13px;line-height:21px}
#messagelist td.subject>span.subject a{color:#b8c2cf}
#messagelist tr.unread .fromto,#messagelist tr.unread td.subject>span.subject a{color:#fff!important;font-weight:650}
html.dark-mode #messagelist tr.message:hover>td{background:#2c323b!important}
html.dark-mode #messagelist tr.message.selected>td{background:#303c4d!important}
html.dark-mode #messagelist tr.message.selected td.subject{box-shadow:inset 3px 0 #6faaff}
#layout-list>.header,#layout-content>.header{min-height:60px}
@media(min-width:1025px){
#layout-content>.header .toolbar a,#layout-content>.header .toolbar-menu a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 10px;font-size:12px}
#layout-content>.header .toolbar a:before{font-size:16px;margin:0;line-height:20px}
}
/* Reading pane: clear subject, sender block, and comfortable message typography. */
body.action-preview #layout-content,body.action-show #layout-content{background:#1b1e23!important}
body.action-preview .frame-content,body.action-show .frame-content{padding:32px!important;max-width:1060px;margin:0 auto}
body.action-preview #message-header,body.action-show #message-header{padding:0 0 24px}
#message-header h2.subject{font-size:25px!important;font-weight:650;letter-spacing:-.4px;line-height:1.4;padding:0 0 24px!important;margin:0!important;color:#edf0f5}
#message-header>.header{background:transparent!important;padding:0!important;border:0!important;min-height:64px}
#message-header .contactphoto{width:44px;height:44px;border-radius:50%;padding:6px;background:#333e4d;margin-right:14px}
#message-header .header-summary{font-size:14px;line-height:24px;color:#b6c0cd}
#message-header .header-links{padding-top:6px;font-size:12px}
#message-header .header-links a{color:#9cacbf}
#message-content{background:#252a31;border:1px solid #343c47;border-radius:12px;padding:28px!important;min-height:240px;box-shadow:0 8px 24px #00000012}
#messagebody .pre{font-family:MarkWeb,system-ui,sans-serif!important;font-size:15px!important;line-height:1.8!important;color:#e3e7ed;white-space:pre-wrap;overflow-wrap:anywhere}
#messagebody{font-size:15px;line-height:1.8}
body.action-compose #compose-content{padding:18px}
body.action-compose #compose-headers{padding:20px!important;background:#242930;border-radius:12px 12px 0 0}
body.action-compose #composebodycontainer{border-radius:0 0 12px 12px;overflow:hidden}
body.action-compose #composebody{background:#242930;color:#e3e7ed;border-color:#3b424d;min-height:320px}
@media(max-width:1024px){body.action-preview .frame-content,body.action-show .frame-content{padding:20px!important}#message-content{padding:20px!important}#message-header h2.subject{font-size:22px!important}}
@media(max-width:600px){body.action-preview .frame-content,body.action-show .frame-content{padding:14px!important}#message-content{padding:16px!important;border-radius:8px}#message-header h2.subject{font-size:20px!important}body.action-compose #compose-content{padding:8px}#messagelist tr.message>td{padding-top:13px!important;padding-bottom:13px!important}}
@media(min-width:1200px){
#layout-content>.header .toolbar .inner,#layout-content>.header .toolbar-menu .inner{max-width:none!important;width:auto!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
#layout-content>.header .toolbar a,#layout-content>.header .toolbar-menu a{max-width:none!important;width:auto!important}
#layout-content>.header .toolbar,#layout-content>.header .toolbar-menu{justify-content:flex-start;text-align:left;padding-left:20px}
}
#messagelist tr.message>td{padding-top:12px!important;padding-bottom:12px!important}
html.dark-mode #layout-list .pagenav,html.dark-mode #layout-sidebar .footer{color:#a4adba}
/* Comfortable navigation and mailbox panes */
@media(min-width:1200px){
body:not(.task-login) #layout-menu{width:208px!important;min-width:208px!important;flex:0 0 208px!important}
body.task-mail:not(.action-compose):not(.action-preview):not(.action-show) #layout-sidebar{width:268px!important;min-width:240px!important;max-width:300px!important;flex:0 0 268px!important}
}
@media(min-width:1025px){
#layout-menu #logo{width:72px!important;max-width:72px!important;height:46px!important;margin:25px auto 29px!important}
#taskmenu a{min-height:48px;gap:12px;border-radius:10px;box-sizing:border-box}
#taskmenu a .inner{font-size:14px!important;font-weight:500}
#taskmenu a:not(.compose):not(.logout){margin:6px 14px;padding:12px 14px!important}
#taskmenu a.compose{width:calc(100% - 28px)!important;margin:0 14px 28px;min-height:48px;padding:12px 14px!important;border-radius:10px;box-shadow:0 4px 12px #0002}
html.dark-mode #taskmenu a.selected:not(.compose){background:#292f38;box-shadow:none;color:#f4f7fc}
html.dark-mode #taskmenu a.selected:not(.compose)::before{color:#8dbaff}
html.dark-mode #taskmenu a:not(.compose):hover{background:#252b33}
#taskmenu a.logout{margin:12px 14px 18px;padding:12px 14px!important;background:transparent!important;color:#b5becb!important}
#taskmenu a.logout:hover{background:#33272c!important;color:#ff999d!important}
}
body.task-mail:not(.action-compose) #layout-sidebar>.header{height:76px;min-height:76px;padding:0 18px;justify-content:flex-start;font-size:14px;letter-spacing:-.15px}
#mailboxlist{padding:18px 14px}
#mailboxlist li{margin-bottom:7px}
#mailboxlist li a{min-height:44px;line-height:44px;padding:0 14px;border-radius:9px;font-size:14px}
html.dark-mode #mailboxlist li.selected>a{background:#2c3747;box-shadow:none;color:#f1f6ff;font-weight:600}
html.dark-mode #mailboxlist li.selected>a::before{color:#92beff}
html.dark-mode #mailboxlist li a:hover{background:#2b313b}
#layout-sidebar #quotadisplay{padding:0 16px;font-size:12px}
@media(max-width:1024px){#mailboxlist{padding:12px 10px}body.task-mail:not(.action-compose) #layout-sidebar>.header{height:58px;min-height:58px}}
/* A recipient control is one field: focus belongs to its outer shell. */
body .recipient-input input,
body .recipient-input input:focus,
body .recipient-input input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .recipient-input.focus,
body .recipient-input:focus-within,
body input.form-control:focus,
body textarea.form-control:focus,
body select.form-control:focus {
  outline: none !important;
  border-color: #85b4ff !important;
  box-shadow: 0 0 0 1px #85b4ff !important;
}

/* Neutral message canvas in dark mode. Email images keep their original colors. */
html.dark-mode #messagebody .message-htmlpart,
html.dark-mode #messagebody .rcmBody {
 background-color: transparent !important;
 color: #e5e9ef !important;
}
html.dark-mode #messagebody .rcmBody p:not([style*="color"]),
html.dark-mode #messagebody .rcmBody div:not([style*="color"]) {color:inherit;}
/* Two clear lines: sender + timestamp, then subject. Only stacked message rows. */
#messagelist tr.message > td.subject:has(> span.fromto) {
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto;
 grid-template-rows:auto auto;
 column-gap:14px;row-gap:8px;
 padding:16px 14px!important;
}
#messagelist td.subject > span.fromto {
 grid-column:1;grid-row:1;display:block!important;float:none!important;
 width:auto!important;max-width:none!important;min-width:0;margin:0!important;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#messagelist td.subject > span.date {
 grid-column:2;grid-row:1;display:block!important;float:none!important;
 position:static!important;width:auto!important;max-width:none!important;
 text-align:right;white-space:nowrap;font-size:12px;line-height:20px;
 font-variant-numeric:tabular-nums;margin:0!important;padding:0!important;
}
#messagelist td.subject > span.subject {
 grid-column:1 / -1;grid-row:2;display:flex!important;align-items:center;gap:7px;
 width:auto!important;min-width:0;margin:0!important;padding:0!important;
}
#messagelist td.subject > span.subject a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#messagelist td.subject > span.subject .msgicon{position:static!important;flex:0 0 10px;margin:0!important}
#messagelist td.subject:has(> span.fromto) > span.size{display:none!important}