/* XH Mail — local additions to Roundcube Elastic, no remote fonts or assets. */
body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body { -webkit-font-smoothing: antialiased; }
:root { --xh-blue: #2864df; --xh-ink: #23314b; --xh-line: #e5eaf2; }
html:not(.dark-mode) body { color: var(--xh-ink); background: #f5f7fb; }
html:not(.dark-mode) #layout-sidebar { background: #f5f7fb; border-color: var(--xh-line); }
html:not(.dark-mode) #layout-list { border-color: var(--xh-line); }
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer { background: #fff; border-color: var(--xh-line); color: #34435d; }
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-sidebar > .footer { background: #f5f7fb; }
#layout-sidebar > .header .username { font-size: .9rem; font-weight: 600; }
#folderlist-content { padding: 16px 10px; }
#mailboxlist li > a { border-radius: 9px; margin: 3px 0; padding-top: 3px; padding-bottom: 3px; }
html:not(.dark-mode) #mailboxlist li > a { color: #52617a; }
html:not(.dark-mode) #mailboxlist li.selected > a { background: #e4edff; color: #2056c3; font-weight: 600; }
html:not(.dark-mode) #mailboxlist li > a:hover { background: #eaf0fa; }
html:not(.dark-mode) #mailboxlist .unreadcount { background: var(--xh-blue); color: #fff; border-radius: 6px; }
html:not(.dark-mode) .searchbar { background: #f8faff; border-color: var(--xh-line); }
html:not(.dark-mode) .searchbar input { color: var(--xh-ink); }
html:not(.dark-mode) .messagelist td { border-color: #edf1f7; }
html:not(.dark-mode) .messagelist tr:hover td { background: #f5f8ff; }
html:not(.dark-mode) .messagelist tr.selected td { background: #eaf1ff; color: #234276; }
html:not(.dark-mode) .messagelist tr.unread td.subject { color: #203b6b; }
html:not(.dark-mode) .listing-info { color: #8693a7; }
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .button.mainaction { background-color: var(--xh-blue); border-color: var(--xh-blue); }
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .button.mainaction:hover { background-color: #1f55c7; border-color: #1f55c7; }
.form-control, .custom-select, .btn { border-radius: 7px; }
.form-control:focus { border-color: #7da5ef; box-shadow: 0 0 0 3px rgba(40,100,223,.12); }
.popover, .ui-dialog { border-radius: 12px; overflow: hidden; }
@media (min-width: 481px) {
  #layout-menu, #taskmenu .special-buttons { background: #162640 !important; }
  #layout-menu .popover-header { background: #162640 !important; }
  #layout-menu #logo { width: 38px; height: 38px; padding: 0; margin-top: 8px; }
  #taskmenu a { color: #b7c5dd; border-radius: 10px; margin: 5px 7px; width: calc(100% - 14px); max-width: none; }
  #taskmenu a.selected { background: #2a4166; color: #fff; }
  #taskmenu a:not(.disabled):hover { color: #fff; background: #243958; }
  #taskmenu .action-buttons a { color: #fff; background: #2864df; margin-top: 16px; margin-bottom: 14px; }
  #taskmenu .action-buttons a:hover { background: #3877f0; }
  #taskmenu a.logout { color: #c2cce0 !important; }
}
@media (min-width: 1201px) {
  #layout-sidebar { flex: none; width: 236px; min-width: 210px; max-width: 28%; }
  #layout-list { flex: none; width: 410px; max-width: 40%; }
  .messagelist td { padding-top: 10px; padding-bottom: 10px; }
}
/* A compact login panel that also fits phone screens and short windows. */
.task-login { overflow: auto; }
.task-login #layout { min-height: 100%; height: auto; display: grid; place-items: center; padding: 48px 20px; }
.task-login #layout-content { display: block; flex: none; width: 100%; max-width: 440px; padding: 42px 38px 24px; border-radius: 20px; border: 1px solid var(--xh-line); box-shadow: 0 18px 64px rgba(31,57,102,.08); }
html:not(.dark-mode) .task-login { background: #f1f5fc; }
html:not(.dark-mode) .task-login #layout-content { background: #fff; }
.task-login #logo { position: static; display: block; width: 178px; height: 48px; max-width: 100%; margin: 0 auto 30px; }
.xh-welcome h2 { font-size: 25px; line-height: 1.4; font-weight: 650; letter-spacing: 1px; margin: 0 0 10px; }
.xh-welcome p { color: #7c899d; font-size: 13px; margin: 0 0 28px; line-height: 1.7; }
#login-form { top: auto; width: 100%; max-width: none; margin: 0; }
#login-form .input-group { margin-bottom: 17px; }
#login-form .form-control, #login-form .input-group-text { min-height: 47px; border-color: #dfe5ef; }
#login-form .input-group-text { background: transparent; color: #8b98ac; border-radius: 8px 0 0 8px; }
#login-form .form-control { border-radius: 0 8px 8px 0; font-size: 14px; }
#login-form .formbuttons { margin: 24px 0 22px; }
#rcmloginsubmit { width: 100%; border-radius: 9px; min-height: 46px; font-size: 15px; font-weight: 600; letter-spacing: 3px; }
#login-footer { padding-top: 19px; border-top: 1px solid var(--xh-line); font-size: 12px; color: #8c98ab; }
html.dark-mode .task-login { background: #121c2b; }
html.dark-mode .task-login #layout-content { background: #1e2a3c; border-color: #354358; }
html.dark-mode #login-form .form-control,
html.dark-mode #login-form .input-group-text,
html.dark-mode #login-footer { border-color: #3d4c63; }
html.dark-mode .xh-welcome p { color: #a6b3c8; }
@media (max-width: 480px) {
  .task-login #layout { padding: 24px 16px; }
  .task-login #layout-content { padding: 32px 24px 22px; border-radius: 16px; }
  #folderlist-content { padding: 10px 8px; }
}
@media print {
  body { background: #fff !important; }
}