/* MarocTech webmail · responsive additions to Elastic. SPDX-License-Identifier: MIT */
:root { --maro-ink:#132e3e; --maro-muted:#647787; --maro-teal:#087f79; --maro-line:#e1e9ed; }
html,body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { color:var(--maro-ink); }
body:not(.task-login) #layout-menu { background:#122f3e; }
#taskmenu a { transition:background .15s,color .15s; }
#taskmenu a.selected { background:#087f79; }
#taskmenu a.compose { background:#087f79; border-radius:10px; margin:12px 6px; }
#layout-sidebar { background:#f5f8fa; border-color:var(--maro-line); }
#layout-sidebar > .header { background:#f5f8fa; border-color:var(--maro-line); min-height:64px; }
#layout-list > .header,#layout-content > .header { border-color:var(--maro-line); }
.listing li.selected,.listing tr.selected td { background:#e1f2ef; color:#075f59; }
.listing tr.unread td { font-weight:650; }
.messagelist td { border-color:#edf1f4; }
.btn-primary { background:var(--maro-teal); border-color:var(--maro-teal); border-radius:8px; }
.btn-primary:hover,.btn-primary:focus { background:#056b65; border-color:#056b65; }
.form-control:focus { border-color:var(--maro-teal); box-shadow:0 0 0 3px #087f791a; }
.form-control { border-color:#cbd8df; border-radius:7px; }
.maro-account-tools { display:flex; justify-content:space-between; gap:12px; padding:10px 16px 14px; font-size:12px; border-bottom:1px solid var(--maro-line); }
.maro-account-tools a { color:#086f69; font-weight:600; }
#ident-switch-wrapper { max-width:100%; }
#plugin-ident_switch-account { max-width:100%; font-size:13px; cursor:pointer; min-height:40px; }
#layout-menu #logo { max-width:50px; padding:8px 3px; }
.maro-note { background:#edf7f5; border-radius:8px; color:#285e5a; padding:13px 16px; line-height:1.6; }
.maro-separate-account .maro-technical { display:none !important; }
.maro-optional { display:none !important; }
.maro-show-optional .maro-optional { display:flex !important; }
.maro-text-button { border:0; background:none; color:#087f79; text-decoration:underline; padding:8px 0; }
body.task-login { background:#f2f6f7; }
.task-login #layout-content { width:100%; max-width:1120px; margin:auto; padding:64px 48px 32px; display:grid; grid-template-columns:1fr 420px; grid-template-rows:auto 1fr auto; gap:32px 80px; background:transparent; overflow:visible; height:auto; text-align:left; }
.task-login .maro-login-brand { grid-column:1/-1; }
.task-login #logo { margin:0; width:190px; max-width:190px; height:48px; padding:0; position:static; top:auto; }
.maro-login-intro { align-self:center; padding-bottom:28px; }
.maro-eyebrow { color:#087f79; font-size:11px; letter-spacing:2px; font-weight:700; }
.maro-login-intro h1 { font-size:54px; line-height:1.12; letter-spacing:-2px; color:#132e3e; margin:22px 0; font-weight:720; }
.maro-login-intro p { font-size:17px; line-height:1.7; color:#617581; max-width:370px; }
.maro-login-features { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:28px; color:#4c686f; font-size:12px; }
.maro-login-features span:before { content:'✓'; color:#087f79; margin-right:7px; font-weight:700; }
.task-login #login-form { width:100%; max-width:none; position:static; top:auto; margin:0; padding:36px; background:white; border:1px solid #e1e9ed; border-radius:20px; box-shadow:0 14px 45px #18384808; align-self:center; }
.maro-form-title h2 { font-size:25px; font-weight:700; letter-spacing:-.6px; margin:0 0 8px; color:#132e3e; }
.maro-form-title p { color:#647787; font-size:13px; margin:0 0 28px; }
.task-login #login-form .form-control { min-height:48px; font-size:15px; padding:11px 14px; background:#fbfcfd; }
.task-login #login-form .input-group-text { background:#f6f9fa; border-color:#cbd8df; color:#78909a; }
.task-login #login-form button[type=submit] { min-height:48px; font-size:15px; font-weight:650; border-radius:9px; background:#087f79; border-color:#087f79; margin-top:18px; }
.task-login #login-footer { margin:24px 0 0; font-size:12px; color:#647787; text-align:center; }
.task-login #login-footer a { color:#647787; }
.maro-login-bottom { grid-column:1/-1; font-size:11px; color:#778a95; margin-top:36px; }
.maro-login-bottom span { padding:0 10px; }
html.dark-mode .task-login { background:#f2f6f7; }
@media (max-width:900px) {
 .task-login #layout-content { max-width:560px; padding:32px 24px; display:flex; flex-direction:column; gap:24px; }
 .maro-login-intro { width:100%; padding:0; }
 .maro-login-intro h1 { font-size:34px; letter-spacing:-1px; margin:12px 0; }
 .maro-login-intro h1 br { display:none; }
 .maro-login-intro h1 br:after { content:' '; }
 .maro-login-intro p { font-size:14px; line-height:1.5; max-width:none; margin:0; }
 .maro-login-features { display:none; }
 .task-login #login-form { padding:28px; }
 .maro-login-bottom { margin-top:0; }
}
@media (max-width:480px) {
 .task-login #layout-content { padding:24px 18px; }
 .maro-login-intro h1 { font-size:31px; }
 .task-login #login-form { padding:24px; border-radius:16px; }
 .task-login .maro-eyebrow { font-size:10px; letter-spacing:1.4px; }
 .task-login #logo { width:166px; height:40px; }
 .maro-account-tools { padding:10px 14px; }
}