/*
 * styles.css
 *
 * Copyright (c) 2001-2026 Gamma Technologies, LLC. All Rights Reserved.
 *
 * -----------------------------------------------------------------------------
 * GT-Play  -  Login pages  (parent: keycloak, PatternFly v4 + v3 / Bootstrap 3)
 * -----------------------------------------------------------------------------
 * Load order (see theme.properties):
 *
 *   1. css/login.css   inherited from the parent "keycloak" theme
 *   2. css/tokens.css  GT-Play colour / shape values (identical to the copies
 *                      under gtplay/account and gtplay/admin)
 *   3. css/styles.css  this file
 *
 * The login pages run the LEGACY PatternFly stack ("pf-c-*", "--pf-global--*"),
 * not the v5 stack the two consoles use - which is why this theme type gets
 * its own small bridge below instead of sharing pf-v5-bridge.css.
 *
 * Markup we are styling (base/login/template.ftl):
 *
 *   html.login-pf > body.login-pf
 *     div.login-pf-page
 *       div#kc-header > div#kc-header-wrapper      <- realm display name
 *       div.card-pf
 *         header.login-pf-header > h1#kc-page-title
 *         div#kc-content > div#kc-content-wrapper
 *           div.alert-*                            <- feedback
 *           form#kc-form-login   ...               <- nested "form"
 *           div.kc-social-section ...              <- nested "socialProviders"
 *           div#kc-info                            <- registration / links
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
   LEGACY PATTERNFLY BRIDGE
   The v3/v4 stylesheets key off --pf-global--*.  Re-pointing those at the
   GT-Play tokens removes the stock PatternFly blue/green the same way
   pf-v5-bridge.css does for the consoles.
   ============================================================================= */
:root {
  --pf-global--FontFamily--sans-serif: var(--gt-font);
  --pf-global--FontFamily--redhat-font--sans-serif: var(--gt-font);
  --pf-global--FontFamily--monospace:  var(--gt-font-mono);

  --pf-global--Color--100:             var(--gt-fg);
  --pf-global--Color--200:             var(--gt-fg-muted);
  --pf-global--Color--light-100:       var(--gt-white);
  --pf-global--Color--light-200:       var(--gt-gray-200);
  --pf-global--BackgroundColor--100:   var(--gt-login-card-bg);
  --pf-global--BackgroundColor--150:   var(--gt-login-input-bg);
  --pf-global--BackgroundColor--200:   var(--gt-bg-subtle);
  --pf-global--BorderColor--100:       var(--gt-login-card-border);
  --pf-global--BorderColor--200:       var(--gt-border-strong);
  --pf-global--BorderColor--300:       var(--gt-border);

  --pf-global--primary-color--100:     var(--gt-accent);
  --pf-global--primary-color--200:     var(--gt-accent-hover);
  --pf-global--active-color--100:      var(--gt-accent);
  --pf-global--link--Color:            var(--gt-accent);
  --pf-global--link--Color--hover:     var(--gt-accent-hover);

  --pf-global--success-color--100:     var(--gt-success-fg);
  --pf-global--warning-color--100:     var(--gt-warning-icon);
  --pf-global--danger-color--100:      var(--gt-danger-fg);
  --pf-global--info-color--100:        var(--gt-info-fg);
  --pf-global--disabled-color--100:    var(--gt-fg-disabled);

  --pf-global--palette--blue-300:      var(--gt-blue-500);
  --pf-global--palette--blue-400:      var(--gt-accent);
  --pf-global--palette--blue-500:      var(--gt-accent-hover);
  --pf-global--palette--green-500:     var(--gt-success-fg);
  --pf-global--palette--red-100:       var(--gt-danger-fg);
  --pf-global--palette--gold-400:      var(--gt-warning-icon);

  --pf-global--BorderRadius--sm:       var(--gt-radius-sm);
  --pf-global--BorderRadius--lg:       var(--gt-radius-lg);
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--gt-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   PAGE BACKDROP
   The GT-Play navy gradient, running top-left to bottom-right exactly as in
   the product.  The parent theme paints keycloak-bg.png on ".login-pf body",
   so both that rule and PatternFly's own ".login-pf" background are cleared.
   ============================================================================= */
.login-pf { background: none; height: auto; }

.login-pf body,
body.login-pf {
  background: var(--gt-login-bg-from) !important;
  background-image:
    linear-gradient(135deg,
      var(--gt-login-bg-from) 0%,
      var(--gt-login-bg-mid)  48%,
      var(--gt-login-bg-to)  100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: var(--gt-login-title-fg);
  min-height: 100vh;
}

.login-pf-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px 40px;
  background: transparent;
}
.login-pf-page .container,
.login-pf-page .container-fluid { padding: 0; }

/* =============================================================================
   BRAND LOCK-UP  (#kc-header)
   The legacy template renders the realm display name here, above the card.
   We prefix it with the GT-Play mark so the two read as one lock-up - the
   product's own login does the same, and CSS alone cannot move the header
   inside the card without overriding template.ftl.
   ============================================================================= */
#kc-header,
.login-pf-page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 0 22px;
  overflow: visible;
  color: var(--gt-login-title-fg);
}

