/* Почта 111.bz — надстройка над стандартной темой Elastic.
   Правится только этот файл; обновления Roundcube его не трогают. */

@import url("../../elastic/styles/styles.min.css");

:root {
  --m-bg-1: #eef2f7;
  --m-bg-2: #e3e9f2;
  --m-card: #ffffff;
  --m-ink: #1f2c3d;
  --m-muted: #7a8798;
  --m-line: #dde4ec;
  --m-accent: #4a90d9;
  --m-accent-dark: #2f6fb5;
  --m-radius: 16px;
}

/* ------------------------------------------------------------------ фон */
html body.task-login,
html body.task-login #layout {
  background: radial-gradient(130% 100% at 50% -10%, #f4f7fb 0%, #dfe7f1 55%, #d3ddea 100%);
}

/* ------------------------------------------------------- карточка формы
   Обёртка .login-card добавлена своим шаблоном templates/login.html. */
body.task-login #layout-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: none;
  box-shadow: none;
  border: 0;
}

body.task-login .login-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  padding: 44px 38px 32px;
  background: var(--m-card);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 26px;
  box-shadow:
    0 1px 2px rgba(31, 44, 61, .05),
    0 14px 34px -10px rgba(31, 44, 61, .16),
    0 40px 70px -30px rgba(31, 44, 61, .22);
}

/* Elastic сдвигает логотип через position:relative + top — возвращаем в поток */
body.task-login #layout-content #logo {
  display: block;
  position: static !important;
  top: auto !important;
  max-width: 190px;
  margin: 0 auto 30px !important;
  padding: 0 !important;
}

body.task-login .login-card #login-form { position: static; }
body.task-login .login-card .formbuttons { margin: 0; }

body.task-login .login-card #login-form { margin: 0; }

/* подпись сервиса — внутри карточки, приглушённая */
body.task-login #login-footer {
  margin-top: 22px;
  color: var(--m-muted);
  font-size: 13px;
  text-align: center;
}

/* -------------------------------------------------------------------- поля */
body.task-login #login-form .row {
  margin-bottom: 14px;
}

body.task-login #login-form .input-group {
  border: 1.5px solid var(--m-line);
  border-radius: var(--m-radius);
  background: #f7f9fc;
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body.task-login #login-form .input-group:focus-within {
  border-color: var(--m-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.15);
}

body.task-login #login-form .input-group > .input-group-prepend .input-group-text,
body.task-login #login-form .input-group .icon {
  background: transparent;
  border: 0;
  color: var(--m-muted);
  padding-left: 18px;
}

body.task-login #login-form input.form-control {
  height: 56px;
  padding: 0 18px;
  font-size: 16px;
  color: var(--m-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.task-login #login-form input.form-control::placeholder { color: #a9b4c2; }
body.task-login #login-form input.form-control:focus { box-shadow: none; }

/* ------------------------------------------------------------------ кнопка */
body.task-login #login-form button.btn,
body.task-login #login-form #rcmloginsubmit {
  position: relative;
  width: 100%;
  height: 56px;
  margin-top: 22px;
  border: 0;
  border-radius: var(--m-radius);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, var(--m-accent) 0%, var(--m-accent-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 6px 18px -4px rgba(47, 111, 181, .5);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: transform .16s cubic-bezier(.2,.8,.3,1),
              box-shadow .22s ease, filter .22s ease;
}

/* блик, пробегающий по стеклу при наведении */
body.task-login #login-form button.btn::after,
body.task-login #login-form #rcmloginsubmit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.42) 48%,
      rgba(255,255,255,0) 66%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.25,.8,.3,1);
  pointer-events: none;
}

body.task-login #login-form button.btn:hover,
body.task-login #login-form #rcmloginsubmit:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 10px 26px -6px rgba(47, 111, 181, .55);
}

body.task-login #login-form button.btn:hover::after,
body.task-login #login-form #rcmloginsubmit:hover::after {
  transform: translateX(120%);
}

body.task-login #login-form button.btn:active,
body.task-login #login-form #rcmloginsubmit:active {
  transform: translateY(1px) scale(.995);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .18),
    0 3px 10px -4px rgba(47, 111, 181, .45);
}

body.task-login #login-form button.btn:focus-visible,
body.task-login #login-form #rcmloginsubmit:focus-visible {
  outline: 3px solid rgba(74, 144, 217, .45);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ подпись */
/* -------------------------------------------------------------- тёмная тема */
@media (prefers-color-scheme: dark) {
  body.task-login:not(.dark-mode) {
    --m-card: #1b2432;
    --m-ink: #e8edf4;
    --m-muted: #8f9cad;
    --m-line: #2c3849;
  }
  html body.task-login:not(.dark-mode),
  html body.task-login:not(.dark-mode) #layout {
    background: radial-gradient(130% 100% at 50% -10%, #232f40 0%, #151d28 100%);
  }
  body.task-login:not(.dark-mode) .login-card {
    background: var(--m-card);
    border-color: rgba(255,255,255,.07);
    box-shadow: 0 26px 64px -22px rgba(0,0,0,.65);
  }
  body.task-login:not(.dark-mode) #login-form .input-group { background: #141c27; }
  body.task-login:not(.dark-mode) #login-form .input-group:focus-within { background: #18212e; }
  body.task-login:not(.dark-mode) #login-form .box-inner {
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  }
}

body.task-login.dark-mode {
  --m-card: #1b2432;
  --m-ink: #e8edf4;
  --m-muted: #8f9cad;
  --m-line: #2c3849;
}
html body.task-login.dark-mode,
html body.task-login.dark-mode #layout {
  background: radial-gradient(130% 100% at 50% -10%, #232f40 0%, #151d28 100%);
}
body.task-login.dark-mode .login-card {
  background: var(--m-card);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 26px 64px -22px rgba(0,0,0,.65);
}
body.task-login.dark-mode #login-form .input-group { background: #141c27; }

/* ------------------------------------------ мелочи внутри самой почты */
#messagelist tr.unread td,
.messagelist tr.unread td { font-weight: 600; }

.folderlist li a { border-radius: 10px; }