/**
 * UdstillerGuide Auth - Minimal CSS
 *
 * Web Awesome handles most styling via its components and utilities.
 * This file only contains layout adjustments specific to our forms.
 */

/* Container centering - width controlled by parent */
.ug-auth-login-container,
.ug-auth-register-container,
.ug-auth-password-reset-container {
  margin: 0 auto;
}

/* Hide views that are not active */
[data-view][style*="display: none"] {
  display: none !important;
}

/* Form field row (side by side fields) */
.ug-auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wa-space-m, 1rem);
}

@media (max-width: 480px) {
  .ug-auth-field-row {
    grid-template-columns: 1fr;
  }
}

/* Links row styling */
.ug-auth-links {
  text-align: center;
}

/* Remove focus outline from wa-input wrapper - focus should only show on the input part */
wa-input:focus,
wa-input:focus-visible {
  outline: none;
}

/* Invalid field styling */
wa-input[data-user-invalid]::part(base) {
  border-color: var(--wa-color-danger-600, #dc2626);
}

wa-input[data-user-invalid]::part(form-control-help-text) {
  color: var(--wa-color-danger-600, #dc2626);
}

/* Theme integration — map UdstillerGuide site colors to Web Awesome components */
.ug-auth-register-container,
.ug-auth-login-container,
.ug-auth-password-reset-container {
  --wa-color-brand-fill-loud: var(--primaerfarve, #009fe3);
  --wa-color-brand-on-loud: var(--knaptekst-farve, #ffffff);
  --wa-form-control-border-radius: var(--rundehjoerner-elementer, 3px);
}

.ug-auth-register-container wa-button,
.ug-auth-login-container wa-button,
.ug-auth-password-reset-container wa-button {
  --wa-form-control-border-radius: var(--rundehjoerner-knap, 3px);
}

/* Hover: brug sidens sekundærfarve */
.ug-auth-register-container wa-button[variant="brand"]::part(base):hover,
.ug-auth-login-container wa-button[variant="brand"]::part(base):hover,
.ug-auth-password-reset-container wa-button[variant="brand"]::part(base):hover {
  background: var(--sekundaerfarve, #007ab8);
}