/* Mixoryn Mail: corporate design on top of the Elastic skin (dark, brand colours, the fonts of the website). */
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:600; font-display:swap; src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:800; font-display:swap; src:url(../fonts/manrope-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:600; font-display:swap; src:url(../fonts/unbounded-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:800; font-display:swap; src:url(../fonts/unbounded-latin-800-normal.woff2) format('woff2'); }

html.dark-mode {
  --mx-bg:#07080c; --mx-panel:#0d1017; --mx-panel2:#141824; --mx-line:#232938; --mx-text:#eef1f6; --mx-muted:#939db3;
  --mx-green:#2ee6a6; --mx-blue:#5ab0ff; --mx-purple:#a37ae0; --mx-grad:linear-gradient(100deg,#2ee6a6,#5ab0ff 55%,#a37ae0);
}
html.dark-mode body, html.dark-mode input, html.dark-mode textarea, html.dark-mode select, html.dark-mode button { font-family:'Manrope','Segoe UI',system-ui,sans-serif; }
html.dark-mode body { color:var(--mx-text); background:var(--mx-bg); }
html.dark-mode body:not(.iframe)::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(700px 420px at 90% -8%,rgba(163,122,224,.14),transparent 70%),radial-gradient(640px 380px at -4% 108%,rgba(46,230,166,.09),transparent 70%); }
html.dark-mode #layout { position:relative; z-index:1; }
html.dark-mode a { color:var(--mx-blue); }
html.dark-mode a:hover { color:#8cc8ff; }
html.dark-mode .muted, html.dark-mode .hint, html.dark-mode .form-text { color:var(--mx-muted); }

/* the colour switch is not needed: the brand is dark */
#taskmenu a.theme { display:none !important; }

/* ---------- navigation on the left ---------- */
html.dark-mode #layout-menu { background:rgba(7,8,12,.55); border-right:1px solid var(--mx-line); }
html.dark-mode #taskmenu a { color:var(--mx-muted); border-radius:12px; margin:2px 6px; width:auto; transition:background .2s, color .2s; }
html.dark-mode #taskmenu a:hover { background:rgba(255,255,255,.06); color:var(--mx-text); }
html.dark-mode #taskmenu a.selected { background:linear-gradient(135deg,rgba(46,230,166,.16),rgba(90,176,255,.16) 55%,rgba(163,122,224,.2)); color:var(--mx-text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
html.dark-mode #taskmenu a.compose, html.dark-mode #taskmenu a.compose span { color:var(--mx-green); }
html.dark-mode #taskmenu a.logout, html.dark-mode #taskmenu a.logout span { color:#ff7d80; }
html.dark-mode #taskmenu a::before { opacity:.95; }
html.dark-mode #layout-menu .popover-header, html.dark-mode #layout-menu .special-buttons { background:transparent !important; }
#layout-menu .popover-header a.logo, #layout-menu .popover-header { display:flex; align-items:center; justify-content:center; }
#layout-menu #logo, #layout-menu img.logo { max-width:62px; max-height:34px; width:auto; height:auto; object-fit:contain; opacity:1; }

/* ---------- lists, folders, headers ---------- */
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content { background:transparent; border-color:var(--mx-line); }
html.dark-mode #layout > div > .header, html.dark-mode #layout > div > .footer { background:rgba(13,16,23,.6); border-color:var(--mx-line); }
html.dark-mode .header .header-title, html.dark-mode .header .header-title * { font-family:'Unbounded','Manrope',sans-serif; font-weight:600; letter-spacing:-.01em; }
html.dark-mode .listing li, html.dark-mode table.listing tr td { border-color:rgba(255,255,255,.05); }
html.dark-mode .listing li.selected, html.dark-mode table.listing tr.selected td, html.dark-mode .listing li.focused:not(.selected) {
  background:linear-gradient(90deg,rgba(90,176,255,.2),rgba(163,122,224,.12)); color:var(--mx-text);
}
html.dark-mode .listing li.selected a, html.dark-mode table.listing tr.selected td a { color:var(--mx-text); }
html.dark-mode .listing li:hover:not(.selected), html.dark-mode table.listing tr:hover:not(.selected) td { background:rgba(255,255,255,.04); }
html.dark-mode .folderlist li.mailbox.selected > a, html.dark-mode .folderlist li.selected > a { color:var(--mx-text); }
html.dark-mode table.messagelist tr.unread td.subject span.subject, html.dark-mode table.messagelist tr.unread td.fromto, html.dark-mode table.messagelist tr.unread td.from { color:#fff; font-weight:800; }
html.dark-mode .unreadchildren, html.dark-mode .unreadcount { background:var(--mx-grad) !important; color:#06110d !important; font-weight:800; }

/* ---------- toolbar, buttons ---------- */
html.dark-mode .toolbar a.button, html.dark-mode .toolbar a { color:var(--mx-muted); }
html.dark-mode .toolbar a.button:not(.disabled):hover, html.dark-mode .toolbar a:not(.disabled):hover { color:var(--mx-text); background:rgba(255,255,255,.06); border-radius:10px; }
html.dark-mode .btn, html.dark-mode button.btn, html.dark-mode a.btn { border-radius:999px; font-weight:700; border:1px solid var(--mx-line); }
html.dark-mode .btn.btn-primary, html.dark-mode button.btn-primary, html.dark-mode .btn.mainaction, html.dark-mode .formbuttons .btn.btn-primary, html.dark-mode .boxfooter .btn.btn-primary {
  background:var(--mx-grad); color:#05110d !important; border:0; box-shadow:0 8px 26px -10px rgba(90,176,255,.7); text-shadow:none;
}
html.dark-mode .btn.btn-primary:hover, html.dark-mode .btn.mainaction:hover { filter:brightness(1.08); }
html.dark-mode .btn.btn-primary .icon, html.dark-mode .btn.btn-primary::before { color:#05110d; }
html.dark-mode .btn.btn-secondary, html.dark-mode .btn.btn-default { background:rgba(255,255,255,.05); color:var(--mx-text); }
html.dark-mode .btn.btn-danger { background:#3b1417; border-color:#6b2a2d; color:#ffb4b6; }

/* ---------- fields ---------- */
html.dark-mode .form-control, html.dark-mode input.form-control, html.dark-mode select.custom-select, html.dark-mode textarea.form-control, html.dark-mode .input-group-text {
  background:var(--mx-panel); border:1px solid var(--mx-line); color:var(--mx-text); border-radius:12px;
}
html.dark-mode .input-group > .form-control:not(:last-child), html.dark-mode .input-group-prepend .input-group-text { border-radius:12px 0 0 12px; }
html.dark-mode .input-group > .form-control:last-child { border-radius:0 12px 12px 0; }
html.dark-mode .form-control:focus, html.dark-mode input:focus, html.dark-mode textarea:focus { border-color:var(--mx-blue) !important; box-shadow:0 0 0 3px rgba(90,176,255,.2) !important; outline:none; background:var(--mx-panel2); }
html.dark-mode ::placeholder { color:#6c7690; }

/* ---------- menus, dialogs ---------- */
html.dark-mode .popover, html.dark-mode .popupmenu, html.dark-mode .ui-dialog, html.dark-mode .popover-body, html.dark-mode .menu.listing, html.dark-mode .ui-menu {
  background:var(--mx-panel2); border:1px solid #2d3550; border-radius:16px; box-shadow:0 30px 80px -30px #000; color:var(--mx-text);
}
html.dark-mode .popover .popover-header, html.dark-mode .ui-dialog-titlebar { background:transparent; border-color:var(--mx-line); }
html.dark-mode .ui-dialog-title { font-family:'Unbounded','Manrope',sans-serif; font-weight:600; }
html.dark-mode .popover .menu li > a:hover, html.dark-mode .menu.listing li > a:hover { background:rgba(90,176,255,.16); color:var(--mx-text); }
html.dark-mode .ui-widget-overlay, html.dark-mode .modal-backdrop { background:rgba(0,0,0,.65); opacity:1; }

/* ---------- messages and notices ---------- */
html.dark-mode #messagestack > div { border-radius:14px; border:1px solid var(--mx-line); background:var(--mx-panel2); color:var(--mx-text); box-shadow:0 20px 50px -20px #000; }
html.dark-mode #messagestack .error { border-color:#6b2a2d; background:#2a1517; color:#ffb4b6; }
html.dark-mode #messagestack .confirmation { border-color:#245c3a; background:#112419; color:#9be9b6; }
html.dark-mode .boxinformation, html.dark-mode .alert { border-radius:12px; }
html.dark-mode ::-webkit-scrollbar { width:10px; height:10px; } html.dark-mode ::-webkit-scrollbar-thumb { background:#2a3146; border-radius:8px; } html.dark-mode ::-webkit-scrollbar-track { background:transparent; }
html.dark-mode .message-htmlpart, html.dark-mode #messagebody { color:var(--mx-text); }

/* ---------- login ---------- */
html.dark-mode body.task-login { display:grid; place-items:center; min-height:100vh; }
html.dark-mode body.task-login #layout-content { position:static; background:transparent; width:100%; padding:30px 16px; }
body.task-login .mx-login { width:min(440px,100%); margin:0 auto; padding:38px 34px 30px; border-radius:26px; background:linear-gradient(180deg,rgba(18,21,29,.92),rgba(13,16,23,.92)); border:1px solid var(--mx-line); box-shadow:0 50px 120px -50px #000; text-align:center; position:relative; overflow:hidden; }
body.task-login .mx-login::before { content:''; position:absolute; right:-120px; top:-120px; width:300px; height:300px; background:radial-gradient(circle,rgba(163,122,224,.35),transparent 65%); pointer-events:none; }
body.task-login #logo { display:block; margin:0 auto 22px; height:auto; width:200px; max-width:70%; opacity:1; position:relative; }
body.task-login .mx-title { font-family:'Unbounded','Manrope',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.01em; margin:0 0 6px; position:relative; }
body.task-login .mx-sub { color:var(--mx-muted); margin:0 0 26px; font-size:15px; position:relative; }
body.task-login form { position:relative; text-align:left; }
body.task-login .formbuttons { margin-top:18px; }
body.task-login .formbuttons .btn, body.task-login button.mainaction { width:100%; min-height:50px; font-size:16px; text-transform:none; letter-spacing:0; }
body.task-login #login-footer { margin-top:22px; color:#6c7690; font-size:13px; text-align:center; }
body.task-login .mx-note { margin-top:20px; color:#6c7690; font-size:12.5px; text-align:center; position:relative; }
html.dark-mode body.task-login .input-group-text { background:var(--mx-panel2); color:var(--mx-muted); }

/* ---------- the compose window ---------- */
html.dark-mode .compose-headers, html.dark-mode .compose-body { background:transparent; }
html.dark-mode #composebody { background:var(--mx-panel); color:var(--mx-text); border-radius:12px; }

/* ---------- fixes found while looking at the pages ---------- */
body.task-login .mx-login #logo, body.task-login .mx-login #login-form, body.task-login .mx-login form { top:auto !important; bottom:auto !important; left:auto !important; transform:none !important; margin-top:0 !important; position:relative !important; }
body.task-login .mx-login #logo { width:200px; height:auto; margin:0 auto 22px !important; }
body.task-login .mx-login #login-form { width:100%; height:auto; }
html.dark-mode #layout-menu #logo, html.dark-mode #layout-menu img.logo { content:url(../images/mixoryn-mark.png); width:34px; height:34px; max-width:34px; max-height:34px; margin:12px auto 6px; display:block; }
html.dark-mode #layout-menu .special-buttons a, html.dark-mode #layout-menu .special-buttons a:hover { background:transparent; }
html.dark-mode #layout-menu .special-buttons a:hover { background:rgba(255,255,255,.06); }
html.dark-mode .toolbar, html.dark-mode .toolbar.menu, html.dark-mode #layout > div > .header .toolbar { background:transparent !important; border:0 !important; box-shadow:none !important; }
html.dark-mode table.messagelist td.msgicon span.unread::before, html.dark-mode .msgicon .msgicon.unread { color:var(--mx-green); }

/* ---------- second round of fixes ---------- */
html.dark-mode #layout-menu #logo, html.dark-mode #layout-menu img.logo { content:url(../images/mixoryn-mark.svg); }
html.dark-mode #layout-menu .special-buttons a, html.dark-mode #taskmenu a.about, html.dark-mode #taskmenu a.logout, html.dark-mode #taskmenu a.theme { background:transparent !important; }
html.dark-mode #layout-menu .special-buttons a:hover { background:rgba(255,255,255,.06) !important; }
body.task-login .mx-login { margin-top:clamp(24px,13vh,150px) !important; }
html.dark-mode body.task-login .input-group .form-control, html.dark-mode body.task-login .input-group-text { border-color:var(--mx-line) !important; }
html.dark-mode body.task-login .input-group .form-control { border-left:0 !important; }
html.dark-mode body.task-login .input-group-text { border-right:0 !important; }
html.dark-mode table.messagelist span.msgicon.status.unread::before, html.dark-mode table.messagelist td.subject span.msgicon.unread::before { color:var(--mx-green) !important; }