/* Maili design layer for the unmodified Roundcube 1.6 Elastic templates.
   No hidden native controls and no replacement of mail/contact event handlers. */
@media screen {
:root {--maili-blue:#2563eb;--maili-blue-hover:#1d4ed8;--maili-page:#f4f7fb;--maili-panel:#fff;--maili-text:#0f172a;--maili-muted:#64748b;--maili-line:#e8eef6;--maili-soft:#eff6ff;}
html.dark-mode {--maili-page:#101827;--maili-panel:#182235;--maili-text:#e5edf7;--maili-muted:#9aaac0;--maili-line:#2b3b52;--maili-soft:#20385b;}
html body {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;background:var(--maili-page)!important;color:var(--maili-text)!important;-webkit-font-smoothing:antialiased;}
html #layout {background:var(--maili-page)!important;}
html #layout-menu {background:var(--maili-page)!important;border-color:var(--maili-line)!important;}
html #layout-menu .popover-header {background:var(--maili-page)!important;border:0!important;}
html #layout-menu .popover-header img {padding:12px!important;max-height:72px!important;}
html #taskmenu {background:var(--maili-page)!important;}
html #taskmenu a {color:var(--maili-muted)!important;border-radius:12px!important;transition:background .15s,color .15s;}
html #taskmenu a:hover,html #taskmenu a.selected {color:var(--maili-blue)!important;background:var(--maili-soft)!important;}
html #taskmenu a.logout {color:#e35a65!important;}
html #taskmenu a.compose {background:var(--maili-blue)!important;color:#fff!important;box-shadow:0 8px 20px #2563eb24;}
html #taskmenu a.compose:hover {background:var(--maili-blue-hover)!important;}
html #maili-home-link {font-size:10px!important;font-weight:750;white-space:nowrap;padding:12px 3px!important;text-align:center;line-height:1.4!important;}
html #layout-sidebar {background:var(--maili-page)!important;border-color:var(--maili-line)!important;}
html #layout-list,html #layout-content {background:var(--maili-panel)!important;border-color:var(--maili-line)!important;}
html #layout .header {background:var(--maili-panel)!important;border-color:var(--maili-line)!important;color:var(--maili-text)!important;font-weight:750!important;}
html #layout-sidebar>.header,html #layout-sidebar>.footer {background:var(--maili-page)!important;}
html #layout .footer {background:var(--maili-panel)!important;border-color:var(--maili-line)!important;color:var(--maili-muted)!important;}
html #layout .toolbar a {color:var(--maili-muted)!important;font-weight:650!important;border-radius:9px;}
html #layout .toolbar a:hover:not(.disabled) {color:var(--maili-blue)!important;background:var(--maili-soft)!important;}
html #layout .toolbar a.disabled {opacity:.4!important;}
html #layout .toolbar .button.send,html #layout .toolbar a.send {color:var(--maili-blue)!important;font-weight:800!important;}
html #mailboxlist {padding:10px 8px!important;}
html #mailboxlist li>a {border-radius:12px!important;margin:3px 0!important;font-size:14px!important;font-weight:650!important;color:var(--maili-muted)!important;}
html #mailboxlist li>a:hover {background:var(--maili-soft)!important;color:var(--maili-blue)!important;}
html #mailboxlist li.selected>a {background:var(--maili-panel)!important;color:var(--maili-blue)!important;box-shadow:0 3px 12px #0f172a05;}
html #mailboxlist .unreadcount {background:var(--maili-blue)!important;color:#fff!important;border-radius:7px!important;padding:2px 6px!important;}
html .listing {color:var(--maili-text)!important;}
html .listing tr td {border-color:var(--maili-line)!important;}
html .listing tr:hover td {background:var(--maili-soft)!important;}
html .listing tr.selected td,html .listing.focus tr.selected td {background:var(--maili-soft)!important;color:var(--maili-text)!important;}
html #messagelist tr td {padding-top:15px!important;padding-bottom:15px!important;}
html #messagelist .subject {font-size:14px!important;font-weight:650!important;}
html #messagelist tr.unread .subject {font-weight:800!important;}
html #messagelist .fromto,html #messagelist .date,html #messagelist .size {color:var(--maili-muted)!important;font-size:12px!important;}
html .searchbar {background:var(--maili-page)!important;border-color:var(--maili-line)!important;}
html .searchbar input {font-size:13px!important;background:transparent!important;}
html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),html textarea,html select {border-radius:12px!important;border-color:var(--maili-line)!important;color:var(--maili-text)!important;background-color:var(--maili-page)!important;}
html input:focus,html textarea:focus,html select:focus {border-color:#8eb4fb!important;box-shadow:0 0 0 3px #2563eb16!important;}
html .btn {border-radius:11px!important;font-weight:700!important;}
html .btn-primary {background:var(--maili-blue)!important;border-color:var(--maili-blue)!important;color:#fff!important;box-shadow:0 6px 18px #2563eb20;}
html .btn-primary:hover {background:var(--maili-blue-hover)!important;border-color:var(--maili-blue-hover)!important;}
html .btn-secondary {background:var(--maili-page)!important;border-color:var(--maili-line)!important;color:var(--maili-text)!important;}
html .custom-control-input:checked~.custom-control-label::before {background-color:var(--maili-blue)!important;border-color:var(--maili-blue)!important;}
html .ui-dialog {background:var(--maili-panel)!important;border:1px solid var(--maili-line)!important;border-radius:22px!important;box-shadow:0 28px 80px #0f172a30!important;overflow:hidden;}
html .ui-dialog .ui-dialog-titlebar {background:var(--maili-page)!important;border-color:var(--maili-line)!important;padding:18px 22px!important;font-weight:800!important;}
html .ui-dialog .ui-dialog-buttonpane {background:var(--maili-panel)!important;border-color:var(--maili-line)!important;}
html .popover,html .dropdown-menu {border-radius:15px!important;border-color:var(--maili-line)!important;background:var(--maili-panel)!important;box-shadow:0 18px 48px #0f172a18!important;}
html .popover-header {background:var(--maili-page)!important;color:var(--maili-text)!important;}
html .popover-body,html .popover a,html .dropdown-menu a {color:var(--maili-text)!important;}
html .menu a:hover,html .menu a.active {background:var(--maili-soft)!important;color:var(--maili-blue)!important;}
html #message-header {border-color:var(--maili-line)!important;padding:22px!important;}
html #message-header h2,html #message-header .subject {font-weight:800!important;color:var(--maili-text)!important;letter-spacing:-.4px;}
html #messagebody {background:var(--maili-panel)!important;}
html .attachmentslist li {border:1px solid var(--maili-line)!important;border-radius:14px!important;background:var(--maili-page)!important;margin:8px!important;}
html .attachmentslist li a {color:var(--maili-text)!important;}
html #compose-content {background:var(--maili-panel)!important;}
html #composeheaders {padding:16px!important;}
html #composebody {font-size:15px!important;line-height:1.7!important;}
html #contacts-table .listing tr td,html #contacts-table td {padding-top:14px!important;padding-bottom:14px!important;}
html .propform fieldset legend {font-weight:800!important;color:var(--maili-text)!important;}
html .propform label {color:var(--maili-muted)!important;font-weight:650!important;}
html body.task-login {background:radial-gradient(ellipse at 70% 10%,#dce9ff 0,transparent 45%),var(--maili-page)!important;}
html.dark-mode body.task-login {background:var(--maili-page)!important;}
html body.task-login #login-form {border:1px solid var(--maili-line)!important;border-radius:32px!important;background:var(--maili-panel)!important;padding:38px!important;box-shadow:0 28px 70px #2563eb12!important;}
html body.task-login #login-form input {padding:14px 16px!important;min-height:48px;}
html body.task-login #login-form button {min-height:48px;border-radius:15px!important;}
html body.task-login #logo {max-width:220px!important;max-height:76px!important;}
html :focus-visible {outline:2px solid #8eb4fb;outline-offset:3px;}
}
@media screen and (min-width:1200px) {
html #layout {padding:12px 12px 12px 0!important;}
html #layout-list {border-radius:24px 0 0 24px!important;border:1px solid var(--maili-line)!important;}
html #layout-content {border-radius:0 24px 24px 0!important;border:1px solid var(--maili-line)!important;border-left:0!important;overflow:hidden;}
html body.task-mail #layout-sidebar {min-width:195px!important;}
html body.task-mail #layout-list {min-width:340px!important;}
}
@media screen and (max-width:1199px) {
html #layout {padding:0!important;}
html #layout-list,html #layout-content {border-radius:0!important;}
html #messagelist tr td {padding-top:12px!important;padding-bottom:12px!important;}
}
@media (prefers-reduced-motion:reduce) {html #taskmenu a {transition:none!important;}}
/* Structure taken from the attached React design. Native IDs remain intact. */
html #layout-menu .popover-header {padding:20px 20px 0!important;min-height:76px!important;}
.maili-brand {display:flex!important;align-items:center;gap:12px;text-decoration:none;color:#0f172a!important;}
.maili-brand-icon {width:36px;height:36px;background:#2563eb;color:white;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 18px #2563eb26;}
.maili-brand-icon svg {width:20px;height:20px;}
.maili-brand strong {display:block;font-size:18px;font-weight:800;line-height:20px;}
.maili-brand small {display:block;margin-top:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;}
html #taskmenu .action-buttons {display:block;padding:12px 20px 24px!important;}
html #taskmenu a.compose {height:48px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;border-radius:16px!important;margin:0!important;padding:0!important;}
html #taskmenu a.compose:before {content:'+'!important;font-family:Arial!important;font-size:26px!important;float:none!important;margin:0!important;width:auto!important;}
html #taskmenu a.compose .inner {display:inline!important;font-size:15px;font-weight:750;}
html #taskmenu>a,html #taskmenu>.special-buttons>a {margin:3px 20px;padding:10px 12px!important;text-align:left!important;display:flex!important;align-items:center;gap:12px;height:auto!important;line-height:20px!important;}
html #taskmenu>a:before,html #taskmenu>.special-buttons>a:before {float:none!important;font-size:18px!important;width:20px!important;margin:0!important;}
html #taskmenu>a .inner,html #taskmenu>.special-buttons>a .inner {display:inline!important;font-size:14px;font-weight:650;}
html #taskmenu .special-buttons {position:static!important;display:block!important;margin-top:20px;padding-bottom:20px;}
html #taskmenu .maili-site {font-size:12px!important;color:#94a3b8!important;border-top:1px solid #e2e8f0;border-radius:0!important;padding-top:20px!important;}
html #layout-menu #layout-sidebar {width:100%!important;min-width:100%!important;max-width:100%!important;border:0!important;flex:1;display:flex!important;}
html #layout-menu #layout-sidebar>.header {min-height:32px!important;height:32px!important;padding:0 20px!important;}
html #layout-menu #layout-sidebar>.header .username {font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;}
html #layout-menu #mailboxlist {padding:0 20px!important;}
html #layout-menu #mailboxlist li>a {padding:9px 12px!important;line-height:20px!important;}
html #layout-menu #layout-sidebar>.footer {padding:16px 20px!important;border-top:1px solid #e2e8f0;}
html #layout-menu .ui-resizable-handle {display:none!important;}
.maili-account {display:flex;align-items:center;gap:12px;margin-left:auto;padding-left:16px;border-left:1px solid #f1f5f9;}
.maili-account-address {max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3b82f6;font-size:12px;font-weight:700;}
.maili-profile {position:relative;}
.maili-profile summary {cursor:pointer;list-style:none;}
.maili-profile summary::-webkit-details-marker {display:none;}
.maili-avatar,.maili-row-avatar {display:flex;align-items:center;justify-content:center;background:#6366f1;color:#fff;border-radius:50%;width:40px;height:40px;font-size:15px;font-weight:750;}
.maili-profile-menu {position:absolute;z-index:100;right:0;top:48px;width:200px;padding:10px;border:1px solid #f1f5f9;border-radius:16px;background:white;box-shadow:0 20px 40px #0f172a22;}
.maili-profile-menu a {display:block;padding:10px 12px;border-radius:8px;}
.maili-profile-menu a:hover {background:#f4f7fb;}
.maili-profile-menu .logout {color:#ef4444;}
html #messagelist td.subject {position:relative;padding-left:76px!important;}
html #messagelist .maili-row-avatar {position:absolute;left:20px;top:18px;width:44px;height:44px;font-size:16px;}
html #messagelist td.subject span.fromto {font-size:14px!important;font-weight:750!important;color:#1e293b!important;margin-bottom:5px;}
html #messagelist td.subject span.subject {font-size:13px!important;font-weight:650!important;line-height:20px!important;}
html #messagelist td.subject span.date {font-size:11px!important;color:#2563eb!important;font-weight:700!important;}
html #messagelist tr.unread td.subject:before {content:'';position:absolute;left:8px;top:40px;width:6px;height:6px;border-radius:50%;background:#2563eb;}
html #message-header {border:0!important;background:white!important;padding:0!important;margin-bottom:34px;}
html #message-header .subject {font-size:28px!important;line-height:1.25;font-weight:850!important;margin-bottom:30px!important;}
html #message-header .header {border:0!important;padding:0!important;min-height:64px;}
html #message-header .contactphoto {border-radius:50%!important;width:48px!important;height:48px!important;}
html #message-content .attachmentslist li {background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:16px!important;padding:16px!important;}
html .task-login #layout {padding:24px!important;}
html .task-login #layout-content {background:transparent!important;display:flex;justify-content:center;align-items:center;}
html .task-login #login-form {width:448px!important;max-width:100%!important;border:1px solid white!important;background:white!important;box-shadow:0 25px 60px #2563eb18!important;border-radius:32px!important;padding:40px!important;margin:0!important;}
.maili-login-brand {text-align:center;margin-bottom:24px;}
.maili-login-brand .maili-brand-icon {width:64px;height:64px;border-radius:16px;font-size:36px;}
.maili-login-brand h1,.maili-login-brand p {display:none;}
.maili-login-title {text-align:center;font-size:28px;font-weight:850;margin-bottom:8px;}
.maili-login-subtitle {text-align:center;color:#94a3b8;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;margin-bottom:34px;}
html .task-login input.form-control {height:56px!important;padding:16px 20px!important;border:2px solid transparent!important;border-radius:16px!important;}
html .task-login button[type=submit],html .task-login input[type=submit] {width:100%!important;min-height:56px;border-radius:20px!important;font-size:16px!important;margin-top:20px;}
.maili-signup {text-align:center;font-size:13px;color:#64748b;margin-top:24px;}
.maili-signup a {font-weight:750;color:#2563eb;}
@media screen and (min-width:1200px) {
 html #layout {padding:0!important;gap:0;}
 html #layout-menu {width:240px!important;min-width:240px!important;max-width:240px!important;flex:0 0 240px!important;border:0!important;display:flex!important;flex-direction:column;}
 html #taskmenu {display:flex!important;flex-direction:column;flex:1;overflow-y:auto;min-height:0;width:100%!important;}
 html #layout-list {width:380px!important;min-width:380px!important;max-width:380px!important;flex:0 0 380px!important;margin:12px 0!important;border-radius:24px 0 0 24px!important;overflow:hidden;border-right:1px solid #f1f5f9!important;border-top:1px solid #e2e8f0!important;border-bottom:1px solid #e2e8f0!important;}
 html #layout-content {margin:12px 12px 12px 0!important;border-radius:0 24px 24px 0!important;overflow:hidden;border:1px solid #e2e8f0!important;border-left:0!important;}
 html.iframe #layout-content,html .task-login #layout-content {margin:0!important;border:0!important;border-radius:0!important;}
 html #messagelist-header {height:58px!important;min-height:58px!important;padding:0 20px!important;border:0!important;}
 html #messagelist-header .header-title {display:block!important;font-size:22px;font-weight:800!important;}
 html #layout-list>.searchbar {margin:24px 20px 8px!important;border-radius:16px!important;min-height:42px;padding:0 10px!important;border:0!important;}
 html #layout-content>.header {height:72px!important;min-height:72px!important;padding:0 24px!important;border-bottom:1px solid #f1f5f9!important;}
 html #layout-content>.header .toolbar {flex:1;min-width:0;}
 html #layout-content>.header .toolbar a {padding:0 10px!important;}
 html #layout-content>.header .toolbar a .inner {font-size:12px!important;}
 html.iframe #layout-content>.content,html .task-mail.action-show #layout-content>.content {padding:32px 40px!important;}
 html .task-addressbook #layout-list {flex:1!important;width:auto!important;max-width:none!important;min-width:360px!important;}
 html .task-addressbook #layout-content {flex:0 1 440px!important;min-width:300px;}
 html #contacts-table,html #contacts-table tbody {display:block;width:100%;}
 html #contacts-table tbody {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;padding:20px;}
 html #contacts-table tr {display:block;border:1px solid #f1f5f9;border-radius:20px;background:#f8fafc;min-height:145px;overflow:hidden;}
 html #contacts-table tr.selected {border-color:#bfdbfe!important;background:#eff6ff!important;}
 html #contacts-table td {display:block!important;height:auto!important;padding:22px!important;border:0!important;white-space:normal;}
 html #contacts-table td:before {display:none!important;}
 html #contacts-table .maili-row-avatar {margin-bottom:12px;}
}
@media screen and (max-width:1199px) {
 .maili-account {display:none;}
 html #layout-menu .popover-header {padding:16px!important;}
 html #layout-menu #taskmenu {width:100%;overflow-y:auto;}
 html #layout-menu #layout-sidebar {position:static!important;visibility:visible!important;max-height:45vh;}
 html #layout-menu #layout-sidebar>.header a {display:none;}
 html #layout-menu #taskmenu a .inner {display:inline!important;}
 html #messagelist .maili-row-avatar {left:14px;}
 html #messagelist td.subject {padding-left:68px!important;}
 html .task-login #login-form {padding:28px!important;}
}
@media print {.maili-row-avatar,.maili-account,.maili-brand {display:none!important;}}
html #layout-menu .popover-header a.maili-brand {display:flex!important;}
html #layout-menu .column-resizer,html #layout-list>.column-resizer {display:none!important;}
html #layout-menu .quota-widget .bar {display:block;background:#e2e8f0;height:8px;border-radius:8px;margin-top:10px;overflow:hidden;}
html #layout-menu .quota-widget .value {display:block;height:8px;background:#2563eb;border-radius:8px;}
@media screen and (min-width:481px) and (max-width:1199px) {
 html #layout-menu {width:220px!important;min-width:220px!important;}
 html #layout-menu .popover-header .maili-brand {justify-content:center;}
}

html #taskmenu a {
  width:auto!important;
  max-width:none!important;
  float:none!important;
}
html #taskmenu a.compose {
  width:100%!important;
  box-sizing:border-box;
}
html #taskmenu .special-buttons {
  width:100%!important;
  background:transparent!important;
}
html #taskmenu .inner {
  max-width:none!important;
  white-space:normal!important;
}
html #taskmenu #mailboxlist li {
  display:block!important;
  height:auto!important;
  float:none!important;
}
html #taskmenu #mailboxlist a {
  display:block!important;
  text-align:left!important;
}
html #layout-menu .popover-header a.maili-brand {
  text-decoration:none!important;
  text-align:left!important;
  line-height:normal!important;
}

html #taskmenu #mailboxlist li>a {
  display:flex!important;
  align-items:center!important;
  gap:12px;
  min-height:40px;
}
html #taskmenu #mailboxlist li>a:before {
  display:inline-block!important;
  float:none!important;
  width:20px!important;
  height:20px!important;
  line-height:20px!important;
  margin:0!important;
  flex:0 0 20px;
}
html #taskmenu #mailboxlist .unreadcount {
  margin-left:auto;
}
@media screen and (min-width:1200px) {
  html #messagelist-header {
    display:flex!important;
    align-items:center!important;
    gap:6px;
  }
  html #messagelist-header>.header-title {
    display:block!important;
    flex:1!important;
    min-width:0;
  }
  html #messagelist-header>.toolbar {
    display:flex!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  html #messagelist-header>.toolbar a {
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    padding:0!important;
  }
  html #messagelist-header>.toolbar a .inner {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip-path:inset(50%);
  }
  html #messagelist-header>.refresh {
    min-width:28px!important;
    padding:0!important;
  }
}

html #messagelist-header>.header-title {
  margin:0!important;
  text-align:left!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media screen and (min-width:1200px) {
  html body.task-mail #layout-content>.header {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  html body.task-mail #layout-content>.header>.header-title {
    display:none!important;
    margin:0!important;
  }
  html body.task-mail #layout-content>.header .toolbar {
    order:1;
    flex:1!important;
    float:none!important;
  }
  html body.task-mail #layout-content>.header .maili-account {
    order:2;
    flex:0 0 auto!important;
    margin-left:auto!important;
  }
}

html #taskmenu #settings-menu li>a,
html #taskmenu #directorylist li>a {
  display:flex!important;
  align-items:center!important;
  gap:12px;
  padding:10px 20px!important;
  min-height:40px;
  text-align:left!important;
}
html #taskmenu #settings-menu li>a:before,
html #taskmenu #directorylist li>a:before {
  float:none!important;
  width:20px!important;
  height:20px!important;
  line-height:20px!important;
  margin:0!important;
  flex:0 0 20px;
}
html #layout-menu #layout-sidebar>.header .header-title {
  margin:0!important;
  text-align:left!important;
}
@media screen and (min-width:1200px) {
  html body.task-mail.action-compose #layout-sidebar {
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
    flex:0 0 320px!important;
    background:white!important;
    margin:12px 12px 12px 0!important;
    border-radius:0 24px 24px 0!important;
  }
  html body.task-mail.action-compose #layout-content {
    flex:1!important;
    min-width:0!important;
    margin:12px 0!important;
    border-radius:24px 0 0 24px!important;
  }
}