.login-pf-header { color: var(--gt-login-title-fg) !important; }

#kc-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* The parent theme sets 29px / uppercase / 3px tracking / 62px top padding. */
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  white-space: normal;
  text-align: center;
  color: var(--gt-login-title-fg) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
#kc-header-wrapper::before {
  content: "";
  flex: none;
  width: 38px;
  height: 35px;
  background: url("../img/gtplay-logo.svg") no-repeat center / contain;
}
:root[data-theme="dark"] #kc-header-wrapper::before {
  background: url("../img/gtplay-logo-light.svg") no-repeat center / contain;
}

.kc-logo-text {
	display:none;
}

/* =============================================================================
   CARD
   ============================================================================= */
.card-pf {
  width: 100%;
  max-width: 420px;
  padding: 30px;
  background: var(--gt-login-card-bg);
  border: 1px solid var(--gt-login-card-border);
  border-radius: var(--gt-radius-lg);
  box-shadow: 0 18px 44px rgba(3, 12, 30, .34), 0 2px 6px rgba(3, 12, 30, .20);
  color: var(--gt-fg);
}

.login-pf-header { margin: 0; text-align: left; }

#kc-page-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--gt-fg);
}

#kc-content, #kc-content-wrapper { width: 100%; }

/* "Signed in as ..." / restart-login row */
#kc-username {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 11px;
  background: var(--gt-login-input-bg);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-md);
}
#kc-attempted-username { margin: 0; font-size: 14px; font-weight: 500; color: var(--gt-fg); }
#reset-login { color: var(--gt-accent); font-size: 13px; }

/* =============================================================================
   FORM FIELDS
   ============================================================================= */
.form-group { position: relative; margin-bottom: 14px; }

.form-group label,
.pf-c-form__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gt-fg-muted);
}
.form-group label .required,
.pf-c-form__label-required { color: var(--gt-danger-fg); }

/* Leading field icons.  Two variants because a data: URI cannot inherit
   currentColor - the dark one is swapped in further down. */
