/* bumail.ru — a compact navy/blue theme layered over Elastic. */
:root {
  --bu-bg: #080d14;
  --bu-panel: #111923;
  --bu-raised: #192330;
  --bu-line: #253142;
  --bu-text: #edf2f9;
  --bu-muted: #92a2b8;
  --bu-blue: #2476f3;
}
:root body { background: var(--bu-bg); color: var(--bu-text); }
:root body #layout { background: var(--bu-bg); }
:root body #layout-menu { background: #0b1119; border-color: var(--bu-line); }
:root body #layout-list, :root body #layout-sidebar, :root body #layout-content,
:root body #layout > div > .header, :root body .header, :root body .footer {
  background-color: var(--bu-bg); color: var(--bu-text); border-color: var(--bu-line);
}
:root body #layout-list, :root body #layout-sidebar { border-color: var(--bu-line); }
:root body #taskmenu a { color: var(--bu-muted); border-radius: 9px; }
:root body #taskmenu a:hover { background: #142033; color: var(--bu-text); }
:root body #taskmenu a.selected { background: #142742; color: #71a7ff; }
:root body #taskmenu a.compose { background: var(--bu-blue); color: #fff; margin: 8px; border-radius: 9px; }
:root body #taskmenu a:focus-visible, :root body a:focus-visible, :root body button:focus-visible {
  outline: 2px solid #75aaff; outline-offset: 2px;
}
:root body .bu-app-logo { height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
:root body .bu-app-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
:root body .bu-app-logo > span { display: none; font-size: 16px; font-weight: 700; letter-spacing: -.5px; }
:root body .toolbar a, :root body .header a, :root body .footer a { color: #bac8da; }
:root body .toolbar a:hover, :root body .header a:hover { color: #fff; }
:root body .toolbar a.button, :root body .header a.button { border-radius: 7px; }
:root body .searchbar, :root body .searchbar form { background: var(--bu-panel); border-color: var(--bu-line); }
:root body .searchbar input { background: transparent; color: var(--bu-text); }
:root body .listing { color: var(--bu-text); background: var(--bu-bg); }
:root body .listing li, :root body .listing tr { border-color: var(--bu-line); }
:root body .listing li a { color: #c2cee0; }
:root body .listing li.selected, :root body .listing li.selected > a,
:root body .listing tr.selected td { background: #142742; color: #e3eeff; }
:root body .listing li:hover, :root body .listing tr:hover td { background-color: #172232; }
:root body .listing li.selected:hover, :root body .listing tr.selected:hover td { background-color: #193657; }
:root body #messagelist { background: var(--bu-panel); }
:root body #messagelist td { background: var(--bu-panel); color: #c3cfe0; border-bottom: 1px solid var(--bu-line); padding-top: 13px; padding-bottom: 13px; }
:root body #messagelist tr.unread td { color: #f4f7fc; }
:root body #messagelist .subject { color: inherit; }
:root body #messagelist .fromto, :root body #messagelist .date { color: var(--bu-muted); }
:root body .form-control, :root body .custom-select, :root body select, :root body textarea {
  background: #0c131d; color: var(--bu-text); border-color: var(--bu-line); border-radius: 7px;
}
:root body .form-control:focus, :root body .custom-select:focus, :root body textarea:focus {
  background: #0c131d; color: var(--bu-text); border-color: #4a8efa; box-shadow: 0 0 0 3px rgba(36,118,243,.16);
}
:root body .form-control::placeholder { color: #7f90a7; opacity: 1; }
:root body .btn-primary, :root body a.button.mainaction, :root body button.mainaction {
  background: var(--bu-blue); border-color: var(--bu-blue); color: #fff; border-radius: 8px;
}
:root body .btn-primary:hover, :root body a.button.mainaction:hover, :root body button.mainaction:hover { background: #3985fc; border-color: #3985fc; }
:root body .btn-primary:disabled, :root body button.mainaction:disabled, :root body a.button.disabled { opacity: .5; }
:root body .popover, :root body .popover-body, :root body .dropdown-menu, :root body .menu,
:root body .ui-dialog, :root body .ui-dialog .ui-dialog-titlebar { background: var(--bu-panel); color: var(--bu-text); border-color: var(--bu-line); }
:root body .popover .listing, :root body .dropdown-menu a, :root body .menu a { color: #c3cfe0; }
:root body .box, :root body .boxcontent, :root body .formcontainer { background-color: var(--bu-bg); color: var(--bu-text); border-color: var(--bu-line); }
:root body .nav-tabs, :root body .nav-tabs .nav-link { border-color: var(--bu-line); color: var(--bu-muted); }
:root body .nav-tabs .nav-link.active { background: var(--bu-panel); color: #7aaeff; border-color: var(--bu-line); }
:root body .propform td.title, :root body .form-group label, :root body .subtitle { color: #b9c7d9; }
:root body .hint, :root body .text-muted { color: var(--bu-muted) !important; }
:root body #password-result { border-radius: 9px; padding: 14px 16px; }
:root body #password-result.alert-success { background: #133d32; color: #c8f5e1; border: 1px solid #246951; }
:root body #password-result.alert-danger { background: #48232a; color: #ffd7dd; border: 1px solid #80414d; }
/* Login keeps Roundcube's native form, labels, CSRF token and submit command. */
:root body.task-login { min-height: 100vh; overflow-y: auto; background: var(--bu-bg) url('constellation.svg') center center / cover no-repeat; }
:root body.task-login #layout { min-height: 100vh; height: auto; display: flex; justify-content: center; align-items: flex-start; padding: 134px 24px 70px; background: transparent; }
:root body.task-login #layout-content { width: 100%; max-width: 460px; height: auto; min-height: 0; flex: 0 1 460px; background: transparent; overflow: visible; padding: 0; margin: 0; border: 0; }
:root body.task-login .bu-topbar { position: absolute; top: 0; left: 0; right: 0; height: 76px; padding: 0 32px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #1c2735; background: #0a1018; }
:root body.task-login .bu-brand { display: inline-flex; align-items: center; gap: 11px; color: #f4f7fc; font-size: 23px; font-weight: 700; letter-spacing: -.8px; text-decoration: none; }
:root body.task-login .bu-brand svg { width: 36px; height: 36px; }
:root body.task-login .bu-domain { color: #8d9bb0; font-weight: 500; }
:root body.task-login .bu-topbar-label { padding-left: 24px; border-left: 1px solid #253142; color: #b8c6d9; font-size: 14px; }
:root body.task-login #login-form { width: 100%; max-width: none; margin: 0; padding: 32px; border: 1px solid var(--bu-line); border-radius: 14px; background: #111923; box-shadow: 0 16px 48px rgba(0,0,0,.16); }
:root body.task-login .bu-eyebrow { display: block; font-size: 11px; letter-spacing: 1.8px; font-weight: 700; color: #72a6fb; margin-bottom: 12px; }
:root body.task-login .bu-login-heading h1 { font-size: 25px; line-height: 1.3; letter-spacing: -.65px; font-weight: 650; margin: 0 0 10px; color: #f3f6fc; }
:root body.task-login .bu-login-heading p { color: var(--bu-muted); font-size: 14px; line-height: 1.5; margin: 0 0 28px; }
:root body.task-login #login-form table { width: 100%; margin: 0; }
:root body.task-login #login-form tr.form-group { display: block; margin: 0 0 20px; }
:root body.task-login #login-form td.title { display: block !important; width: auto; padding: 0 0 8px; font-size: 13px; font-weight: 600; }
:root body.task-login #login-form td.title label { margin: 0; color: #c7d3e4; }
:root body.task-login #login-form td.input { display: flex; width: 100%; padding: 0; }
:root body.task-login #login-form .input-group-prepend { display: none; }
:root body.task-login #login-form .form-control { height: 46px; width: 100%; border: 1px solid #2a3749; background: #0b121c; color: #f1f5fb; border-radius: 8px !important; padding: 10px 13px; font-size: 14px; }
:root body.task-login #login-form .form-control:focus { border-color: #4a8efa; box-shadow: 0 0 0 3px rgba(36,118,243,.16); }
:root body.task-login #login-form .formbuttons { margin: 8px 0 0; }
:root body.task-login #rcmloginsubmit { min-height: 46px; font-size: 14px; font-weight: 600; text-transform: none !important; letter-spacing: 0; box-shadow: 0 3px 12px rgba(36,118,243,.15); }
:root body.task-login #login-footer { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bu-line); color: #8797ad; font-size: 12px; text-align: center; }
:root body.task-login #messagestack { max-width: 460px; }
:root body.task-login .noscriptwarning { color: #ffcc7a; }
@media (min-width: 1200px) {
  :root body .bu-app-logo > span { display: inline; }
}
@media (max-width: 520px) {
  :root body.task-login #layout { padding: 108px 18px 40px; }
  :root body.task-login .bu-topbar { height: 68px; padding: 0 20px; gap: 18px; }
  :root body.task-login .bu-topbar-label { padding-left: 18px; }
  :root body.task-login #login-form { padding: 26px 22px; border-radius: 12px; }
  :root body.task-login .bu-login-heading h1 { font-size: 23px; }
}

:root body.task-login #login-form { position: static; top: auto; text-align: left; }
:root body.task-login #rcmloginsubmit { background: var(--bu-blue); border-color: var(--bu-blue); color: #fff; }
:root body.task-login #rcmloginsubmit:hover { background: #3985fc; border-color: #3985fc; }

/* A quiet animated sky and a more spacious login card. */
:root body.task-login {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(31, 76, 145, .13), transparent 52%),
    radial-gradient(ellipse at 80% 95%, rgba(35, 63, 114, .08), transparent 45%),
    #080d14;
}
:root body.task-login .bu-night-sky {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; animation: bu-sky-in 1.4s ease-out both;
}
:root body.task-login #layout {
  position: relative; z-index: 1; box-sizing: border-box;
  min-height: 100vh; min-height: 100svh;
  padding: 112px 24px 60px; align-items: center;
}
:root body.task-login .bu-topbar {
  height: 72px; z-index: 3; border-bottom-color: #1a2432;
  background: rgba(8, 13, 20, .85); backdrop-filter: blur(12px);
}
:root body.task-login .bu-brand { font-size: 22px; letter-spacing: -.7px; }
:root body.task-login .bu-brand svg { filter: drop-shadow(0 3px 10px rgba(36,118,243,.16)); }
:root body.task-login #login-form {
  position: relative; padding: 40px; border-radius: 18px;
  border-color: #28374b;
  background: linear-gradient(145deg, rgba(22,31,44,.97), rgba(13,21,32,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 0 60px rgba(36,118,243,.035);
  animation: bu-card-in .5s cubic-bezier(.2,.7,.25,1) both;
}
:root body.task-login #login-form::before {
  content: ''; position: absolute; left: 32px; right: 32px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #668cc366, transparent);
  pointer-events: none;
}
:root body.task-login .bu-eyebrow { letter-spacing: 2.1px; color: #83aff4; margin-bottom: 14px; }
:root body.task-login .bu-login-heading h1 { font-size: 32px; font-weight: 650; letter-spacing: -.9px; margin-bottom: 9px; }
:root body.task-login .bu-login-heading p { font-size: 14px; margin-bottom: 32px; color: #9daec5; }
:root body.task-login #login-form tr.form-group { margin-bottom: 22px; }
:root body.task-login #login-form .form-control {
  height: 50px; padding: 12px 14px; border-radius: 10px !important;
  border-color: #2a3749; background: #0b121d;
  transition: border-color .18s, box-shadow .18s;
}
:root body.task-login #rcmloginsubmit {
  min-height: 50px; border-radius: 10px;
  background: linear-gradient(180deg, #3184ff, #226deb);
  border-color: #3a85f4; box-shadow: 0 6px 20px rgba(28,104,235,.18);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
:root body.task-login #rcmloginsubmit:hover {
  background: linear-gradient(180deg, #4390ff, #2d78f5);
  box-shadow: 0 8px 24px rgba(28,104,235,.24); transform: translateY(-1px);
}
:root body.task-login #rcmloginsubmit:active { transform: translateY(0); }
:root body.task-login #login-footer { margin-top: 28px; padding-top: 22px; border-color: #253247; color: #8798b1; }
@keyframes bu-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bu-sky-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) {
  :root body.task-login #layout { padding: 98px 18px 32px; }
  :root body.task-login .bu-topbar { height: 66px; padding: 0 20px; }
  :root body.task-login #login-form { padding: 30px 24px; border-radius: 16px; }
  :root body.task-login .bu-login-heading h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  :root body.task-login .bu-night-sky, :root body.task-login #login-form { animation: none; }
  :root body.task-login #login-form .form-control, :root body.task-login #rcmloginsubmit { transition: none; }
  :root body.task-login #rcmloginsubmit:hover { transform: none; }
}

/* Give desktop navigation room for both the icon and its native label. */
@media (min-width: 1025px) {
  :root.layout-large body #layout-menu { width: 168px; flex: 0 0 168px; position: relative; }
  :root.layout-large body #taskmenu { width: 100%; }
  :root.layout-large body #taskmenu .action-buttons,
  :root.layout-large body #taskmenu .special-buttons { width: 100%; }
  :root.layout-large body #taskmenu a {
    display: flex; align-items: center; justify-content: flex-start; column-gap: 10px;
    width: auto; max-width: none; height: 44px; margin: 5px 10px; padding: 10px 12px;
    text-align: left; font-size: 13px;
  }
  :root.layout-large body #taskmenu a::before {
    display: inline-block; flex: 0 0 20px; width: 20px; margin: 0 11px 0 0;
    font-size: 17px; line-height: 24px; text-align: center;
  }
  :root.layout-large body #taskmenu a .inner { display: inline; }
  :root.layout-large body .bu-app-logo { justify-content: flex-start; padding: 0 20px; }
  :root.layout-large body .bu-app-logo > span { display: inline; }
}

/* Keep an empty preview from taking up most of the mailbox. */
:root body.task-mail.action-none.bu-mail-list:not(.bu-reading) #layout-content {
  display: none;
}
:root body.task-mail.action-none.bu-mail-list:not(.bu-reading) #layout-list {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  max-width: none;
}
@media (min-width: 1025px) {
  :root body.task-mail.action-none.bu-mail-list:not(.bu-reading) #layout-sidebar {
    width: 240px !important;
    flex: 0 0 240px;
    max-width: 240px;
  }
}