:root {
  /* ==========================================================================
    Fraunhofer Base Color Tokens (LCh Scale)
  ========================================================================== */
  --fhg-color-light-200: #e6f5f1;          /* Super light green tint for backgrounds */
  --fhg-color-light-100: #43b899;          /* Light brand green (+12 LCh) */
  --fhg-color: #12977a;                    /* Core FhG Green (Color code 28) */
  --fhg-color-dark-100: #008a6e;           /* Darker green (-5 LCh) for hovers */
  --fhg-color-dark-200: #007d61;           /* Deep green (-10 LCh) for active clicks */
  --fhg-color-btn-foreground: #fff;        /* Text color on brand elements */

  /* ==========================================================================
    PatternFly 5 Semantic Variable Map
  ========================================================================== */

  /* --- Primary Brand Components --- */
  --pf-v5-global--primary-color--100: var(--fhg-color);
  --pf-v5-global--primary-color--200: var(--fhg-color-dark-100);
  --pf-v5-global--primary-color--dark-100: var(--fhg-color-dark-200);
  --pf-v5-global--primary-color--light-100: var(--fhg-color-light-100);

  /* --- Active, Focused & Selected States --- */
  --pf-v5-global--active-color--100: var(--fhg-color);
  --pf-v5-global--active-color--200: var(--fhg-color-light-200);
  --pf-v5-global--active-color--300: var(--fhg-color-light-100);
  --pf-v5-global--active-color--400: var(--fhg-color);

  /* --- Text Links --- */
  --pf-v5-global--link--Color: var(--fhg-color);
  --pf-v5-global--link--Color--hover: var(--fhg-color-dark-100);

  /* --- System Info Notifications & Alert Bars --- */
  --pf-v5-global--info-color--100: var(--fhg-color-dark-100);
  --pf-v5-global--info-color--200: var(--fhg-color-dark-200);

  --keycloak-card-top-color: none;
}

#keycloak-bg {
  /* Change page bg color and add a bit of top padding */
  background: #fff;
}

.pf-v5-c-login__container {
  /* Center card without logo title */
  margin-bottom: var(--pf-v5-global--spacer--4xl);
}

/* ==========================================================================
 Logo
========================================================================== */

#kc-header {
  margin: 0;
}

#kc-header #kc-header-wrapper {
  /* Add FhG logo above login card header */
  display: block;
  background: url(../img/fhg_logo.png) no-repeat center center;
  background-size: contain;
  height: 48px;
  /* Hide the fallback text from realm name */
  text-indent: -9999px;
  overflow: hidden;
}

#kc-header #kc-header-wrapper .kc-logo-text {
  /* We do not need the logo text */
  display: none;
}

/* ==========================================================================
 Card Header
========================================================================== */

.pf-v5-c-login__main-header {
  /* Increase the padding to the form fields*/
  padding: var(--pf-v5-global--spacer--lg);
  display: flex;
  flex-direction: column-reverse;
}

.pf-v5-c-login__main-header #kc-page-title {
  /* Make the card title a bit smaller */
  font-size: var(--pf-v5-global--FontSize--2xl);
  margin-bottom: var(--pf-v5-global--FontSize--2xl);
}

.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities {
  /* Compact Language Selector Dropdown Overrides */
  align-self: flex-end;
  max-width: 90px;
  width: 100%;
}

.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  font-size: 12px;
}

.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities .pf-v5-c-form-control::before,
.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities .pf-v5-c-form-control::after {
  /* Remove border to blend in */
  border-color: transparent;
}

.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities select#login-select-toggle {
  /* Remove focus outline to blend in */
  outline: none;
}

/* ==========================================================================
 Card Content
========================================================================== */

.pf-v5-c-login__main {
  /* To move footer links outside the login card */
  position: relative !important;
  border-radius: calc(var(--pf-v5-global--BorderRadius--sm) * 2);
}

.pf-v5-c-login__main .pf-v5-c-login__main-body {
  /* Decrease padding at the end of the card */
  padding-bottom: var(--pf-v5-global--spacer--xl);
}

.pf-v5-c-login__main .pf-v5-c-login__main-body #authenticateWebAuthnButton {
  margin-top: var(--pf-v5-global--spacer--md);
}

.pf-v5-c-login__main .pf-v5-c-form__label-text {
  /* Decrease font weight of input labels */
  font-weight: 100;
}

.pf-v5-c-login__main .pf-v5-c-form-control input {
  /* Make the outline color of a selected field the corporate color */
  outline-color: var(--fhg-color);
}

/* ==========================================================================
 Social Login Buttons
========================================================================== */

.pf-v5-c-login__main-footer .pf-v5-c-login__main-footer-band {
  /* Create --- Or --- separator lines */
  display: flex;
  align-items: center;
  text-align: center;

  border-top: none;
  margin: var(--pf-v5-global--spacer--md) 0;
  padding: var(--pf-v5-global--spacer--md) 0;
}

/* Construct the left and right lines dynamically */
.pf-v5-c-login__main-footer .pf-v5-c-login__main-footer-band::before,
.pf-v5-c-login__main-footer .pf-v5-c-login__main-footer-band::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--pf-v5-global--BorderColor--100);
}

/* Give the "Or" text clean padding so it doesn't collide with the lines */
.pf-v5-c-login__main-footer .pf-v5-c-login__main-footer-band .pf-v5-c-login__main-footer-band-item {
  padding: 0 var(--pf-v5-global--spacer--md);
}

.pf-v5-c-login__main-footer #kc-social-providers ul {
  padding: 0;
}

.pf-v5-c-login__main-footer #kc-social-providers ul li svg {
  /* Remove logo from social login buttons */
  display: none !important;
}

/* ==========================================================================
 Card Footer
========================================================================== */

#fhg-help-wrapper {
  /* Pushes the links down below the white background boundary */
  position: absolute;
  bottom: -55px;
  left: 0;
  width: 100%;
  /* Layout alignment for the links */
  display: flex;
  justify-content: center;
  gap: var(--pf-v5-global--spacer--2xl);
  padding: var(--pf-v5-global--spacer--md) 0;
}

#fhg-help-wrapper .fhg-help-text {
  /* Make the links less prominent */
  font-size: var(--pf-v5-global--FontSize--sm);
}

#fhg-help-wrapper .fhg-help-text:hover {
  /* Make the links the corporate color */
  text-decoration: none;
  color: #000;
}