/* Страницы авторизации: кнопка смены темы и тёмная тема (body.dark-only).
   Цвета — те же, что у тёмной темы кабинета в style.css. */

.auth-theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ecf3fa;
  border-radius: 50%;
  background-color: #fff;
  color: #2c323f;
  box-shadow: 0 0 37px rgba(8, 21, 66, 0.05);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.auth-theme-toggle svg {
  width: 18px;
  height: 18px;
}

.auth-theme-toggle:hover {
  color: var(--theme-deafult);
}

.auth-theme-toggle:focus {
  outline: none;
}

.auth-theme-toggle:focus-visible {
  outline: 2px solid var(--theme-deafult);
  outline-offset: 2px;
}

body.dark-only .auth-theme-toggle {
  background-color: #262932;
  border-color: #374558;
  color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

body.dark-only .auth-theme-toggle:hover {
  color: var(--theme-deafult);
}

/* Фон страницы: светлая картинка в тёмной теме не подходит */
body.dark-only .login-card {
  background: #1d1e26;
}

body.dark-only .login-card .login-main {
  background-color: #262932;
  border: 1px solid #374558;
}

body.dark-only .login-card .login-main .theme-form h4 {
  color: rgba(255, 255, 255, 0.85);
}

body.dark-only .login-card .login-main .theme-form label {
  color: rgba(255, 255, 255, 0.7);
}

body.dark-only .login-card .login-main .theme-form .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* В style.css поля и чекбокс в тёмной теме того же цвета, что и карточка, — сливаются */
body.dark-only .login-card .login-main .theme-form input.form-control {
  background-color: #1d1e26 !important;
  border: 1px solid #374558;
  color: rgba(255, 255, 255, 0.85);
}

body.dark-only .login-card .login-main .theme-form input.form-control:hover,
body.dark-only .login-card .login-main .theme-form input.form-control:focus {
  border-color: #4f5f78;
}

body.dark-only .login-card .login-main .theme-form input.form-control.is-invalid {
  border-color: #dc3545;
}

/* Автозаполнение браузера иначе красит поле в светло-голубой */
body.dark-only .login-card .login-main .theme-form input.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1d1e26 inset !important;
  box-shadow: 0 0 0 1000px #1d1e26 inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  caret-color: rgba(255, 255, 255, 0.85);
}

body.dark-only .login-card .login-main .theme-form .checkbox label::before,
body.dark-only .login-card .login-main .theme-form .form-check-input {
  background-color: #1d1e26 !important;
  border: 1px solid #374558 !important;
}

body.dark-only .login-card .login-main .theme-form .form-check-input:checked {
  background-color: var(--theme-deafult) !important;
  border-color: var(--theme-deafult) !important;
}

@media only screen and (max-width: 575.98px) {
  .auth-theme-toggle {
    top: 14px;
    right: 14px;
  }

  /* Место под кнопку, когда форма выше экрана и прижата к верху */
  .login-card {
    padding-top: 68px;
  }
}