:root {
  --noiro-bg: #dce0e8;
  --noiro-bg-soft: #eff1f5;
  --noiro-surface: #e6e9ef;
  --noiro-input-bg: #f7f8fb;
  --noiro-primary: #1e66f5;
  --noiro-primary-hover: #7287fd;
  --noiro-text: #4c4f69;
  --noiro-muted: #6c6f85;
  --noiro-border: #bcc0cc;
  --noiro-border-light: #acb0be;
  --noiro-danger: #d20f39;
}

.login-pf body {
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(30, 102, 245, 0.12), transparent 70%),
    radial-gradient(700px 420px at 95% 10%, rgba(114, 135, 253, 0.10), transparent 66%),
    var(--noiro-bg);
  color: var(--noiro-text);
}

.login-pf-page {
  min-height: 100vh;
  padding: 34px 16px;
}

.login-pf-page .card-pf {
  max-width: 430px;
  width: 100%;
  margin: 24px auto 0;
}

.card-pf {
  background: var(--noiro-bg-soft);
  border: 1px solid var(--noiro-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(76, 79, 105, 0.16);
  padding: 42px 34px 38px;
}

#kc-page-title,
#kc-header-wrapper {
  color: var(--noiro-text);
}

#kc-header {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 22px;
}

#kc-header-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 430px;
  min-height: 62px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--noiro-muted);
}

.noiro-kc-header-spacer {
  min-width: 0;
}

.noiro-kc-header-logo {
  display: block;
  width: 62px;
  height: 62px;
  background: url("../img/noiro-logo-light.svg") center/contain no-repeat;
}

.noiro-kc-header-realm {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

#kc-page-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.pf-c-button.pf-m-control {
  --pf-c-button--m-control--after--BorderTopColor: var(--noiro-border);
  --pf-c-button--m-control--after--BorderRightColor: var(--noiro-border);
  --pf-c-button--m-control--after--BorderBottomColor: var(--noiro-border);
  --pf-c-button--m-control--after--BorderLeftColor: var(--noiro-border);
  --pf-c-button--m-control--Color: var(--noiro-text);
  --pf-c-button--m-control--BackgroundColor: var(--noiro-surface);
}

.pf-c-button.pf-m-primary,
#kc-login {
  background: var(--noiro-primary);
  border-color: var(--noiro-primary);
  color: var(--noiro-bg-soft);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  min-height: 48px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
  box-shadow: 0 12px 26px rgba(30, 102, 245, 0.22);
}

.pf-c-button.pf-m-primary::after,
#kc-login::after {
  border-color: transparent;
}

.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
#kc-login:hover,
#kc-login:focus {
  background: #174fc7;
  border-color: #174fc7;
  box-shadow: 0 14px 30px rgba(30, 102, 245, 0.28);
}

a {
  color: var(--noiro-primary);
}

.pf-c-form-control {
  --pf-c-form-control--BackgroundColor: var(--noiro-input-bg);
  --pf-c-form-control--Color: var(--noiro-text);
  --pf-c-form-control--BorderTopColor: var(--noiro-border);
  --pf-c-form-control--BorderRightColor: var(--noiro-border);
  --pf-c-form-control--BorderBottomColor: var(--noiro-border);
  --pf-c-form-control--BorderLeftColor: var(--noiro-border);
  --pf-c-form-control--hover--BorderBottomColor: var(--noiro-primary);
  --pf-c-form-control--focus--BorderBottomColor: var(--noiro-primary);
  --pf-c-form-control--placeholder--Color: var(--noiro-muted);
  background-color: var(--noiro-input-bg);
  border-radius: 8px;
  min-height: 40px;
}

.pf-c-form-control:focus-visible {
  outline: 2px solid var(--noiro-primary);
  outline-offset: -2px;
}

.pf-c-input-group::before {
  border-color: var(--noiro-border);
  border-radius: 8px;
}

.pf-c-input-group:focus-within::before {
  border-color: var(--noiro-primary);
}

.pf-c-input-group,
.pf-v5-c-input-group {
  background: var(--noiro-input-bg);
  border-radius: 8px;
}

.pf-c-form-control[aria-invalid="true"],
.pf-v5-c-form-control[aria-invalid="true"] {
  border-color: var(--noiro-danger);
  background-image: none !important;
  box-shadow: none;
  padding-right: 0.75rem;
}

.pf-c-input-group .pf-c-button,
.pf-v5-c-input-group .pf-v5-c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: var(--noiro-surface);
  border-color: var(--noiro-border);
  color: var(--noiro-text);
  border-radius: 0 8px 8px 0;
  min-height: 40px;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pf-c-input-group .pf-c-button:hover,
.pf-c-input-group .pf-c-button:focus,
.pf-v5-c-input-group .pf-v5-c-button:hover,
.pf-v5-c-input-group .pf-v5-c-button:focus {
  background: rgba(30, 102, 245, 0.08);
  border-color: var(--noiro-primary);
  color: var(--noiro-primary);
}

.pf-c-input-group .pf-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control {
  border-radius: 8px 0 0 8px;
}

#kc-username {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 18px;
}

#kc-attempted-username {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--noiro-surface);
  border: 1px solid var(--noiro-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--noiro-muted);
  cursor: default;
}

#reset-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  min-height: 40px;
  padding: 0;
  background: var(--noiro-surface);
  border: 1px solid var(--noiro-border);
  border-radius: 0 8px 8px 0;
  color: var(--noiro-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#reset-login:hover,
#reset-login:focus {
  background: rgba(30, 102, 245, 0.08);
  border-color: var(--noiro-primary);
  color: var(--noiro-primary);
}

#reset-login .kc-login-tooltip {
  display: inline-flex;
  align-items: center;
}

#reset-login .kc-tooltip-text {
  display: none;
}

/* Organization selection page */

#kc-user-organizations h2 {
  font-size: 18px;
  font-weight: 400;
  color: var(--noiro-muted);
  text-align: center;
  margin-bottom: 16px;
}

#kc-user-organizations .kc-social-links {
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#kc-user-organizations .kc-social-links li {
  width: 100%;
}

#kc-user-organizations .kc-social-item {
  display: block;
  width: 100%;
  background: var(--noiro-primary);
  color: var(--noiro-bg-soft);
  border: none;
  box-shadow: none;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

#kc-user-organizations .kc-social-item:hover,
#kc-user-organizations .kc-social-item:focus {
  background: var(--noiro-primary-hover);
  color: var(--noiro-bg-soft);
}

#kc-user-organizations .kc-social-item::after {
  display: none;
}

#kc-user-organizations .kc-social-provider-name {
  font-size: 16px;
}