/* Nerkhche authentication pages: shared branding, themes and mobile sizing. */

html {
  min-width: 0;
  min-height: 100%;
  color-scheme: dark;
}

html[data-theme="light"] { color-scheme: light; }

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.glow {
  width: min(600px, 100vw) !important;
  height: min(600px, 100vw) !important;
  max-width: none;
}

.card,
.forgot-card {
  min-width: 0;
  max-width: 100%;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .24) !important;
}

.logo-wrap img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .32));
}

.logo-wrap .title {
  font-size: 24px !important;
}

button,
.btn,
.btn-login,
.forgot-close,
.form-group input {
  min-height: 44px;
}

.forgot-close {
  min-width: 44px;
}

.forgot-wrap a,
.back-link a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-group input:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-login:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.error-msg[role="alert"],
.success-msg[role="status"] {
  line-height: 1.7;
}

.icon svg {
  display: inline-block;
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#loading .icon { color: var(--accent); }
#success .icon { color: var(--accent); }
#error .icon { color: var(--down); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

html[data-theme="light"] {
  --bg: #f2eee6;
  --bg2: rgba(255, 253, 248, .96);
  --bg3: #f6f3ec;
  --border: rgba(39, 104, 102, .22);
  --text: #173236;
  --text2: #3f6062;
  --text3: #4d6869;
  --accent: #076f6b;
  --down: #a82f49;
}

html[data-theme="light"] .forgot-wrap a,
html[data-theme="light"] .back-link a,
html[data-theme="light"] .bottom-link,
html[data-theme="light"] .bottom-link a {
  color: #375557;
}

html[data-theme="light"] .error-msg {
  color: #9d243e;
  background: rgba(157, 36, 62, .08);
  border-color: rgba(157, 36, 62, .28);
}

html[data-theme="light"] .success-msg {
  color: #076f6b;
  border-color: rgba(7, 111, 107, .28);
}

html[data-theme="light"] body {
  background: var(--bg) url('../assets/backgrounds/nerkhche-light-20260723.webp') center/cover fixed no-repeat;
}

html[data-theme="light"] .card,
html[data-theme="light"] .forgot-card {
  box-shadow: 0 22px 60px rgba(56, 74, 67, .14);
}

html[data-theme="light"] .glow {
  background: radial-gradient(circle, rgba(10, 151, 147, .08) 0%, transparent 70%);
}

@media (max-width: 480px) {
  html[data-theme="dark"] body {
    background-color: #061115 !important;
    background-image:
      linear-gradient(rgba(3, 13, 20, .18), rgba(3, 13, 20, .34)),
      url("../assets/backgrounds/nerkhche-dark-mobile-20260724.webp") !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
    background-attachment: fixed, fixed !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  html[data-theme="light"] body {
    background-color: #eee9df !important;
    background-image:
      url("../assets/backgrounds/nerkhche-light-mobile-20260724.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }

  body {
    padding: 14px;
  }

  .card {
    width: 100%;
    margin: 0 !important;
    padding: 26px 20px !important;
  }

  .forgot-overlay {
    padding: 14px;
  }

  .forgot-card {
    padding: 28px 20px;
  }

  .logo-wrap {
    margin-bottom: 24px !important;
  }
}

@media (max-height: 700px) {
  body {
    align-items: flex-start !important;
  }
}