.form-group label::before { display: inline-flex; flex: none; line-height: 0; }
.form-group label[for="username"]::before,
.form-group label[for="email"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2358595b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.form-group label[for="password"]::before,
.form-group label[for="password-new"]::before,
.form-group label[for="password-confirm"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2358595b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

input[type="text"].pf-c-form-control,
input[type="password"].pf-c-form-control,
input[type="email"].pf-c-form-control,
input[type="tel"].pf-c-form-control,
input[type="number"].pf-c-form-control,
select.pf-c-form-control,
textarea.pf-c-form-control,
.form-control {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gt-fg);
  background: var(--gt-login-input-bg);
  border: 1px solid var(--gt-border-strong);
  border-radius: var(--gt-radius-md);
  outline: none;
  box-shadow: none;
  transition: border-color var(--gt-transition), box-shadow var(--gt-transition);
}
textarea.pf-c-form-control { height: auto; min-height: 84px; padding: 9px 12px; }
select.pf-c-form-control { padding-right: 30px; }

.pf-c-form-control::placeholder { color: var(--gt-fg-subtle); opacity: 1; }
.pf-c-form-control:hover:not(:focus) { border-color: var(--gt-fg-subtle); }
.pf-c-form-control:focus,
.form-control:focus {
  border-color: var(--gt-accent);
  box-shadow: 0 0 0 var(--gt-ring-width) var(--gt-focus-ring);
  outline: none;
}
.pf-c-form-control:disabled,
.pf-c-form-control[readonly] {
  background: var(--gt-bg-subtle);
  color: var(--gt-fg-disabled);
  cursor: not-allowed;
}
/* Bootstrap's has-error wrapper */
.has-error .pf-c-form-control,
.pf-c-form-control.pf-m-error { border-color: var(--gt-danger-fg); }

/* The password field is wrapped in an input group whose only other child is
   the reveal button.  The group must stretch to the full field width, and the
   button is positioned against the GROUP - not against .form-group, which also
   contains the error message and would drop the button into it. */
.pf-c-input-group {
  position: relative;
  display: flex;
  width: 100%;
  background: transparent;

  /* PatternFly v4 lifts whichever child has focus:
   *   .pf-c-input-group > :focus { z-index: var(--pf-c-input-group--child--ZIndex) }
   * and that variable defaults to --pf-global--ZIndex--xs, i.e. 100.  The
   * reveal button is an absolutely positioned sibling, so a focused password
   * field was painting straight over it and the eye icon disappeared as soon
   * as you clicked into the field.  Capping the focused child at 1 keeps it
   * above the group's unpositioned children while staying below the button. */
  --pf-c-input-group--child--ZIndex: 1;
}
.pf-c-input-group > .pf-c-form-control,
.pf-c-input-group > .pf-c-input-group__item,
.pf-c-input-group > input {
  flex: 1 1 auto;
  min-width: 0;
}
.form-group .col-xs-12 { display: flex; width: 100%; padding: 0; }
.form-group [class^="col-"] { padding-left: 0; padding-right: 0; }

/* Password visibility toggle */
#password, #password-new, #password-confirm { padding-right: 42px; }

.pf-c-input-group .pf-c-button.pf-m-control {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--gt-radius-xs);
  color: var(--gt-fg-muted);
  cursor: pointer;
  transition: color var(--gt-transition), background var(--gt-transition);
}
.pf-c-button.pf-m-control::after { border: 0; }
.pf-c-button.pf-m-control:hover { color: var(--gt-fg); background: rgba(0, 0, 0, .05); }
.pf-c-button.pf-m-control:focus-visible {
  outline: 2px solid var(--gt-accent);
  outline-offset: 1px;
}
.pf-c-button.pf-m-control:disabled { opacity: .4; cursor: not-allowed; }

/* Field-level error message */
#input-error,
#input-error-username,
#input-error-password,
.pf-c-form__helper-text.pf-m-error,
.kc-feedback-text.pf-m-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 7px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--gt-danger-fg);
  background: var(--gt-danger-bg);
  border: 1px solid var(--gt-danger-border);
  border-radius: var(--gt-radius-md);
}
#input-error::before,
#input-error-username::before,
#input-error-password::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23b3170c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  flex: none;
  line-height: 0;
  margin-top: 2px;
}

/* =============================================================================
   REMEMBER ME / FORGOT PASSWORD ROW
   ============================================================================= */
.login-pf-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.login-pf-settings [class^="col-"] { padding: 0; width: auto; }

.checkbox,
.pf-c-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.checkbox label,
.pf-c-check__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--gt-fg-muted);
  cursor: pointer;
}
.checkbox label::before,
.pf-c-check__label::before { content: none; }

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--gt-accent);
  cursor: pointer;
}

#kc-form-options a,
#kc-registration a,
#kc-registration-container a,
#kc-info a,
.login-pf-page a {
  color: var(--gt-accent);
  font-size: 13px;
  text-decoration: none;
}
#kc-form-options a:hover,
#kc-registration a:hover,
#kc-info a:hover,
.login-pf-page a:hover { color: var(--gt-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================
   BUTTONS
   ============================================================================= */
#kc-form-buttons { margin-top: 18px; }

#kc-form-buttons .pf-c-button,
.kc-social-section .pf-c-button,
.pf-c-button.pf-m-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--gt-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--gt-transition), border-color var(--gt-transition),
              color var(--gt-transition);
}

.pf-c-button.pf-m-primary,
input[type="submit"].pf-m-primary {
  background-color: var(--gt-primary-bg) !important;
  border-color: var(--gt-primary-bg) !important;
  color: var(--gt-primary-fg) !important;
}
.pf-c-button.pf-m-primary:not(:disabled):hover,
.pf-c-button.pf-m-primary:not(:disabled):focus {
  background-color: var(--gt-primary-bg-hover) !important;
  border-color: var(--gt-primary-bg-hover) !important;
}
.pf-c-button.pf-m-primary:not(:disabled):active {
  background-color: var(--gt-primary-bg-active) !important;
  border-color: var(--gt-primary-bg-active) !important;
}
.pf-c-button.pf-m-primary:focus-visible {
  outline: 2px solid var(--gt-white);
  outline-offset: 1px;
  box-shadow: 0 0 0 var(--gt-ring-width) var(--gt-focus-ring);
}
.pf-c-button:disabled,
.pf-c-button.pf-m-aria-disabled { opacity: .5; cursor: not-allowed; }
.pf-c-button::after { border: 0; }

