/* SitePlus Dark Theme for Auth Pages */

/* Global submit button override (broader selectors for DevDojo auth) */
button[type="submit"],
form button,
[type="submit"] {
  background: linear-gradient(135deg, #10b981, #06b6d4) !important;
  border: none !important;
}

/* Page background */
body,
html {
  background-color: #0f172a !important;
}

/* Auth container card */
#auth-container {
  border: 0px;
  background-color: #1e293b !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Heading */
#auth-heading-title {
  padding-top: 8px;
  color: #ffffff !important;
}

#auth-heading-subtitle {
  color: #94a3b8 !important;
}

/* All text elements */
#auth-container label,
#auth-container p,
#auth-container span,
#auth-container div {
  color: #e2e8f0;
}

/* Input fields */
#auth-container input[type="text"],
#auth-container input[type="email"],
#auth-container input[type="password"],
#auth-container input[type="tel"],
#auth-container input[type="number"],
#auth-container select,
#auth-container textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

#auth-container input::placeholder,
#auth-container textarea::placeholder {
  color: #64748b !important;
}

/* Input focus state */
#auth-container input:focus,
#auth-container select:focus,
#auth-container textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}

/* Primary button */
#auth-container button[type="submit"],
#auth-container .auth-submit-btn {
  background: linear-gradient(135deg, #10b981, #06b6d4) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

#auth-container button[type="submit"]:hover,
#auth-container .auth-submit-btn:hover {
  background: linear-gradient(135deg, #059669, #0891b2) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Links */
#auth-container a {
  color: #10b981 !important;
  transition: color 0.2s ease !important;
}

#auth-container a:hover {
  color: #34d399 !important;
}

/* Checkbox styling */
#auth-container input[type="checkbox"] {
  accent-color: #10b981 !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* Social login buttons */
#auth-container [class*="social"],
#auth-container button:not([type="submit"]) {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

#auth-container [class*="social"]:hover,
#auth-container button:not([type="submit"]):hover {
  background-color: #1a2740 !important;
  border-color: #475569 !important;
}

/* Error/validation messages */
#auth-container .text-red-500,
#auth-container [class*="error"],
#auth-container [class*="invalid"] {
  color: #f87171 !important;
}

/* Success messages */
#auth-container .text-green-500,
#auth-container [class*="success"] {
  color: #34d399 !important;
}

/* Logo/brand area */
#auth-container .logo,
#auth-container [class*="logo"] {
  color: #ffffff !important;
}

/* Divider/separator */
#auth-container hr,
#auth-container [class*="divider"],
#auth-container [class*="separator"] {
  border-color: #334155 !important;
}

/* "or" text between social and email login */
#auth-container [class*="or-text"],
#auth-container [class*="separator"] span {
  color: #64748b !important;
  background-color: #1e293b !important;
}

/* Password reset success message — override green to teal */
#auth-container .bg-green-50,
#auth-container .dark\:bg-green-600 {
  background-color: rgba(20, 184, 166, 0.1) !important;
  border: 1px solid rgba(20, 184, 166, 0.3) !important;
  border-radius: 8px !important;
}

#auth-container .bg-green-50 svg,
#auth-container .dark\:bg-green-600 svg,
#auth-container .text-green-400,
#auth-container .dark\:text-white {
  color: #14b8a6 !important;
}

#auth-container .text-green-800,
#auth-container .dark\:text-green-200 {
  color: #5eead4 !important;
}

/* Email placeholder row (after entering email on login) */
#auth-container [data-auth="email-read-only-placeholder"] {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

#auth-container [data-auth="email-read-only-placeholder"] span {
  color: #e2e8f0 !important;
}

/* Edit button — make it smaller and teal */
#auth-container [data-auth="edit-email-button"] {
  background: none !important;
  border: none !important;
  color: #14b8a6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

#auth-container [data-auth="edit-email-button"]:hover {
  color: #5eead4 !important;
  background: none !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Input label text on dark background */
#auth-container label.auth-component-input {
  background-color: #0f172a !important;
  color: #94a3b8 !important;
}

#auth-container label.auth-component-input-label-focused {
  color: #14b8a6 !important;
}

/* Scrollbar styling for dark theme */
#auth-container ::-webkit-scrollbar {
  width: 6px;
}

#auth-container ::-webkit-scrollbar-track {
  background: #1e293b;
}

#auth-container ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

#auth-container ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}