/**
 * Portal Login Page - scoped styles
 * Full-viewport centering + brand color for the login card.
 * Uses tokens from design-system.css / theme.css only - theme-aware
 * for both [data-theme="light"] and [data-theme="dark"].
 */

/* Login page owns its own safe-area handling instead of the global
   body padding-top, so the centered card doesn't sit off-center.
   !important is required: layout.css's desktop sidebar rule sets
   body padding-top/padding-left/padding-bottom with !important,
   assuming every page has the fixed top navbar + sidebar - login
   has neither, so that reserved space must be forced back to 0. */
body.login-body {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  overflow-x: hidden;
}

.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    16px
    calc(24px + env(safe-area-inset-bottom, 0px));
}

/* position:fixed so it isn't clipped by .login-page's overflow:hidden */
.login-theme-toggle {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 2;
}

/* Decorative brand-color glow behind the card */
.login-page::before,
.login-page::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.login-page::before {
  top: -120px;
  left: -120px;
  background: hsla(35, 98%, 55%, 0.18);
}
.login-page::after {
  bottom: -140px;
  right: -140px;
  background: hsla(197, 99%, 46%, 0.16);
}
[data-theme="dark"] .login-page::before { background: hsla(35, 98%, 55%, 0.12); }
[data-theme="dark"] .login-page::after { background: hsla(197, 99%, 46%, 0.14); }

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-color);
  border-radius: 16px;
  box-shadow: var(--theme-shadow-xl);
  overflow: hidden;
  animation: loginCardIn 0.4s ease;
}

.login-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
}

.login-card__body {
  padding: 32px 32px 28px;
}

.login-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 26px;
}

.login-card__logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

.login-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-text-primary);
  margin: 0;
}

.login-card__tagline {
  font-size: 0.8rem;
  color: var(--theme-text-muted);
  margin: 0;
}

.login-field { margin-bottom: 18px; }

.login-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.login-input-wrap { position: relative; }

.login-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.login-input-wrap .form-control {
  padding-left: 2.5rem;
}

.login-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: var(--theme-radius, 8px);
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
  color: var(--content-on-brand, #fff);
  font-weight: 600;
  box-shadow: var(--theme-shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.login-submit:hover,
.login-submit:focus {
  color: var(--content-on-brand, #fff);
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: var(--theme-shadow-lg);
}

.login-submit:active { transform: translateY(0); }

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .login-card__body { padding: 28px 20px 24px; }
  .login-card__logo { height: 58px; }
}