/* ========================================================================== */
/* Login Page Styles — Apple Futuristic Premium                                */
/* ========================================================================== */

/* Login container: dark gradient with subtle depth */
.login-container {
  background: radial-gradient(ellipse at 50% 30%, rgba(0,122,255,0.06) 0%, #000 60%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Decorative ambient orbs */
.login-container::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,122,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.login-container::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,60,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Login form card: elevated glass with layered shadow */
.login-container form {
  background: rgba(28, 28, 30, 0.92) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.05),
    0 0 80px rgba(0,122,255,0.06),
    0 4px 16px rgba(0,0,0,0.3),
    0 20px 60px rgba(0,0,0,0.4),
    0 40px 80px rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  position: relative;
  z-index: 1;
}

/* Input fields: recessed with precise borders */
.login-container input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  transition: border-color 0.25s ease, background 0.2s ease, box-shadow 0.25s ease !important;
}

.login-container input::placeholder {
  color: var(--text-placeholder) !important;
  opacity: 1 !important;
}

.login-container input:focus {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(0, 122, 255, 0.6) !important;
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.12) !important;
  outline: none !important;
}

/* Submit button: premium Apple blue with depth */
.login-container button[type="submit"] {
  background: linear-gradient(180deg, #339dff 0%, #0066d6 100%) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,102,214,0.35) !important;
  transition: all 0.2s ease !important;
}

.login-container button[type="submit"]:hover {
  background: linear-gradient(180deg, #52b0ff 0%, #0077ee 100%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 8px 24px rgba(0,102,214,0.4) !important;
}

.login-container button[type="submit"]:active {
  transform: scale(0.98) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 2px 8px rgba(0,122,255,0.2) !important;
}

/* Link hover states */
.login-container a, .login-container button:not([type="submit"]) {
  transition: color 0.15s ease, opacity 0.15s ease !important;
}
.login-container a:hover, .login-container button:not([type="submit"]):hover {
  opacity: 0.8 !important;
}

/* ─── Light Mode ─── */
[data-theme="light"] .login-container {
  background: linear-gradient(135deg, #dfe6f0 0%, #f2f2f7 50%, #e8e8f0 100%) !important;
}

[data-theme="light"] .login-container form {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.03),
    0 4px 16px rgba(0,0,0,0.04),
    0 20px 60px rgba(0,0,0,0.06),
    0 40px 80px rgba(0,0,0,0.03) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}

[data-theme="light"] .login-container input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
}

[data-theme="light"] .login-container input::placeholder {
  color: var(--text-placeholder) !important;
}

[data-theme="light"] .login-container input:focus {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 122, 255, 0.5) !important;
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.08) !important;
}

[data-theme="light"] .login-container button[type="submit"] {
  background: linear-gradient(180deg, #339dff 0%, #0066d6 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 16px rgba(0,102,214,0.25) !important;
}

