/* =========================================================================
   AIDevPortal branded login — cohesive DARK theme over keycloak.v2 (PF v5).
   (Renamed from aidevportal.css to bust the Cloudflare edge cache.)
   Card + inputs + text are all dark-mode consistent so labels stay readable
   regardless of the browser's prefers-color-scheme.
   ========================================================================= */
:root {
  --aidp-accent: #6d5efc;
  --aidp-accent-2: #22d3ee;
  --aidp-card: #111a30;
  --aidp-ink: #e8edf6;
  --aidp-muted: #9aa6bf;
  --aidp-input: #1b2540;
}

/* --- page background --- */
html,
body,
.login-pf body,
.login-pf-page {
  background: radial-gradient(1200px 720px at 50% -15%, #243049 0%, #0b1020 62%) fixed !important;
  min-height: 100vh;
}

/* --- brand header: AIDevPortal logo, hide default text/logo --- */
#kc-header {
  padding: 8px 0 14px !important;
}
#kc-header-wrapper {
  color: transparent !important;
  font-size: 0 !important;
  background: url("../img/aidevportal-logo.svg") no-repeat center center !important;
  background-size: contain !important;
  height: 52px !important;
  padding: 0 !important;
}
#kc-header-wrapper .kc-logo-text {
  background-image: none !important;
}

/* --- card: dark + readable --- */
.card-pf,
.pf-v5-c-login__main,
#kc-content .pf-v5-c-card {
  background: var(--aidp-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
  color: var(--aidp-ink) !important;
}

/* --- force all text/labels/headings to light (fixes white-on-white) --- */
#kc-page-title,
#kc-content,
#kc-content-wrapper,
.pf-v5-c-login__main,
.pf-v5-c-login__main label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-form__helper-text,
#kc-form-options,
#kc-registration,
#kc-info,
#kc-info-wrapper,
.kc-feedback-text,
.instruction,
label {
  color: var(--aidp-ink) !important;
}
.pf-v5-c-form__label-text--required,
.required {
  color: var(--aidp-accent-2) !important;
}

/* --- inputs: dark with light text --- */
.pf-v5-c-form-control,
input#username,
input#password,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: var(--aidp-input) !important;
  color: var(--aidp-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
}
.pf-v5-c-form-control:focus-within,
input:focus {
  outline: none !important;
  border-color: var(--aidp-accent) !important;
  box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.25) !important;
}

/* --- primary button --- */
.pf-v5-c-button.pf-m-primary,
#kc-login,
input[type="submit"].pf-m-primary {
  background: linear-gradient(90deg, var(--aidp-accent), var(--aidp-accent-2)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.06) !important;
}

/* --- links (sign-in / register / forgot) use the accent, stay visible --- */
a,
.pf-v5-c-button.pf-m-link,
#kc-registration a,
#kc-form-options a {
  color: var(--aidp-accent-2) !important;
}

/* --- validation errors: make them clearly visible on the dark theme ---
   The light-ink override on helper/feedback text above also dimmed
   PatternFly's red error text, so a rejected submit (username too short,
   password policy, email taken) looked exactly like a normal grey hint and
   read as "nothing happened". Restore prominent, readable error styling. */
.pf-v5-c-form__helper-text.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-icon,
#input-error,
.input-error,
span.kc-feedback-text.pf-m-error {
  color: #fca5a5 !important;
  font-weight: 600 !important;
}

/* invalid inputs get a red border + glow so the offending field is obvious */
input[aria-invalid="true"],
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control[aria-invalid="true"] {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18) !important;
}

/* top-of-form alert banners (e.g. "registration failed") */
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-warning,
.alert-error,
.alert-warning {
  background: rgba(248, 113, 113, 0.12) !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
  border-radius: 10px !important;
}
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.alert-error {
  color: #fca5a5 !important;
}