/* Secondary / "btn-default" (e.g. Cancel, Back) */
.pf-c-button.btn-default,
.pf-c-button.pf-m-secondary {
  background: transparent;
  color: var(--gt-accent);
  border-color: var(--gt-border-strong);
}
.pf-c-button.btn-default:not(:disabled):hover,
.pf-c-button.pf-m-secondary:not(:disabled):hover {
  background: var(--gt-accent-softer);
  border-color: var(--gt-accent);
}

/* =============================================================================
   IDENTITY PROVIDERS  ("Login with OKTA")
   ============================================================================= */
.kc-social-section hr,
#kc-social-providers hr { display: none; }

.kc-social-section h2,
#kc-social-providers h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gt-fg-muted);
}
.kc-social-section h2::before,
.kc-social-section h2::after,
#kc-social-providers h2::before,
#kc-social-providers h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gt-border-strong);
}

.kc-social-links { list-style: none; margin: 0; padding: 0; }
.kc-social-links li + li { margin-top: 8px; }

.kc-social-section .pf-c-button,
.kc-social-links .pf-c-button {
  background: var(--gt-login-input-bg);
  color: var(--gt-fg);
  border-color: var(--gt-border-strong);
  font-weight: 500;
}
.kc-social-section .pf-c-button:not(:disabled):hover,
.kc-social-links .pf-c-button:not(:disabled):hover {
  background: var(--gt-accent-softer);
  border-color: var(--gt-accent);
  color: var(--gt-accent);
}

.pf-c-button.kc-social-item .kc-social-provider-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Generic "sign in with" glyph for providers that ship no logo class. */
.pf-c-button.kc-social-item .kc-social-provider-name::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b55b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E");
  flex: none;
  line-height: 0;
}
/* Providers that DO ship a logo class render their own icon - drop ours. */
.pf-c-button.kc-social-item .kc-social-provider-logo + .kc-social-provider-name::before { content: none; }
.kc-social-provider-logo { color: var(--gt-fg-muted); }

/* =============================================================================
   FEEDBACK ALERTS  (template.ftl "alert-${message.type}")
   ============================================================================= */
.pf-c-alert,
.alert-error, .alert-warning, .alert-success, .alert-info {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 10px 13px;
  font-size: 13px;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-md);
  background: var(--gt-login-input-bg);
  color: var(--gt-fg);
}
.pf-c-alert__icon { flex: none; line-height: 1.4; }
.kc-feedback-text { display: block; }

.alert-error, .pf-c-alert.pf-m-danger {
  background: var(--gt-danger-bg);
  border-color: var(--gt-danger-border);
  color: var(--gt-danger-fg);
}
.alert-error .pf-c-alert__icon, .pf-c-alert.pf-m-danger .pf-c-alert__icon { color: var(--gt-danger-icon); }

.alert-warning, .pf-c-alert.pf-m-warning {
  background: var(--gt-warning-bg);
  border-color: var(--gt-warning-border);
  color: var(--gt-warning-fg);
}
.alert-warning .pf-c-alert__icon, .pf-c-alert.pf-m-warning .pf-c-alert__icon { color: var(--gt-warning-icon); }

.alert-success, .pf-c-alert.pf-m-success {
  background: var(--gt-success-bg);
  border-color: var(--gt-success-border);
  color: var(--gt-success-fg);
}
.alert-success .pf-c-alert__icon, .pf-c-alert.pf-m-success .pf-c-alert__icon { color: var(--gt-success-icon); }

.alert-info, .pf-c-alert.pf-m-info {
  background: var(--gt-info-bg);
  border-color: var(--gt-info-border);
  color: var(--gt-info-fg);
}
.alert-info .pf-c-alert__icon, .pf-c-alert.pf-m-info .pf-c-alert__icon { color: var(--gt-info-icon); }

/* =============================================================================
   FOOTER LINKS  (#kc-info: "New user? Register", "Back to Login", ...)
   ============================================================================= */
#kc-info, .login-pf-signup {
  border-top: 1px solid var(--gt-border);
  font-size: 13px;
  color: var(--gt-fg-muted);
  text-align: center;
}
#kc-info-wrapper {
 border-radius: var(--gt-radius-lg);
}

