/* ==========================================================================
   Fabrica — Keycloak login theme (child of keycloak.v2, CSS-only).

   Tokens below are the portal's ENGINEERING preset copied VERBATIM from
   portal/app/globals.css (exact oklch values). The login page has no
   theme-toggle JS, so DARK is the default here (:root) — matching the portal's
   "dark first" feel — and LIGHT is served via prefers-color-scheme, i.e. it
   follows the operating system. `color-scheme` is set per mode so native form
   controls, scrollbars and the caret match the surface.

   No PatternFly source is copied — we only re-skin PF5 (.pf-v5-c-*) class
   hooks that keycloak.v2 already emits. Own work.
   ========================================================================== */

/* --- Tokens: DARK (default) ---------------------------------------------- */
:root {
  color-scheme: dark;

  --fab-bg:               oklch(13% 0.010 260);
  --fab-surface:          oklch(17% 0.012 260);
  --fab-surface-elevated: oklch(22% 0.014 260);
  --fab-border:           oklch(28% 0.014 260);
  --fab-border-strong:    oklch(42% 0.018 260);

  --fab-text-primary:     oklch(96% 0.004 260);
  --fab-text-secondary:   oklch(78% 0.008 260);
  --fab-text-muted:       oklch(60% 0.010 260);
  --fab-text-on-accent:   oklch(13% 0.010 260);

  --fab-accent:           oklch(78% 0.16 220);
  --fab-accent-hover:     oklch(85% 0.14 220);
  --fab-accent-ring:      oklch(78% 0.16 220 / 0.45);

  --fab-radius-sm: 4px;
  --fab-radius-md: 7px;   /* primary button */
  --fab-radius-lg: 10px;  /* login card */
  --fab-weight-semibold: 600;

  --fab-shadow-lg: 0 24px 48px oklch(0% 0 0 / 0.70);

  --fab-mark: url("../img/fabrica-mark-dark.svg");
}

/* Fabrica login is ALWAYS dark (Rob-besluit): no prefers-color-scheme light
   override — the black/Trinity theme is the default regardless of the OS setting. */

/* --- Page + login card ---------------------------------------------------- */
/* Trinity-canvas background (N18 §2.1): near-black-blue base + a dot-grid gaas +
   two soft ambient glows (cyan accent + plane-purple), exactly the feel of the lab
   canvas. The dot-grid is a repeating radial-gradient (dot colour = the canvas
   --canvas-dot #2a3650, gap 22px); the glows are large, low-opacity radials that
   don't move. LIGHT mode (OS preference) softens all of it via the token swap. */
:root {
  --fab-canvas-bg:  #0b1220;   /* Trinity dark canvas base */
  --fab-canvas-dot: #223049;   /* dot-grid gaas */
  --fab-glow-cyan:   oklch(78% 0.16 220 / 0.14);
  --fab-glow-purple: oklch(55% 0.20 300 / 0.16);
}
body,
.pf-v5-c-login,
.pf-c-login,
.login-pf-page {
  color: var(--fab-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background-color: var(--fab-canvas-bg);
  /* base = the near-black-blue + the dot-grid gaas. The moving colour ("lava
     lamp") lives on the two animated blobs below (body::before/::after). */
  background-image: radial-gradient(circle, var(--fab-canvas-dot) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Lava-lamp: two big blurred colour blobs slowly drifting behind everything
   (Rob). Fixed to the viewport, pointer-events off, under the dot-grid content. --- */
@keyframes fab-lava-a {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(14vw, 10vh) scale(1.18); }
  66%  { transform: translate(6vw, -8vh) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes fab-lava-b {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-12vw, -6vh) scale(1.1); }
  66%  { transform: translate(-6vw, 10vh) scale(1.22); }
  100% { transform: translate(0, 0) scale(1); }
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
body::before {
  top: -18vh; left: -10vw;
  background: radial-gradient(circle, oklch(78% 0.16 220 / 0.30), transparent 68%);
  animation: fab-lava-a 34s ease-in-out infinite;
}
body::after {
  bottom: -20vh; right: -12vw;
  background: radial-gradient(circle, oklch(56% 0.21 300 / 0.32), transparent 70%);
  animation: fab-lava-b 42s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* The login card is an OBJECT on the grid (Rob): give it the Trinity TagCloud
   ambient glow — a big, soft cyan+purple aura blooming out from behind the card,
   exactly like the cluster-glow behind a node group on the lab canvas. The glow
   sits on a ::before behind the card (pointer-events:none, blurred, oversized). */
.pf-v5-c-login__main,
.pf-c-login__main {
  position: relative;
  background: color-mix(in oklch, var(--fab-surface) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--fab-border);
  border-radius: var(--fab-radius-lg);
  box-shadow: var(--fab-shadow-lg), 0 0 0 1px var(--fab-accent-ring);
  overflow: visible;   /* let the aura bloom past the card edge */
}
.pf-v5-c-login__main::before,
.pf-c-login__main::before {
  content: "";
  position: absolute;
  inset: -60px;                 /* bloom well past the card, like a TagCloud blob */
  z-index: -1;
  pointer-events: none;
  border-radius: 40px;          /* Trinity TagCloud rx=40 */
  background:
    radial-gradient(60% 55% at 30% 25%, oklch(78% 0.16 220 / 0.22), transparent 70%),
    radial-gradient(60% 55% at 75% 80%, oklch(55% 0.20 300 / 0.22), transparent 72%);
  filter: blur(28px);           /* Trinity feGaussianBlur ~25 */
  opacity: 0.9;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer,
.pf-c-login__main-header,
.pf-c-login__main-body,
.pf-c-login__main-footer {
  background: transparent;
  color: var(--fab-text-primary);
}

/* --- Brand header: mark + wordmark + tagline lockup (centered column) ------
   Stacked lockup: the mark on top, the "Fabrica" wordmark, then a two-line
   tagline (a bold small-caps line + a muted descriptor). Both tagline lines are
   CSS pseudo-content so the theme stays template-free. */
#kc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                     /* tight: wordmark block + descriptor as one group */
  text-align: center;
  padding: 26px 12px 22px;
  margin: 0;
}
#kc-header-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-size: 1.5rem;
  font-weight: var(--fab-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fab-text-primary);
  text-transform: none;
  background: none;
}
/* the mark, on top */
#kc-header-wrapper::before {
  content: "";
  width: 34px;
  height: 34px;
  background: var(--fab-mark) no-repeat center / contain;
}
/* big tagline line, right under the wordmark */
#kc-header-wrapper::after {
  content: "The AI-Native Knowledge Factory";
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: var(--fab-weight-semibold);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fab-text-secondary);
}
/* small descriptor line — pulled up tight so the two tagline lines read as one
   group under the wordmark (not floating near the card). */
