@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap');

:root {
  --ap: #7B35B0;
  --ap-glow: rgba(123,53,176,0.22);
  --bg: #0D0D0F;
  --surface: #1A1A20;
  --surface2: #222228;
  --border: rgba(255,255,255,0.11);
  --text: #F0EEF4;
  --text2: #8A8898;
  --text3: #3A3848;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }

body {
  font-family: 'Roboto', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1400px;
  height: 1000px;
  background: radial-gradient(ellipse at center,
    rgba(123,53,176,0.22) 0%,
    rgba(123,53,176,0.10) 35%,
    rgba(123,53,176,0.03) 60%,
    transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ── PAGE CENTER ── */
.pf-v5-c-login {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 24px !important;
  position: relative !important;
  z-index: 1 !important;
}

.pf-v5-c-login__container {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.pf-v5-c-login__header { display: none !important; }

/* ── CARD ── */
.pf-v5-c-login__main {
  background: var(--surface) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  isolation: isolate !important;
  border: none !important;
}

/* ── HEADER ── */
.pf-v5-c-login__main-header {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 28px 40px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.pf-v5-c-login__main-header::before {
  content: '';
  display: block;
  width: 200px;
  height: 46px;
  background: url('../logo-theme.svg') center/contain no-repeat;
  opacity: 0.95;
}

.pf-v5-c-title.pf-m-3xl, h1.pf-v5-c-title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text2) !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
}

/* ── FORM BODY ── */
.pf-v5-c-login__main-body {
  padding: 28px 40px 24px !important;
  background: var(--surface) !important;
}

.pf-v5-c-form__group { margin-bottom: 16px !important; }
.pf-v5-c-form__group-label { padding-bottom: 6px !important; }

.pf-v5-c-form__label-text {
  font-family: 'Roboto', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6A6878 !important;
}

/* ── KILL ALL PATTERNFLY BORDERS ON FORM CONTROL ── */
.pf-v5-c-form-control,
.pf-v5-c-form-control:hover,
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--after--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0px !important;
  --pf-v5-c-form-control--BorderColor: transparent !important;
  --pf-v5-c-form-control--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--hover--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  min-height: unset !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
  content: none !important;
}

/* ── ACTUAL INPUT ── */
.pf-v5-c-form-control input,
.pf-v5-c-form-control__input {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.pf-v5-c-form-control input:focus {
  border-color: var(--ap) !important;
  box-shadow: 0 0 0 3px var(--ap-glow) !important;
}

input::placeholder { color: var(--text3) !important; }

/* ── PASSWORD INPUT GROUP ── */
/* The group wraps [input-item][button-item] in a flex row */
.pf-v5-c-input-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
}

/* also kill ::after on input-group */
.pf-v5-c-input-group::after,
.pf-v5-c-input-group::before {
  display: none !important;
  content: none !important;
}

.pf-v5-c-input-group__item.pf-m-fill {
  flex: 1 !important;
  min-width: 0 !important;
}

/* password input: leave room for toggle on the right */
.pf-v5-c-input-group .pf-v5-c-form-control input[type="password"],
.pf-v5-c-input-group .pf-v5-c-form-control input[type="text"] {
  border-radius: 8px 0 0 8px !important;
  padding-right: 14px !important;
  border-right: none !important;
}

/* toggle button — sits flush right, same height as input */
.pf-v5-c-input-group__item:not(.pf-m-fill) {
  display: flex !important;
  align-items: stretch !important;
}

.pf-v5-c-button.pf-m-control {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
  color: var(--text2) !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  outline: none !important;
}

.pf-v5-c-button.pf-m-control:hover {
  background: rgba(255,255,255,0.13) !important;
  color: var(--text) !important;
}

/* ── REMEMBER ME + FORGOT PASSWORD ── */
/* These live inside .pf-v5-c-helper-text below the password group */
.pf-v5-c-helper-text {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  min-height: 24px !important;
}

.pf-v5-c-helper-text .pf-v5-c-helper-text__item {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* remember me check */
.pf-v5-c-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pf-v5-c-check__input {
  accent-color: var(--ap) !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.pf-v5-c-check__label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #6A6878 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer !important;
  line-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* forgot password link */
.pf-v5-c-helper-text__item-text a {
  font-size: 12px !important;
  color: var(--ap) !important;
  text-decoration: none !important;
  line-height: 15px !important;
  vertical-align: middle !important;
  display: block !important;
}

.pf-v5-c-helper-text__item-text a:hover { color: #a060d8 !important; }

/* hide the helper text container's own border/background */
.pf-v5-c-form-helper-text,
.pf-v5-c-helper-text__item-text {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── SIGN IN BUTTON ── */
.pf-v5-c-form__actions { padding-top: 0 !important; }
.pf-v5-c-form__group:has(.pf-v5-c-form__actions) { margin-bottom: 0 !important; }

#kc-login.pf-v5-c-button,
.pf-v5-c-button.pf-m-primary.pf-m-block {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

#kc-login:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: #ffffff !important;
}

/* ── SOCIAL FOOTER — "OR" divider + google button ── */
.pf-v5-c-login__main-footer {
  background: var(--surface) !important;
  padding: 20px 40px 32px !important;
}

/* The footer band holds "OR" text */
.pf-v5-c-login__main-footer-band {
  background: transparent !important;
  border: none !important;
  padding: 0 0 16px 0 !important;
  margin: 0 !important;
}

/* "OR" — centered with lines either side */
.pf-v5-c-login__main-footer-band-item {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

/* secondary helper text class that wraps the OR text — make transparent */
.pf-v5-u-font-size-sm,
.pf-v5-u-color-200 {
  color: inherit !important;
  font-size: inherit !important;
}

/* social buttons from custom social-providers.ftl */
.ac-social-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ac-social-item { margin-bottom: 10px !important; }

.ac-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 46px !important;
  width: 100% !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text2) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.ac-social-link:hover {
  border-color: var(--ap) !important;
  background: rgba(123,53,176,0.1) !important;
  color: var(--text) !important;
}

/* ── ALERTS ── */
.pf-v5-c-alert.pf-m-inline {
  background: rgba(180,30,30,0.14) !important;
  border: 1px solid rgba(180,30,30,0.28) !important;
  border-radius: 8px !important;
  margin-bottom: 18px !important;
}
.pf-v5-c-alert__title { color: #f08080 !important; font-size: 13px !important; }

a, a:visited { color: var(--ap) !important; text-decoration: none !important; }
a:hover { color: #a060d8 !important; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ap); border-radius: 2px; }

/* ── PRECISE FIXES v8 patch ── */

/* 1. Kill ALL borders/outlines on password toggle button at every state */
.pf-v5-c-button.pf-m-control,
.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus,
.pf-v5-c-button.pf-m-control:active,
.pf-v5-c-button.pf-m-control:focus-visible,
.pf-v5-c-button.pf-m-control:focus-within {
  --pf-v5-c-button--m-control--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--hover--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--focus--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--active--after--BorderColor: transparent !important;
  border-bottom: none !important;
  border-bottom-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-control::after,
.pf-v5-c-button.pf-m-control::before {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* 2. OR — match label style (uppercase, same size/color as PASSWORD label) */
.pf-v5-c-login__main-footer-band-item {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6A6878 !important;
}

/* 3. Checkbox vertical alignment — the label wraps both input and span,
   use flex to align them on center axis */
.pf-v5-c-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.pf-v5-c-check__input {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  vertical-align: middle !important;
  align-self: center !important;
}

.pf-v5-c-check__label {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  align-self: center !important;
}

/* The label element wrapping checkbox+text — also flex center */
.pf-v5-c-check > label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}