/* Login and Signup Form Styles */

/* Main form container */
.auth-form-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center; /* Center inline-block h2 elements */
}

.auth-form-container-wide {
  max-width: 600px;
  margin: 0 auto;
  text-align: center; /* Center inline-block h2 elements */
}

.auth-form-container h2 {
  margin-bottom: 2rem;
  color: #f1f3f5;
  /* Removed text-align: center since parent now centers inline-block elements */
}

/* Ensure Sign Up title is centered too */
.auth-form-container-wide h2 {
  margin-bottom: 2rem;
  color: #f1f3f5;
  /* Removed text-align: center since parent now centers inline-block elements */
}

/* Reset text alignment for form content to left-align */
.auth-form,
.auth-flash-messages {
  text-align: left;
}

/* TOTP setup keeps its own centering - handled separately */

/* Flash messages */
.auth-flash-messages {
  margin-bottom: 1.5rem;
}

.auth-flash-message {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.auth-flash-error {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #ff6b7d;
}

.auth-flash-success {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #51cf66;
}

.auth-flash-info {
  background: rgba(124, 77, 255, 0.1);
  border: 1px solid rgba(124, 77, 255, 0.3);
  color: #7c4dff;
  text-align: center;
}

.auth-flash-warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #ffd43b;
}

/* Form styling */
.auth-form {
  background: #111114;
  border: none; /* removed subtle grey border */
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Form groups */
.auth-form-group {
  margin-bottom: 1.5rem;
}

.auth-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #f1f3f5;
  font-weight: 600;
}

.auth-form-group.center-label label {
  text-align: center;
}

/* Form inputs */
.auth-input {
  width: 100%;
  background: #0f0f12;
  border: 1px solid #1e1e22;
  color: #f1f3f5;
  padding: 0.75rem;
  border-radius: 6px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus {
  border-color: #7c4dff;
  box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.1);
  outline: none;
}

/* 2FA specific input */
.auth-input-2fa {
  max-width: 200px;
  font-family: monospace;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  margin: 0 auto;
  display: block;
}

/* Regular 2FA input (in signup) */
.auth-input-2fa-regular {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
}

/* Small helper text */
.auth-input-help {
  color: #a6adbb;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: block;
  text-align: center;
}

/* Buttons */
.auth-btn {
  width: 100%;
  max-width: 100%; /* prevent overflow in padded containers */
  box-sizing: border-box; /* include padding and border in width */
  display: block; /* ensure anchors span full width */
  text-align: center; /* center text for anchors */
  text-decoration: none; /* remove underline on links */
  background: linear-gradient(135deg, #7c4dff 0%, #6a3fff 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.3);
  margin-bottom: 1rem;
}

.auth-btn:hover {
  background: linear-gradient(135deg, #7452ff 0%, #5f3cf2 100%); /* slightly darker purple gradient */
  color: white; /* keep text color the same */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(124, 77, 255, 0.4);
}

.auth-btn:active {
  transform: translateY(0);
}

/* Sign up button variant */
.auth-btn-signup {
  background: linear-gradient(135deg, #7aa9ff 0%, #6a96ff 100%);
  box-shadow: 0 2px 4px rgba(122, 169, 255, 0.3);
}

.auth-btn-signup:hover {
  /* no background change on hover */
  box-shadow: 0 4px 8px rgba(122, 169, 255, 0.4);
}

/* New: Secondary/neutral button variant */
.auth-btn-secondary {
  background: linear-gradient(135deg, #4a4f56 0%, #3a3f46 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.auth-btn.auth-btn-secondary:hover {
  background: linear-gradient(135deg, #5a6068 0%, #4a5058 100%); /* slightly lighter gray gradient */
  color: #ffffff; /* keep text color the same */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Auth navigation/links */
.auth-nav {
  text-align: center;
  margin-top: 1.5rem;
}

.auth-nav p {
  color: #a6adbb;
  margin-bottom: 0.5rem;
}

.auth-link {
  color: #7aa9ff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid #7aa9ff;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-block;
}

.auth-link:hover {
  background: #7aa9ff;
  color: #0a0a0a;
  transform: translateY(-1px);
}

/* Signup specific styles - definition moved to top of file */

/* TOTP setup section */
.totp-setup {
  background: #111114;
  border: 1px solid #1e1e22;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
  text-align: center;
}

.totp-setup h3 {
  color: #7c4dff;
  margin-bottom: 1rem;
}

.totp-setup p {
  color: #a6adbb;
  margin-bottom: 1.5rem;
}

.totp-qr-container {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.totp-qr-container img {
  max-width: 200px;
}

.totp-manual-setup {
  background: #0f0f12;
  border: 1px solid #1e1e22;
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.totp-manual-setup p {
  margin: 0.5rem 0;
  color: #a6adbb;
}

.totp-manual-setup code {
  background: #1e1e22;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  color: #7c4dff;
  word-break: break-all;
}

/* Password requirements list */
.pw-reqs {
  list-style: none;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0 0;
  background: #0f0f12;
  border: 1px solid #1e1e22;
  border-radius: 8px;
}
.pw-req {
  color: #ff6b7d; /* red by default */
  font-size: 0.9rem;
  margin: 0.25rem 0;
  position: relative;
  padding-left: 1.25rem;
}
.pw-req::before {
  content: '✗';
  position: absolute;
  left: 0.25rem;
  color: #ff6b7d;
}
.pw-req.ok {
  color: #51cf66; /* green when satisfied */
}
.pw-req.ok::before {
  content: '✓';
  color: #51cf66;
}