#kc-header::after {
  content: "infrastructure labs · by Infracode";
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--fab-text-muted);
}

/* --- Inputs --------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
.pf-v5-c-form-control,
.pf-c-form-control {
  background: var(--fab-surface-elevated);
  border: 1px solid var(--fab-border);
  border-radius: var(--fab-radius-sm);
  color: var(--fab-text-primary);
}
.pf-v5-c-form-control > input,
.pf-c-form-control > input {
  background: transparent;
  color: var(--fab-text-primary);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
.pf-v5-c-form-control:focus-within,
.pf-c-form-control:focus-within {
  outline: none;
  border-color: var(--fab-accent);
  box-shadow: 0 0 0 3px var(--fab-accent-ring);
}

/* --- Primary button ------------------------------------------------------- */
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button,
#kc-login {
  background: var(--fab-accent);
  color: var(--fab-text-on-accent);
  border: 0;
  border-radius: var(--fab-radius-md);
  font-weight: var(--fab-weight-semibold);
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover,
#kc-login:hover {
  background: var(--fab-accent-hover);
  color: var(--fab-text-on-accent);
}

/* --- Links ---------------------------------------------------------------- */
a { color: var(--fab-accent); text-decoration: none; }
a:hover { color: var(--fab-accent-hover); text-decoration: underline; }

/* --- "Try another way" — quiet, muted, centered, right under the button --- */
#kc-select-try-another-way-form {
  margin-top: 8px;
  text-align: center;
}
#kc-select-try-another-way-form a,
#kc-select-try-another-way-form button,
#kc-select-try-another-way-form input {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--fab-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
#kc-select-try-another-way-form a:hover,
#kc-select-try-another-way-form button:hover,
#kc-select-try-another-way-form input:hover {
  color: var(--fab-accent);
}

/* --- Readable form labels/checkboxes on the dark card --------------------- */
/* "Sign out from other devices" (and any checkbox/option label) rendered dark-on-
   dark; force a light-grey so it's legible on the surface. */
.pf-v5-c-login__main label,
.pf-c-login__main label,
.pf-v5-c-check__label,
.pf-c-check__label,
#kc-form-options,
#kc-form-options span,
#kc-form-options label,
.checkbox,
.checkbox label,
label[for="logout-sessions"] {
  color: var(--fab-text-secondary) !important;
}

/* --- Select-authenticator ("Select login method": Passkey / Password) --------
   keycloak.v2 renders these options as WHITE PatternFly list items — re-skin them
   to the dark surface. Covers both the classic `select-auth-box-*` markup and the
   PF5 data-list/tile fallbacks so the option cards match the theme. */
.select-auth-container,
form#kc-select-credential-form,
#kc-select-credential-form,
.pf-v5-c-login__main-body ul,
.pf-v5-c-login__main-body ol {
  background: transparent !important;
  list-style: none;
}
.select-auth-box-parent,
.select-auth-box-parent[tabindex],
li.select-auth-box-parent,
.pf-v5-c-data-list,
.pf-v5-c-data-list__item,
.pf-v5-c-data-list__item-row,
.pf-v5-c-tile,
.pf-v5-c-tile__header {
  background: var(--fab-surface-elevated) !important;
  border-color: var(--fab-border) !important;
  color: var(--fab-text-primary) !important;
}
.select-auth-box-parent,
.pf-v5-c-data-list__item,
.pf-v5-c-tile {
  border: 1px solid var(--fab-border) !important;
  border-radius: var(--fab-radius-md) !important;
  margin-bottom: 10px;
  padding: 4px;
  transition: border-color .12s, background .12s;
}
.select-auth-box-parent:hover,
.pf-v5-c-data-list__item:hover,
.pf-v5-c-tile:hover {
  background: var(--fab-surface) !important;
  border-color: var(--fab-accent) !important;
  cursor: pointer;
}
.select-auth-box-headline,
.select-auth-box-headline span,
.pf-v5-c-tile__title,
.pf-v5-c-data-list__cell b,
.pf-v5-c-data-list__cell strong {
  color: var(--fab-text-primary) !important;
}
.select-auth-box-desc,
.pf-v5-c-tile__body,
.pf-v5-c-data-list__cell {
  color: var(--fab-text-secondary) !important;
}
.select-auth-box-icon svg,
.select-auth-box-arrow svg,
.pf-v5-c-data-list__toggle svg { fill: var(--fab-text-secondary) !important; }