/* 
 * Login Page Specific Styles
 * Complementary to main.css with focused layout for authentication forms
 * Mobile-first responsive design with theme compatibility
 */

/* Centered login container with constrained max-width for optimal readability */
.main-login {
  max-width: 720px;
  margin: 28px auto;
  padding: 18px;
}

/* Brand header with logo and title alignment */
.header-brand { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin-bottom:16px; 
}

/* Custom logo styling distinct from other logo classes for visual hierarchy */
.logo-pill { 
  width:56px; 
  height:56px; 
  border-radius:10px; 
  background:linear-gradient(135deg,var(--accent),#7dd3fc); /* Brand gradient using CSS variables */
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:700; 
  color:var(--accent-contrast); /* Dynamic contrast color based on theme */
}

/* Form field spacing and structure */
.field { 
  margin-bottom:14px; /* Consistent vertical rhythm */
}

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

/* Checkbox field specific styling for custom appearance */
.field-checkbox {
  margin-bottom: 16px;
}

/* Custom checkbox label with flex alignment for precise control */
.checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 0 !important;
  font-weight: normal !important;
}

/* Native checkbox styling with theme accent color */
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent); /* Theme-consistent checkbox color */
}

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

/* Form actions container with flexible layout */
.form-actions { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  margin-top:12px; 
  flex-wrap: wrap; /* Responsive wrapping for small screens */
}

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

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

/* ==========================================================================
   Mobile Responsive Adjustments
   Optimized layout for touch interfaces and small screens
   ========================================================================== */
@media (max-width: 720px) {
  .main-login {
    margin: 20px auto;
    padding: 12px; /* Reduced padding on mobile */
  }
  
  .header-brand {
    flex-direction: column; /* Stack logo and text vertically */
    text-align: center;
    gap: 8px;
  }
  
  .form-actions {
    flex-direction: column; /* Stack button and link vertically */
    align-items: stretch;
    gap: 8px;
  }
  
  .small-link {
    text-align: center;
  }
}

/* Footer styling specific to login page context */
.main-login footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08); /* Visual separation from form */
}

/* ==========================================================================
   Theme-Specific Adjustments
   Fine-tuning for each theme variant
   ========================================================================== */

/* Dark and OLED themes: ensure checkbox visibility */
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); /* Theme-appropriate background */
}

/* Retro theme: additional styling for cohesive aesthetic */
html[data-theme="retro"] .checkbox-label input[type="checkbox"] {
  border-radius: 4px; /* Slightly rounded to match retro theme */
}