/* arayaj.photo login overlay on keycloak.v2 / PatternFly v5.
   Tokens match webui/src/app/globals.css (OKLCH chroma 0). */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root,
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg: oklch(0.13 0 0);
  --bg-pane: oklch(0.17 0 0);
  --bg-inset: oklch(0.2 0 0);
  --bg-bar: oklch(0.19 0 0);
  --fg: oklch(0.96 0 0);
  --fg-dim: oklch(0.72 0 0);
  --fg-faint: oklch(0.6 0 0);
  --rule: oklch(0.32 0 0);
  --rule-soft: oklch(0.26 0 0);
  --accent: oklch(0.96 0 0);
  --accent-strong: oklch(1 0 0);
  --accent-ink: oklch(0.13 0 0);
  --dot-a: oklch(0.96 0 0);
  --dot-b: oklch(0.55 0 0);
  --dot-c: oklch(0.32 0 0);
  --glow: 0 0 0 1px var(--rule), 0 1px 0 0 oklch(0.3 0 0 / 0.5) inset, 0 8px 30px -18px oklch(1 0 0 / 0.18);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-chip: 6px;
  color-scheme: dark;
}

:root[data-theme="light"],
html[data-theme="light"] {
  --bg: oklch(0.97 0 0);
  --bg-pane: oklch(1 0 0);
  --bg-inset: oklch(0.94 0 0);
  --bg-bar: oklch(0.93 0 0);
  --fg: oklch(0.15 0 0);
  --fg-dim: oklch(0.4 0 0);
  --fg-faint: oklch(0.48 0 0);
  --rule: oklch(0.84 0 0);
  --rule-soft: oklch(0.9 0 0);
  --accent: oklch(0.15 0 0);
  --accent-strong: oklch(0.08 0 0);
  --accent-ink: oklch(0.97 0 0);
  --dot-a: oklch(0.15 0 0);
  --dot-b: oklch(0.5 0 0);
  --dot-c: oklch(0.42 0 0);
  --glow: 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 20px -12px oklch(0 0 0 / 0.22);
  color-scheme: light;
}

html,
html.login-pf,
html.codestrux-login,
body,
body#keycloak-bg,
#keycloak-bg,
.codestrux-login,
.login-pf,
.pf-c-login,
.pf-v5-c-login,
.pf-v5-theme-dark {
  background: var(--bg) !important;
  background-image: none !important;
  background-size: auto !important;
  color: var(--fg) !important;
  font-family: var(--mono) !important;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv02" 1;
  min-height: 100%;
}

body.login-pf,
body.codestrux-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body::before {
  content: "codestrux@photo:~$ arayaj.photo";
  display: block;
  width: min(28rem, calc(100% - 32px));
  margin: 2.5rem auto 0.85rem;
  color: var(--fg-dim);
  font-size: 12.5px;
  font-weight: 600;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, oklch(1 0 0 / 0.05), transparent 60%);
}

html[data-theme="light"] body::after {
  opacity: 0.35;
}

header#kc-header,
header.pf-v5-c-login__header,
#kc-header,
.pf-c-login__header,
.pf-v5-c-login__header,
.kc-logo-text,
div#kc-header-wrapper,
#kc-header-wrapper,
.pf-c-brand,
.pf-v5-c-brand {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.pf-c-login,
.pf-v5-c-login,
.pf-c-login__container,
.pf-v5-c-login__container,
#kc-container,
#kc-container-wrapper {
  width: min(28rem, calc(100% - 32px));
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 3rem;
}

.pf-c-login__main,
.pf-v5-c-login__main,
#kc-content,
#kc-content-wrapper,
#kc-form,
.card-pf,
.pf-c-card,
.pf-v5-c-card,
.codestrux-pane,
.codestrux-login-card {
  background: var(--bg-pane) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glow) !important;
  color: var(--fg) !important;
  overflow: hidden;
  --pf-v5-c-login__main--BackgroundColor: var(--bg-pane);
  --pf-v5-c-login__main--BorderTopColor: var(--rule);
  --pf-v5-c-login__main--BorderTopWidth: 1px;
  --pf-v5-c-login__main--before--Height: 38px;
  --pf-v5-c-login__main--before--BackgroundColor: var(--bg-bar);
}

