/* Hostwover Webmail Theme */

/* Fixed switch top-right */
#hostwover-theme-switcher {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 99999;
}

#hostwover-theme-toggle {
  width: 62px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

#hostwover-theme-toggle .hostwover-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 14px;
  z-index: 2;
  pointer-events: none;
}

#hostwover-theme-toggle .hostwover-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  transition: transform 0.22s ease;
  z-index: 1;
}

#hostwover-theme-toggle.is-light {
  background: #e6f7f1;
}

#hostwover-theme-toggle.is-light .hostwover-handle {
  transform: translateX(0);
}

#hostwover-theme-toggle.is-light .sun {
  color: #00a86b;
}

#hostwover-theme-toggle.is-light .moon {
  color: #64748b;
}

#hostwover-theme-toggle.is-dark {
  background: #00a86b;
}

#hostwover-theme-toggle.is-dark .hostwover-handle {
  transform: translateX(28px);
}

#hostwover-theme-toggle.is-dark .sun {
  color: rgba(255, 255, 255, 0.7);
}

#hostwover-theme-toggle.is-dark .moon {
  color: #ffffff;
}

/* Shared login form */
body.task-login #login-form {
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(18px);
}

body.task-login .button.mainaction,
body.task-login button.mainaction,
body.task-login input.button.mainaction {
  background: #00a86b !important;
  border-color: #00a86b !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

body.task-login .button.mainaction:hover,
body.task-login button.mainaction:hover,
body.task-login input.button.mainaction:hover {
  background: #00945f !important;
  border-color: #00945f !important;
}

/* Dark mode */
html[data-hostwover-theme="dark"] body.task-login {
  background:
    radial-gradient(circle at top left, rgba(0, 168, 107, 0.14), transparent 34%),
    radial-gradient(circle at top right, rgba(0, 168, 107, 0.10), transparent 30%),
    linear-gradient(135deg, #101b1f 0%, #1c292d 50%, #0f171a 100%) !important;
  color: #d7e6ea !important;
}

html[data-hostwover-theme="dark"] body.task-login #layout,
html[data-hostwover-theme="dark"] body.task-login #layout-content {
  background: transparent !important;
}

html[data-hostwover-theme="dark"] body.task-login #login-form {
  background: rgba(18, 31, 35, 0.78) !important;
  border: 1px solid rgba(0, 168, 107, 0.24) !important;
}

html[data-hostwover-theme="dark"] body.task-login input {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  color: #e2e8f0 !important;
}

html[data-hostwover-theme="dark"] body.task-login input::placeholder {
  color: #9fb5bd !important;
}

html[data-hostwover-theme="dark"] body.task-login #login-footer,
html[data-hostwover-theme="dark"] body.task-login #login-footer a {
  color: #b6cbd1 !important;
}

/* Light mode */
html[data-hostwover-theme="light"] body.task-login {
  background:
    radial-gradient(circle at top left, rgba(0, 168, 107, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(0, 132, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #f7fbff 0%, #eef8f5 45%, #ffffff 100%) !important;
  color: #0f172a !important;
}

html[data-hostwover-theme="light"] body.task-login #layout,
html[data-hostwover-theme="light"] body.task-login #layout-content {
  background: transparent !important;
}

html[data-hostwover-theme="light"] body.task-login #login-form {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(0, 168, 107, 0.18) !important;
}

html[data-hostwover-theme="light"] body.task-login input {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  color: #0f172a !important;
}

html[data-hostwover-theme="light"] body.task-login input::placeholder {
  color: #64748b !important;
}

html[data-hostwover-theme="light"] body.task-login #login-footer,
html[data-hostwover-theme="light"] body.task-login #login-footer a {
  color: #334155 !important;
}

@media (max-width: 640px) {
  #hostwover-theme-switcher {
    top: 14px;
    right: 14px;
  }
}