/* =============================================================================
   SELECT-AUTHENTICATOR LIST  (choose OTP / WebAuthn / password)
   ============================================================================= */
.select-auth-box-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--gt-login-input-bg);
  border: 1px solid var(--gt-border-strong);
  border-radius: var(--gt-radius-md);
  cursor: pointer;
  transition: border-color var(--gt-transition), background var(--gt-transition);
}
.select-auth-box-parent:hover { border-color: var(--gt-accent); background: var(--gt-accent-softer); }
.select-auth-box-icon { color: var(--gt-accent); }
.select-auth-box-headline { font-size: 14px; font-weight: 600; color: var(--gt-fg); }
.select-auth-box-desc { font-size: 12px; color: var(--gt-fg-muted); }
.select-auth-box-arrow { color: var(--gt-fg-subtle); }

/* Recovery codes */
.kc-recovery-codes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 12px 0;
  padding: 12px;
  font-family: var(--gt-font-mono);
  font-size: 13px;
  list-style-position: inside;
  background: var(--gt-login-input-bg);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-md);
}
.kc-recovery-codes-warning { margin-bottom: 14px; }

/* =============================================================================
   LOCALE PICKER
   ============================================================================= */
#kc-locale { position: absolute; top: 16px; right: 16px; }
#kc-current-locale-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gt-white);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--gt-radius-md);
  cursor: pointer;
}
#kc-current-locale-link:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
#kc-current-locale-link:focus-visible { outline: 2px solid var(--gt-white); outline-offset: 1px; }

#kc-locale .pf-c-dropdown__menu {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius-md);
  box-shadow: var(--gt-shadow-md);
  padding: 4px;
  list-style: none;
}
#kc-locale .pf-c-dropdown__menu-item {
  display: block;
  padding: 7px 11px;
  border-radius: var(--gt-radius-sm);
  font-size: 13px;
  color: var(--gt-fg) !important;
  text-decoration: none;
}
#kc-locale .pf-c-dropdown__menu-item:hover { background: var(--gt-surface-hover); }

/* =============================================================================
   THEME TOGGLE  (injected by script.js)
   Sits on the navy backdrop, so it gets the inverse treatment of the console
   toggle: a translucent white surface with a solid white label.
   ============================================================================= */
.gt-theme-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  font-family: var(--gt-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gt-white);               /* on the navy backdrop: >= 12:1      */
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--gt-radius-md);
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background var(--gt-transition), border-color var(--gt-transition);
}
.gt-theme-toggle:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
}
.gt-theme-toggle:focus-visible {
  outline: 2px solid var(--gt-white);
  outline-offset: 2px;
}
.gt-theme-toggle__icon {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 15px;
  color: currentcolor;
}
.gt-theme-toggle__icon svg { display: block; width: 100%; height: 100%; }

/* =============================================================================
   DARK MODE  -  swap the data: URI icons, which cannot inherit currentColor
   ============================================================================= */
:root[data-theme="dark"] .form-group label[for="username"]::before,
:root[data-theme="dark"] .form-group label[for="email"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8b8d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .form-group label[for="password"]::before,
:root[data-theme="dark"] .form-group label[for="password-new"]::before,
:root[data-theme="dark"] .form-group label[for="password-confirm"]::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8b8d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] #input-error::before,
:root[data-theme="dark"] #input-error-username::before,
:root[data-theme="dark"] #input-error-password::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ff8a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .pf-c-button.kc-social-item .kc-social-provider-name::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2382a9f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E");
}
/* The mark itself needs no dark variant: it always sits on the navy backdrop
   above the card, which is dark in both modes. */
:root[data-theme="dark"] .pf-c-button.pf-m-control:hover { background: rgba(255, 255, 255, .08); }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 576px) {
  .login-pf-page { padding: 20px 12px 28px; }
  .card-pf { padding: 22px; border-radius: var(--gt-radius-md); }
  #kc-header-wrapper { font-size: 1.4rem !important; }
  #kc-header-wrapper::before { width: 30px; height: 28px; }
  .kc-recovery-codes-list { grid-template-columns: 1fr; }
  .gt-theme-toggle__label { display: none; }
}

/* The parent theme collapses the backdrop to plain white below 767px. */
@media (max-width: 767px) {
  .login-pf body,
  body.login-pf {
    background-image:
      linear-gradient(160deg,
        var(--gt-login-bg-from) 0%,
        var(--gt-login-bg-mid)  50%,
        var(--gt-login-bg-to)  100%) !important;
  }
  #kc-header { padding: 0; }
}