/* ============================================================
   Orange-White Login Theme fuer Keycloak
   Weisser Hintergrund, orange Akzente.
   Wird NACH login.css geladen und ueberschreibt nur Farben/Optik.
   ============================================================ */

:root {
  --ow-orange:        #EA5B0C;   /* Primaerfarbe */
  --ow-orange-dark:   #C24A08;   /* Hover / Active */
  --ow-orange-light:  #FDEEE3;   /* dezente Flaechen */
  --ow-text:          #1F2328;   /* Fliesstext */
  --ow-text-muted:    #6B7280;
  --ow-border:        #E5E7EB;
  --ow-white:         #FFFFFF;

  /* PatternFly-Variablen global umbiegen */
  --pf-global--primary-color--100: var(--ow-orange);
  --pf-global--primary-color--200: var(--ow-orange-dark);
  --pf-global--link--Color: var(--ow-orange);
  --pf-global--link--Color--hover: var(--ow-orange-dark);
  --pf-global--active-color--100: var(--ow-orange);
}

/* ---------- Seitenhintergrund: weiss statt Keycloak-Bild ---------- */
.login-pf,
.login-pf body {
  background: var(--ow-white) !important;
  background-image: none !important;
}

/* ---------- Header (Realm-Name) ---------- */
#kc-header {
  color: var(--ow-orange);
}

#kc-header-wrapper {
  color: var(--ow-orange);
  font-weight: 700;
  letter-spacing: 2px;
}

/* Keycloak-Logo-Grafik ausblenden, Realm-Name als Text zeigen */
div.kc-logo-text {
  background-image: none;
  height: auto;
  width: auto;
}

div.kc-logo-text span {
  display: inline;
  color: var(--ow-orange);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Login-Karte ---------- */
.card-pf {
  background: var(--ow-white);
  border: 1px solid var(--ow-border);
  border-top: 4px solid var(--ow-orange);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.08);
  padding: 30px 40px;
}

h1#kc-page-title {
  color: var(--ow-text);
  font-weight: 600;
}

/* ---------- Formularfelder ---------- */
.pf-c-form__label-text {
  color: var(--ow-text);
  font-weight: 600;
}

.pf-c-form-control {
  border-color: var(--ow-border);
  border-bottom-color: #C7CCD1;
  background-color: var(--ow-white);
  color: var(--ow-text);
}

.pf-c-form-control:hover {
  border-bottom-color: var(--ow-orange);
}

.pf-c-form-control:focus {
  border-bottom-color: var(--ow-orange);
  --pf-c-form-control--focus--BorderBottomColor: var(--ow-orange);
  box-shadow: none;
}

/* Passwort-Auge-Button */
.pf-c-button.pf-m-control {
  border-color: var(--ow-border);
  color: var(--ow-text-muted);
}

.pf-c-button.pf-m-control:hover {
  color: var(--ow-orange);
}

/* Checkbox "Angemeldet bleiben" */
.pf-c-check__input:checked {
  accent-color: var(--ow-orange);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ow-orange);
}

/* ---------- Primaerer Button (Anmelden) ---------- */
.pf-c-button.pf-m-primary {
  background-color: var(--ow-orange);
  border-radius: 6px;
  font-weight: 600;
  --pf-c-button--m-primary--BackgroundColor: var(--ow-orange);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--ow-orange-dark);
  --pf-c-button--m-primary--focus--BackgroundColor: var(--ow-orange-dark);
  --pf-c-button--m-primary--active--BackgroundColor: var(--ow-orange-dark);
}

.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:active {
  background-color: var(--ow-orange-dark);
}

/* ---------- Links (Passwort vergessen, Registrieren, Zurueck) ---------- */
.login-pf a,
.login-pf-page a {
  color: var(--ow-orange);
}

.login-pf a:hover,
.login-pf-page a:hover {
  color: var(--ow-orange-dark);
  text-decoration: underline;
}

/* ---------- Sprachauswahl ---------- */
#kc-locale-dropdown a,
#kc-locale-dropdown button {
  color: var(--ow-text-muted);
}

#kc-locale ul {
  border: 1px solid var(--ow-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.10);
}

#kc-locale ul a:hover {
  background-color: var(--ow-orange-light);
  color: var(--ow-orange-dark);
}

/* ---------- Meldungen / Alerts ---------- */
.pf-c-alert.pf-m-inline {
  border-radius: 6px;
}

.pf-c-alert.pf-m-inline.pf-m-danger {
  --pf-c-alert--BackgroundColor: #FDECEA;
}

.pf-c-alert.pf-m-inline.pf-m-success {
  --pf-c-alert--BackgroundColor: #EAF6EC;
}

.pf-c-alert.pf-m-inline.pf-m-warning {
  --pf-c-alert--BackgroundColor: var(--ow-orange-light);
  --pf-c-alert__icon--Color: var(--ow-orange);
}

/* ---------- Social-Login-Buttons ---------- */
.kc-social-item {
  border: 1px solid var(--ow-border);
  border-radius: 6px;
  color: var(--ow-text);
}

.kc-social-item:hover {
  border-color: var(--ow-orange);
  color: var(--ow-orange-dark);
  background-color: var(--ow-orange-light);
}

/* Trennlinie "oder" ueber Social-Logins */
.kc-social-section hr {
  border-color: var(--ow-border);
}

/* ---------- Auswahl der Anmeldeart (WebAuthn etc.) ---------- */
.select-auth-box-parent:hover {
  background-color: var(--ow-orange-light);
}

.select-auth-box-headline {
  color: var(--ow-orange);
}

/* ---------- Footer-/Info-Bereich ---------- */
#kc-info {
  color: var(--ow-text-muted);
}

/* ---------- Fokus-Sichtbarkeit (Barrierefreiheit) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ow-orange);
  outline-offset: 2px;
}