/* Extend Keycloak's form templates with the platform's red-team identity. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  --ap-ground: #0c080e;
  --ap-panel: #171d2a;
  --ap-raised: #30212d;
  --ap-ink: #f5e9ee;
  --ap-muted: #c7b8c4;
  --ap-line: #39313e;
  --ap-red: #ff8795;
  --ap-brand: #dc143c;
  --pf-global--primary-color--100: var(--ap-red);
  --pf-global--primary-color--200: #ffadbd;
  --pf-global--Color--100: var(--ap-ink);
  --pf-global--Color--200: var(--ap-muted);
}
html.login-pf { background: var(--ap-ground); }
.login-pf body {
  min-height: 100vh;
  height: auto;
  color: var(--ap-ink);
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(204, 39, 68, .15), transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(50, 39, 94, .25), transparent 60%),
    var(--ap-ground);
}
.login-pf-page { position: relative; z-index: 1; padding: 40px 20px 48px; }
#kc-header, #kc-header-wrapper {
  color: var(--ap-red);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: center;
}
#kc-header-wrapper {
  position: relative;
  padding: 28px 0 26px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .14em;
  text-shadow: 0 0 24px rgba(220, 20, 60, .24);
}
#kc-header-wrapper::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  background: url('../img/agentic-pwn-logo.png') center / contain no-repeat;
  animation: beetle-impact .4667s linear 3s infinite;
}
/* The header is the flight arena: decoration never crosses the login form. */
#kc-header::after { pointer-events: none; }
#kc-header { position: relative; }
#kc-header::after {
  content: '';
  position: absolute;
  left: calc(50% - 180px); top: 10px;
  width: 240px; height: 108px;
  background: url('../img/starship-fleet.svg') center / contain no-repeat;
  filter: drop-shadow(-3px 0 5px rgba(220, 20, 60, .3));
  animation: starship-attack 3s ease-out forwards;
}
@keyframes starship-attack {
  from { transform: translate(-50px, 24px); }
  to { transform: translate(0, 0); }
}
@keyframes beetle-impact {
  0%, 52%, 92%, 100% { filter: none; transform: translateX(0); }
  54% { filter: brightness(1.6) drop-shadow(0 0 7px #dc143c); transform: translateX(1px); }
  72% { filter: brightness(1.2) drop-shadow(0 0 4px #dc143c); transform: translateX(-1px); }
}
.login-pf-page .card-pf {
  position: relative;
  max-width: 460px;
  padding: 28px 34px 34px;
  background: linear-gradient(150deg, #2b1e2b, var(--ap-panel) 70%);
  border: 1px solid var(--ap-line);
  border-top: 2px solid var(--ap-red);
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5), 0 0 28px rgba(220, 20, 60, .04);
}
/* Circuit artwork sits outside the form and never obscures controls. */
.login-pf-page .card-pf::after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 0; right: 0; top: 100%;
  height: 110px;
  background: url('../img/agent-network.svg') center top / contain no-repeat;
}
h1#kc-page-title {
  color: var(--ap-red);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.025em;
  margin: 2px 0 26px;
}
.login-pf-page .login-pf-header { margin-bottom: 0; }
#kc-content, #kc-content-wrapper { color: var(--ap-ink); }
a { color: #ffadbd; }
a:hover { color: #ffc4b6; text-decoration: underline; }
.pf-c-form__label, .pf-c-form__label-text, label {
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 500;
}
.pf-c-form-control, .form-control {
  color: var(--ap-ink);
  background: #100b13;
  border: 1px solid #514052;
  border-radius: 6px;
  min-height: 48px;
  font-size: 14px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pf-c-form-control:hover, .form-control:hover { border-color: #8b677c; }
.pf-c-form-control:focus, .form-control:focus {
  border-color: var(--ap-brand);
  background: #100b13;
  color: var(--ap-ink);
  box-shadow: 0 0 0 3px rgba(220, 20, 60, .14);
}
.pf-c-form-control::placeholder, .form-control::placeholder { color: #ad96a6; }
.pf-c-button { border-radius: 3px; font-family: inherit; }
.pf-c-button.pf-m-primary, .btn-primary {
  color: #fff4f7;
  background: linear-gradient(180deg, #d71f4c 0%, #ac1036 100%);
  border: 1px solid #e74a70;
  border-radius: 6px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 1px 1px rgba(40, 0, 12, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
    0 4px 12px rgba(0, 0, 0, .28), 0 0 20px rgba(220, 20, 60, .12);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pf-c-button.pf-m-primary:hover, .btn-primary:hover {
  background: linear-gradient(180deg, #e42b58 0%, #bb1640 100%);
  border-color: #ff8ba6;
  color: #fff4f7;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
    0 6px 18px rgba(0, 0, 0, .3), 0 0 24px rgba(220, 20, 60, .22);
}
.pf-c-button.pf-m-primary:focus-visible, .btn-primary:focus-visible {
  outline: 2px solid #ffd1dd;
  outline-offset: 4px;
}
.pf-c-button.pf-m-primary:active, .btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(40, 0, 12, .25);
}
.pf-c-button.pf-m-primary:disabled, .btn-primary:disabled {
  opacity: .55;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}
.pf-c-button.pf-m-control, .pf-c-button.pf-m-secondary {
  color: var(--ap-muted);
  background: var(--ap-raised);
  border: 1px solid #514052;
}
.pf-c-button::after { border-radius: 6px; }
.pf-c-input-group { background: #100b13; border-radius: 6px; }
.pf-c-input-group > .pf-c-form-control, .pf-c-input-group > .form-control { border-radius: 6px 0 0 6px; }
.pf-c-input-group > .pf-c-button { border-radius: 0 6px 6px 0; }
#kc-form-buttons { margin-top: 24px; }
:focus-visible { outline: 2px solid #ffadbd; outline-offset: 3px; }
#kc-info-wrapper, .kc-social-section, .kc-social-gray {
  background: #100b13;
  color: var(--ap-muted);
}
#kc-info-wrapper { border-top: 1px solid var(--ap-line); }
.pf-c-alert {
  background: #30212d;
  color: var(--ap-ink);
  border: 1px solid #514052;
  border-radius: 3px;
}
.pf-c-alert__title, .kc-feedback-text { color: var(--ap-ink); }
.pf-c-alert.pf-m-danger, .alert-error {
  border-color: #e56b6b;
  background: #2b1418;
}
.pf-c-form__helper-text.pf-m-error, #input-error { color: #ffb3b3; }
#kc-form-options .checkbox, .login-pf-page .login-pf-signup,
.subtitle, #kc-username { color: var(--ap-muted); }
#kc-totp-secret-key { background: #100b13; color: var(--ap-ink); }
#kc-totp-secret-qr-code { background: white; padding: 8px; }
.kc-social-provider-name { color: var(--ap-ink); }
.kc-social-item { border: 1px solid #514052; }
.platform-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--ap-line);
}
.platform-logos img {
  display: block; width: 74px; height: 22px; object-fit: contain;
}
@media (max-width: 400px) {
  .platform-logos { gap: 12px; }
  .platform-logos img { width: 56px; height: 18px; }
}
@media (max-width: 767px) {
  .login-pf-page { padding: 20px 16px 90px; }
  #kc-header { float: none; padding: 0; }
  #kc-header-wrapper { padding: 12px 0 22px; font-size: 18px; }
  #kc-header::after { top: -6px; }
  .login-pf-page .card-pf { margin: 0 auto; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #kc-header::after, #kc-header-wrapper::after { display: none; }
}
/* PatternFly draws an additional border around input groups and controls. */
.pf-c-input-group::after, .pf-c-button.pf-m-control::after { border-color: #514052; border-radius: 6px; }
.pf-c-input-group > .pf-c-button::after { border-radius: 0 6px 6px 0; }
.pf-c-input-group:focus-within { box-shadow: 0 0 0 3px rgba(220, 20, 60, .14); }
.pf-c-input-group:focus-within::after { border-color: var(--ap-brand); }
.pf-c-input-group > .pf-c-form-control:focus { box-shadow: none; }
#kc-info { margin: 24px -34px -34px; }
#kc-info-wrapper { padding: 16px 34px; }
@media (max-width: 767px) {
  #kc-info { margin: 24px -24px -24px; }
  #kc-info-wrapper { padding: 16px 24px; }
  .kc-login-tooltip .kc-tooltip-text { left: auto; right: 0; top: 100%; }
}