.pf-v5-c-login__main,
.pf-c-login__main {
  --pf-v5-c-login__main--BorderTopWidth: 0 !important;
  --pf-v5-c-login__main--BorderTopColor: transparent !important;
  border-top: 0 !important;
  border-block-start: 0 !important;
  box-shadow: var(--glow) !important;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-c-form-control::before,
.pf-c-form-control::after {
  border-color: var(--rule) !important;
  background: transparent !important;
  --pf-v5-c-form-control--after--BorderBottomColor: var(--accent);
}

.pf-v5-c-form__label-required,
.required,
span.pf-v5-c-form__label-required {
  color: var(--fg) !important;
}

.pf-v5-c-login__main::before,
.pf-c-login__main::before {
  content: "codestrux@photo:~/kc";
  display: block;
  padding: 9px 70px 9px 14px;
  background-color: var(--bg-bar) !important;
  background-image:
    radial-gradient(circle, var(--dot-a) 50%, transparent 51%),
    radial-gradient(circle, var(--dot-b) 50%, transparent 51%),
    radial-gradient(circle, var(--dot-c) 50%, transparent 51%);
  background-size: 11px 11px;
  background-position:
    calc(100% - 42px) 50%,
    calc(100% - 25px) 50%,
    calc(100% - 8px) 50%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-dim);
  font-size: 12.5px;
  font-weight: 600;
  height: auto !important;
}

#kc-page-title,
.pf-c-title,
.pf-v5-c-title,
h1#kc-page-title,
.pf-v5-c-login__main-header h1 {
  font-family: var(--mono) !important;
  font-size: 1.18rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--fg) !important;
  margin: 0 0 0.75em !important;
}

.pf-v5-c-login__main-body,
.pf-c-login__main-body,
#kc-form-wrapper,
#kc-content-wrapper {
  padding: clamp(18px, 2.4vw, 26px) !important;
}

.pf-c-form-control,
.pf-v5-c-form-control,
.pf-v5-c-text-input-group,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
  background: var(--bg-inset) !important;
  color: var(--fg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-chip) !important;
  font-family: var(--mono) !important;
  box-shadow: none !important;
}

.pf-v5-c-text-input-group__header,
.pf-v5-c-input-group {
  background: transparent !important;
  border: 0 !important;
}

.pf-c-button,
.pf-v5-c-button,
.pf-v5-c-button.pf-m-primary,
input[type="submit"],
button[type="submit"],
#kc-login,
#kc-register,
#authenticateWebAuthnButton {
  background: var(--accent) !important;
  background-image: none !important;
  color: var(--accent-ink) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-chip) !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  min-height: 40px;
  box-shadow: none !important;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--accent);
  --pf-v5-c-button--m-primary--Color: var(--accent-ink);
  --pf-v5-c-button--m-primary--after--BorderColor: transparent;
}

.pf-c-button:hover,
.pf-v5-c-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--accent-strong) !important;
}

.pf-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-control,
#kc-try-another-way,
a#kc-try-another-way,
#kc-current-webauthn-link,
a[id="webauthn"] {
  background: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--rule) !important;
}

a,
a.pf-v5-c-button.pf-m-link,
#kc-registration-container a,
#kc-info a,
.pf-v5-c-login__main-footer-band a {
  color: var(--fg) !important;
  text-decoration: none;
}

a:hover {
  color: var(--accent) !important;
}

#kc-info,
.pf-c-login__main-footer,
.pf-v5-c-login__main-footer,
#kc-registration,
#kc-registration-container,
.pf-v5-c-login__main-footer-band {
  color: var(--fg-dim) !important;
  background: transparent !important;
  border-color: var(--rule-soft) !important;
}

.alert-error,
.pf-m-danger,
.pf-v5-c-alert.pf-m-danger,
#input-error,
#input-error-password,
span[id^="input-error"] {
  color: oklch(0.78 0 0) !important;
  background: transparent !important;
  border-color: var(--rule) !important;
}

.pf-v5-c-alert {
  background: var(--bg-inset) !important;
  border: 1px solid var(--rule) !important;
  color: var(--fg) !important;
}

.select-auth-box,
#kc-select-try-another,
.pf-v5-c-login__main-header-utilities,
.pf-v5-c-menu-toggle,
select,
.pf-v5-c-select {
  font-family: var(--mono) !important;
  color: var(--fg) !important;
  background: var(--bg-inset) !important;
  border-color: var(--rule) !important;
}

label,
.pf-c-form__label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-check__label {
  color: var(--fg-dim) !important;
  font-family: var(--mono) !important;
}

.pf-v5-c-check__input:checked,
input[type="checkbox"]:checked {
  accent-color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 1px solid var(--accent) !important;
  outline-offset: 2px;
}

.pf-v5-c-button__icon,
.pf-v5-c-form-control__icon,
button[aria-label="Show password"],
button[aria-label="Hide password"] {
  color: var(--fg-dim) !important;
}

.pf-v5-c-helper-text,
#kc-username,
.kc-feedback-text {
  color: var(--fg-dim) !important;
  font-family: var(--mono) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}