/*
 * Deploy Control — Login Page Theme v4
 * Mission Control: dark, teal accents, dot-grid backdrop
 * !important on visual props to override Frappe login.bundle.css (loads later)
 * ─────────────────────────────────────────────────────────────
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Background ───────────────────────────────────────────────── */

body[data-path="login"] {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background: #0B0E14 !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  overflow-x: hidden !important;
}

body[data-path="login"]::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,212,170,0.06) 1px, transparent 0) !important;
  background-size: 32px 32px !important;
  pointer-events: none !important;
}

body[data-path="login"]::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 600px 400px at 50% -5%, rgba(0,212,170,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 300px 500px at 80% 80%, rgba(96,165,250,0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
}


/* ── Hide Frappe chrome ───────────────────────────────────────── */

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] footer,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper {
  display: none !important;
}


/* ── Center the content ───────────────────────────────────────── */

body[data-path="login"] .page-content-wrapper {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

body[data-path="login"] .page_content {
  width: 100% !important;
  max-width: 440px !important;
}

body[data-path="login"] .container {
  max-width: 440px !important;
  padding: 0 !important;
}


/* ── Brand header ─────────────────────────────────────────────── */

body[data-path="login"] .page-card-head {
  text-align: center !important;
  padding: 0 0 28px !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
}

body[data-path="login"] .page-card-head img {
  display: none !important;
}

body[data-path="login"] .page-card-head h4 {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #545D6E !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}


/* ── Login Card ───────────────────────────────────────────────── */

body[data-path="login"] .login-content.page-card {
  background: rgba(22, 27, 38, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid #2A3347 !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 60px -20px rgba(0, 212, 170, 0.08) !important;
  overflow: hidden !important;
  animation: dc-login-appear 0.5s ease-out both !important;
  margin: 0 !important;
  padding: 0 !important;
}

@keyframes dc-login-appear {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Card body ────────────────────────────────────────────────── */

body[data-path="login"] .page-card-body {
  padding: 32px 32px 20px !important;
  background: transparent !important;
}


/* ── Form groups ──────────────────────────────────────────────── */

body[data-path="login"] .form-group {
  margin-bottom: 20px !important;
}

body[data-path="login"] .form-group label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #8B949E !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}


/* ── Inputs ───────────────────────────────────────────────────── */

body[data-path="login"] .form-control {
  background: #0F1219 !important;
  border: 1px solid #2A3347 !important;
  border-radius: 10px !important;
  color: #E6EDF3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  padding: 12px 16px 12px 42px !important;
  height: auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
}

body[data-path="login"] .form-control::placeholder {
  color: #545D6E !important;
  font-family: 'DM Sans', sans-serif !important;
}

body[data-path="login"] .form-control:focus {
  border-color: #00D4AA !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.12) !important;
  outline: none !important;
  background: #0F1219 !important;
}

/* Field icons */
body[data-path="login"] .field-icon {
  color: #545D6E !important;
}

body[data-path="login"] .email-field,
body[data-path="login"] .password-field {
  position: relative !important;
}

body[data-path="login"] .toggle-password {
  color: #545D6E !important;
  font-size: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
}

body[data-path="login"] .toggle-password:hover {
  color: #00D4AA !important;
}


/* ── Forgot Password ──────────────────────────────────────────── */

body[data-path="login"] .forgot-password-message {
  text-align: right !important;
  margin: -8px 0 0 !important;
}

body[data-path="login"] .forgot-password-message a {
  color: #545D6E !important;
  font-size: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  text-decoration: none !important;
}

body[data-path="login"] .forgot-password-message a:hover {
  color: #00D4AA !important;
}


/* ── Login Button ─────────────────────────────────────────────── */

body[data-path="login"] .page-card-actions {
  padding: 0 32px 28px !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
}

body[data-path="login"] .btn-login {
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #0B0E14 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 12px 24px !important;
  transition: all 0.2s ease !important;
  text-shadow: none !important;
}

body[data-path="login"] .btn-login:hover {
  background: linear-gradient(135deg, #00F5C4 0%, #00D4AA 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 212, 170, 0.3) !important;
  transform: translateY(-1px) !important;
}

body[data-path="login"] .btn-login:active {
  transform: translateY(0) !important;
}


/* ── Social / Email link ──────────────────────────────────────── */

body[data-path="login"] .social-logins {
  padding: 0 32px 24px !important;
}

body[data-path="login"] .login-divider {
  color: #2A3347 !important;
  font-size: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  margin: 4px 0 16px !important;
  position: relative !important;
}

body[data-path="login"] .login-divider::before,
body[data-path="login"] .login-divider::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: calc(50% - 20px) !important;
  height: 1px !important;
  background: #1E2536 !important;
}

body[data-path="login"] .login-divider::before { left: 0 !important; }
body[data-path="login"] .login-divider::after  { right: 0 !important; }

body[data-path="login"] .btn-login-option {
  background: rgba(15, 18, 25, 0.6) !important;
  border: 1px solid #2A3347 !important;
  border-radius: 10px !important;
  color: #8B949E !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  transition: all 0.2s !important;
}

body[data-path="login"] .btn-login-option:hover {
  background: rgba(42, 51, 71, 0.4) !important;
  border-color: #00D4AA !important;
  color: #E6EDF3 !important;
}


/* ── Links ────────────────────────────────────────────────────── */

body[data-path="login"] .sign-up-message,
body[data-path="login"] .page-card a:not(.btn) {
  color: #545D6E !important;
  font-size: 13px !important;
  font-family: 'DM Sans', sans-serif !important;
}

body[data-path="login"] .page-card a:not(.btn):hover {
  color: #00D4AA !important;
  text-decoration: none !important;
}


/* ── Alerts ───────────────────────────────────────────────────── */

body[data-path="login"] .alert {
  background: rgba(248, 113, 113, 0.08) !important;
  border: 1px solid rgba(248, 113, 113, 0.2) !important;
  border-radius: 8px !important;
  color: #F87171 !important;
  font-size: 13px !important;
}

body[data-path="login"] .alert-info {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  color: #60A5FA !important;
}


/* ── "Login with Email Link" section (hidden page-card) ───────── */

body[data-path="login"] section.for-login-with-email-link .page-card-head {
  text-align: center !important;
  padding: 0 0 16px !important;
  border: none !important;
  background: transparent !important;
}

body[data-path="login"] section.for-login-with-email-link .page-card-head h4 {
  color: #E6EDF3 !important;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

body[data-path="login"] section.for-login-with-email-link .login-content.page-card {
  background: rgba(22, 27, 38, 0.85) !important;
  border: 1px solid #2A3347 !important;
  border-radius: 16px !important;
}


/* ── "Forgot password" section ────────────────────────────────── */

body[data-path="login"] section.for-forgot .page-card-head h4 {
  color: #E6EDF3 !important;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

body[data-path="login"] section.for-forgot .login-content.page-card {
  background: rgba(22, 27, 38, 0.85) !important;
  border: 1px solid #2A3347 !important;
  border-radius: 16px !important;
}


/* ── Animations ───────────────────────────────────────────────── */

body[data-path="login"] .login-content.page-card > * {
  animation: dc-login-fade-up 0.4s ease-out both !important;
}

body[data-path="login"] .login-content.page-card > *:nth-child(1) { animation-delay: 0.15s !important; }
body[data-path="login"] .login-content.page-card > *:nth-child(2) { animation-delay: 0.25s !important; }
body[data-path="login"] .login-content.page-card > *:nth-child(3) { animation-delay: 0.35s !important; }

@keyframes dc-login-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 480px) {
  body[data-path="login"] .page_content { max-width: 100% !important; }
  body[data-path="login"] .page-card-body { padding: 24px 20px 16px !important; }
  body[data-path="login"] .page-card-actions { padding: 0 20px 20px !important; }
  body[data-path="login"] .social-logins { padding: 0 20px 20px !important; }
}