/* 
 * Registration Page Specific Styles
 * Extends main.css with form-focused layout and modal dialog components
 * Mobile-first responsive design with theme compatibility
 */

/* Centered registration container with optimal reading width */
.main-register {
  max-width: 720px;
  margin: 28px auto;
  padding: 18px;
}

/* Brand header alignment matching login page consistency */
.header-brand { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin-bottom:16px; 
}

/* Custom logo styling consistent with login page */
.logo-pill { 
  width:56px; 
  height:56px; 
  border-radius:10px; 
  background:linear-gradient(135deg,var(--accent),#7dd3fc); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:700; 
  color:var(--accent-contrast); 
}

/* Form field spacing with enhanced vertical rhythm */
.field { 
  margin-bottom:16px; 
}

.field label { 
  display:block; 
  margin-bottom:6px; 
  font-weight:700; 
  color:var(--text); 
}

/* Help text styling for form instructions */
.field small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Checkbox field customization for TOS agreement */
.field-checkbox {
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 0 !important;
  font-weight: normal !important;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.checkbox-text {
  font-weight: normal;
  color: var(--text);
}

/* TOS button styling within checkbox label */
.tos-button {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin: 0;
}

.tos-button:hover {
  color: var(--accent);
  text-decoration: none;
}

/* CAPTCHA input container with refresh button */
.captcha-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.captcha-container input {
  flex: 1;
}

.captcha-refresh {
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Form actions with flexible layout */
.form-actions { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  margin-top:20px;
  flex-wrap: wrap;
}

.small-link { 
  font-size:.95rem; 
  color:var(--accent); 
  text-decoration:underline; 
  background:none; 
  border:0; 
  cursor:pointer; 
}

/* Error message styling consistent with login page */
.errlist { 
  color:var(--danger); 
  background:rgba(239,68,68,0.06); 
  padding:10px; 
  border-radius:8px; 
  border:1px solid rgba(239,68,68,0.12); 
  margin-bottom: 16px;
}

/* ==========================================================================
   Terms of Service Dialog Styling
   Native HTML dialog element with backdrop styling
   ========================================================================== */
.tos-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 600px;
  width: 90vw;
  box-shadow: var(--elevation-2);
}

/* Backdrop styling for modal overlay */
.tos-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  padding: 20px;
  background: var(--card-bg);
  color: var(--text);
}

/* TOS content area with scrollable preformatted text */
.tos-content pre {
  white-space: pre-wrap;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.02);
  padding: 12px;
  border-radius: 6px;
  max-height: 400px;
  overflow-y: auto;
  margin: 12px 0;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   Touch-friendly interfaces and constrained layouts
   ========================================================================== */
@media (max-width: 720px) {
  .main-register {
    margin: 20px auto;
    padding: 12px;
  }
  
  .header-brand {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .captcha-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .captcha-refresh {
    align-self: flex-end;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .small-link {
    text-align: center;
  }
  
  .tos-dialog {
    width: 95vw;
    margin: 10px;
  }
}

/* Footer separation from registration form */
.main-register footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Theme-Specific Adjustments
   Fine-tuning for consistent appearance across themes
   ========================================================================== */

/* Dark theme checkbox adjustments */
html[data-theme="dark"] .checkbox-label input[type="checkbox"],
html[data-theme="oled"] .checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
  background: var(--card-bg);
}

/* Retro theme checkbox styling */
html[data-theme="retro"] .checkbox-label input[type="checkbox"] {
  border-radius: 4px;
}

/* Dark theme TOS content background */
html[data-theme="dark"] .tos-content pre,
html[data-theme="oled"] .tos-content pre {
  background: rgba(255, 255, 255, 0.05);
}
/* Username availability styles */
#username-status {
    font-size: 0.9em;
    margin-top: 4px;
    min-height: 20px;
}

#username-status .success {
    color: #28a745;
}

#username-status .error {
    color: #dc3545;
}

#username-status .loading {
    color: #6c757d;
}

#username.available {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

#username.taken {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

#username.invalid {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}