/*
 * UnionX login skin over keycloak.v2 / PatternFly 5.
 *
 * Values mirror the shell's tokens (ui/uxs-ui/src/app/globals.css) and the shared
 * design system's surface and shape scales (ui/shared/src/theme/tokens.ts) so the
 * login and the app it opens onto read as one product. Keep them in step by hand:
 * Keycloak is not part of the UI build, so nothing generates this file.
 *
 * Loaded after keycloak.v2's styles.css, so the PatternFly custom properties set on
 * :root here win on source order against PatternFly's own :root declarations. That only
 * holds for properties PatternFly declares at that specificity: the ones it sets on a
 * component's own selector have to be overridden there too, and are grouped under that
 * selector below. Where the parent theme reaches a component through an id, it takes
 * two of them to answer.
 */

:root {
  --ux-bg: #f4f6f8;
  --ux-card: #ffffff;
  --ux-fg: #171717;
  --ux-muted: #64748b;
  --ux-border: #e2e8f0;
  --ux-border-strong: #cbd5e1;
  --ux-primary: #0b7ec2;
  --ux-primary-strong: #075985;
  --ux-primary-soft: #e6f0f8;
  --ux-primary-soft-hover: #a9c7e3;
  --ux-primary-soft-active: #9dbfdf;
  --ux-primary-soft-fg: #0c4a6e;
  --ux-emphasis: #1e293b;
  --ux-emphasis-hover: #020617;
  --ux-danger: #dc2626;
  --ux-danger-border: #e4a3a3;
  --ux-radius-card: 12px;
  --ux-radius-ctl: 8px;
  --ux-card-pad-x: 3rem;
  --ux-brand-pad-top: 3.5rem;
  --ux-brand-gap: 2.5rem;
  --ux-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    Arial, sans-serif;

  --pf-v5-global--FontFamily--text: var(--ux-font-sans);
  --pf-v5-global--FontFamily--heading: var(--ux-font-sans);
  --pf-v5-global--Color--100: var(--ux-fg);
  --pf-v5-global--Color--200: var(--ux-muted);
  --pf-v5-global--link--Color: var(--ux-primary);
  --pf-v5-global--link--Color--hover: var(--ux-primary-strong);
  --pf-v5-global--danger-color--100: var(--ux-danger);
  --pf-v5-global--BorderRadius--sm: var(--ux-radius-ctl);

  --pf-v5-c-login__main-footer-band--BorderTopColor: var(--ux-border);

  --pf-v5-c-form-control--BackgroundColor: var(--ux-card);
  --pf-v5-c-form-control--Color: var(--ux-fg);
  --pf-v5-c-form-control--m-placeholder--Color: var(--ux-muted);

  --pf-v5-c-button--BorderRadius: var(--ux-radius-ctl);
  --pf-v5-c-button--FontWeight: 600;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ux-primary);
  --pf-v5-c-button--m-primary--Color: #ffffff;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ux-primary-strong);
  --pf-v5-c-button--m-primary--hover--Color: #ffffff;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ux-primary-strong);
  --pf-v5-c-button--m-primary--focus--Color: #ffffff;
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ux-primary-strong);
  --pf-v5-c-button--m-primary--active--Color: #ffffff;
}

#kc-form-login #kc-login {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ux-primary-soft);
  --pf-v5-c-button--m-primary--Color: var(--ux-primary-soft-fg);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ux-primary-soft-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--ux-primary-soft-fg);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ux-primary-soft-hover);
  --pf-v5-c-button--m-primary--focus--Color: var(--ux-primary-soft-fg);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ux-primary-soft-active);
  --pf-v5-c-button--m-primary--active--Color: var(--ux-primary-soft-fg);
  --pf-v5-c-button--disabled--BackgroundColor: var(--ux-primary-soft-active);
  --pf-v5-c-button--disabled--Color: var(--ux-primary-soft-fg);
  padding-block: 0.5625rem;
  font-size: 0.9375rem;
}

/* The stock theme paints a dark photographic background here. */
.login-pf body {
  background: var(--ux-bg);
  color: var(--ux-fg);
  font-family: var(--ux-font-sans);
}

.pf-v5-c-login__container {
  max-width: 34rem;
  margin-inline: auto;
  margin-block: auto;
  background: var(--ux-card);
  border: 1px solid var(--ux-border);
  border-radius: var(--ux-radius-card);
  box-shadow: 0 1px 2px rgba(16, 18, 29, 0.05), 0 8px 24px rgba(16, 18, 29, 0.06);
  overflow: hidden;
}

.pf-v5-c-login__main > .pf-v5-c-login__main-body {
  display: flex;
  flex-direction: column;
}

.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer {
  order: 1;
  padding-block-start: 1rem;
}

.pf-v5-c-login__main-body:has(#kc-social-providers) > .pf-v5-c-alert,
#kc-form {
  order: 2;
}

.pf-v5-c-login__main-footer {
  flex-direction: column;
}

#kc-social-providers { order: 1; }
.pf-v5-c-login__main-footer-band { order: 2; }

.pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band {
  --pf-v5-c-login__main-footer-band--BorderTopWidth: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 0;
  /* The band's own padding is the whole gap either side of the rule, so it sits evenly. */
  padding-block: 1.5rem;
  padding-inline: 0;
}

.pf-v5-c-login__main-footer-band::before,
.pf-v5-c-login__main-footer-band::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ux-border);
}

.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: transparent;
  --pf-v5-c-login__main--BoxShadow: none;
  margin-block: 0;
}

#kc-header {
  margin-block: 0;
  padding-top: var(--ux-brand-pad-top);
  padding-bottom: var(--ux-brand-gap);
  padding-inline: var(--ux-card-pad-x);
}

#kc-header-wrapper {
  margin-bottom: 0;
  height: 3.25rem;
  overflow: hidden;
  text-align: left;
  text-indent: 100%;
  white-space: nowrap;
  background: url('../img/logo.svg') no-repeat center / contain;
}

.pf-v5-c-login__main > .pf-v5-c-login__main-header,
.pf-v5-c-login__main > .pf-v5-c-login__main-body {
  padding-inline: var(--ux-card-pad-x);
}

.pf-v5-c-login__main-header {
  border-block-start: 0;
  padding-top: 0;
  padding-bottom: 1.25rem;
}

#kc-page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ux-fg);
}

.pf-v5-c-form__group:not(:has(*)) {
  display: none;
}

.pf-v5-c-form__label-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ux-fg);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: var(--ux-radius-ctl);
  --pf-v5-c-form-control--before--BorderTopColor: var(--ux-border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ux-border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--ux-border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ux-border);
  --pf-v5-c-form-control--after--BorderBottomColor: var(--ux-border);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--ux-border-strong);
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
}

.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--before--BorderTopColor: var(--ux-danger-border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ux-danger-border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--ux-danger-border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ux-danger-border);
}

.pf-v5-c-form-control.pf-m-error:focus-within {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* The group owns the border for a field inside it, so the error has to land there. */
.pf-v5-c-input-group:has(.pf-v5-c-form-control.pf-m-error) {
  box-shadow: inset 0 0 0 1px var(--ux-danger-border);
}

.pf-v5-c-input-group:has(.pf-v5-c-form-control.pf-m-error):focus-within {
  box-shadow: inset 0 0 0 1px var(--ux-danger-border), 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: var(--ux-radius-ctl);
}

.pf-v5-c-input-group {
  box-shadow: inset 0 0 0 1px var(--ux-border);
  border-radius: var(--ux-radius-ctl);
  background: var(--ux-card);
  overflow: hidden;
}

.pf-v5-c-input-group:focus-within {
  box-shadow: inset 0 0 0 1px var(--ux-primary), 0 0 0 3px rgba(11, 126, 194, 0.28);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: transparent;
  --pf-v5-c-form-control--before--BorderTopWidth: 0;
  --pf-v5-c-form-control--before--BorderRightWidth: 0;
  --pf-v5-c-form-control--before--BorderBottomWidth: 0;
  --pf-v5-c-form-control--before--BorderLeftWidth: 0;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
}

/* The group owns the ring now; the field must not draw a second one inside it. */
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  box-shadow: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--Color: var(--ux-muted);
  --pf-v5-c-button--m-control--hover--Color: var(--ux-primary);
  --pf-v5-c-button--m-control--focus--Color: var(--ux-primary);
  --pf-v5-c-button--m-control--active--Color: var(--ux-primary);
  --pf-v5-c-button--m-control--BorderRadius: 0;
  --pf-v5-c-button--m-control--after--BorderWidth: 0;
  --pf-v5-c-button--m-control--after--BorderBottomColor: transparent;
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: transparent;
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: transparent;
  padding-inline: 0.875rem;
}

/* Edge draws a reveal control of its own; two of them is one too many. */
input[type='password']::-ms-reveal {
  display: none;
}

.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 3px rgba(11, 126, 194, 0.28);
  border-radius: var(--ux-radius-ctl);
}

.pf-v5-c-form-control > input:focus {
  outline: none;
}

.pf-v5-c-login__main-footer-band-item {
  color: var(--ux-muted);
  font-size: 0.8125rem;
}

#kc-social-providers ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block: 0;
  padding-block: 0;
}

#kc-social-providers li {
  padding-block-end: 0 !important;
}

#social-microsoft {
  --pf-v5-c-button--after--BorderWidth: 0;
  justify-content: center !important;
  gap: 0.5rem;
  background: var(--ux-emphasis);
  color: #ffffff;
  padding-block: 0.8125rem;
  font-weight: 600;
}

#social-microsoft > span {
  margin: 0 !important;
}

#social-microsoft:hover {
  background: var(--ux-emphasis-hover);
}

#kc-social-providers #social-microsoft svg {
  filter: none;
  fill: #ffffff;
  height: 1.125rem;
  width: 1.125rem;
}

.pf-v5-c-alert.pf-m-inline {
  border-radius: var(--ux-radius-ctl);
}