/*
 * Hyper Parameter Oasis - Login Page Styles
 * Centered card with ocean gradient background
 */

/* === Page Layout === */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--color-ocean-deep) 0%, var(--color-ocean-mid) 50%, var(--color-lagoon) 100%);
  position: relative;
}

/* Light mode: warm sky-to-sand gradient like landing page */
[data-theme="light"] .login-page {
  background: linear-gradient(135deg, #d0e8f0 0%, #e0d8c8 50%, #d4c4a8 100%);
}

/* === Theme Toggle (top-right corner) === */
.login-theme-toggle {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.login-theme-toggle svg {
  width: 20px;
  height: 20px;
  color: white;
}

[data-theme="light"] .login-theme-toggle {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .login-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .login-theme-toggle svg {
  color: #1a1a1a;
}

/* === Login Card === */
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
}

.login-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.login-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.login-form {
  margin-bottom: var(--space-md);
}

.login-error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  display: none;
}

.login-error.visible {
  display: block;
}

.login-remember {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.login-submit {
  width: 100%;
}

[data-theme="dark"] .login-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .login-error {
  background: rgba(248, 113, 113, 0.1);
}

.login-legal {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}