/* Sibyl brand overrides for the Keycloak login theme (CKC-015 / CKC-06 refresh).

   GOAL: the hosted Keycloak form must be indistinguishable from the SPA login
   (PipelineEditor login.component) — same layout, palette, type, and elevation.
   Values below are the ACTUAL runtime tokens read from the running app
   (getComputedStyle on the live shell), NOT the design-doc aspirations:

     light  ground #f8fafc  text #1f2937  muted #6b7280  primary #6366f1
     dark   ground #18181b  text #ffffff  muted #a1a1aa  primary #818cf8

   The SPA login is a PLAIN centered column on the surface ground — no card, no
   accent stripe: logo (64px) + "Sibyl" (28px/600) + a muted subtitle + a primary
   button (7px radius, elev-1, hover:brightness). We reproduce exactly that and
   drop Keycloak's form beneath the subtitle.

   Theme-aware via prefers-color-scheme (the hosted page has no app theme signal):
   light is default, dark is served when the OS asks — both DESIGNED, not inverted.
   CSS-only, no template fork, so OTP / WebAuthn / recovery inherit it (MFA-ready). */

:root {
  color-scheme: light dark;

  /* Live app tokens — light (see header). */
  --sib-ground:       #f8fafc;   /* --p-surface-ground */
  --sib-text:         #1f2937;   /* --p-text-color (gray-800) */
  --sib-muted:        #6b7280;   /* --p-text-muted-color (gray-500) */
  --sib-primary:      #6366f1;   /* --p-primary-color (indigo-500) */
  --sib-primary-hover:#4f46e5;   /* --p-primary-hover-color */
  --sib-ring:         rgba(99, 102, 241, .35);
  --sib-input-bg:     #ffffff;   /* --p-form-field-background */
  --sib-input-border: #d1d5db;   /* --p-form-field-border-color (gray-300) */
  --sib-input-color:  #374151;   /* --p-form-field-color (gray-700) */
  --sib-placeholder:  #6b7280;
  --sib-critical:     #e5484d;
  --sib-critical-soft:#fbe4e5;
  --sib-elev-1:       0 1px 2px rgba(20, 16, 31, .06), 0 1px 3px rgba(20, 16, 31, .05);
  --sib-logo:         url("../img/sibyl-icon-light.svg");
  --sib-sans:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sib-ground:       #18181b;
    --sib-text:         #ffffff;
    --sib-muted:        #a1a1aa;
    --sib-primary:      #818cf8;
    --sib-primary-hover:#a5b4fc;
    --sib-ring:         rgba(129, 140, 248, .35);
    --sib-input-bg:     #09090b;
    --sib-input-border: #52525b;
    --sib-input-color:  #ffffff;
    --sib-placeholder:  #a1a1aa;
    --sib-critical:     #ff6b70;
    --sib-critical-soft:#2e1417;
    --sib-elev-1:       0 1px 2px rgba(0, 0, 0, .4);
    --sib-logo:         url("../img/sibyl-icon-dark.svg");
  }
}

/* --- page: SPA's `flex items-center justify-center bg-[ground]` --- */
.login-pf body,
body.login-pf {
  background: var(--sib-ground);
  font-family: var(--sib-sans);
  color: var(--sib-text);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  padding: 1rem;
}

/* --- the SPA's inner column: `w-full max-w-sm`, NO card, NO stripe --- */
.login-pf-page {
  position: relative;
  width: 100%;
  max-width: 24rem;   /* max-w-sm */
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.login-pf-page::before { content: none; }   /* kill any legacy accent stripe */

/* --- Keycloak's inner form wrapper: also transparent/flush --- */
.card-pf {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.card-pf::before { display: none; }

/* --- brand block: logo(64) + "Sibyl"(28/600) + subtitle — mirrors the SPA --- */
#kc-header,
.login-pf-page-header { margin: 0; }
#kc-header-wrapper {
  color: var(--sib-text);
  font-size: 28px;            /* SPA h1 text-[28px] */
  font-weight: 600;          /* font-semibold */
  line-height: 1;            /* leading-none */
  letter-spacing: -.01em;
  text-transform: none;
  white-space: normal;
  padding: 0;
  text-align: center;
}
#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 64px;               /* SPA w-16 h-16 */
  height: 64px;
  margin: 0 auto 12px;       /* mb-3 */
  background: var(--sib-logo) no-repeat center;
  background-size: contain;
}
#kc-header-wrapper::after {
  content: "Sign in to continue";
  display: block;
  margin-top: 12px;          /* SPA subtitle mt-3 */
  font-size: 14px;           /* text-sm */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sib-muted);
}

/* Keycloak's own page/form titles are redundant with our brand block. */
#kc-page-title,
header#kc-form-header { display: none; }

/* --- form: sits below the brand block (SPA has no fields; we add them) --- */
#kc-form,
#kc-form-wrapper { margin-top: 1.75rem; }
.form-group { margin-bottom: 1rem; }

/* --- labels: sans, muted (chrome, not data) --- */
.login-pf label,
#kc-form-login label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sib-muted);
  margin-bottom: 5px;
  display: block;
}

/* --- inputs: app form-field palette, 6px radius (border.radius.md) --- */
.pf-c-form-control,
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="email"] {
  width: 100%;
  height: 2.5rem;
  padding: 0 .8rem;
  border: 1px solid var(--sib-input-border);
  border-radius: 6px;
  background: var(--sib-input-bg);
  color: var(--sib-input-color);
  font-size: .9rem;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pf-c-form-control:focus,
#kc-form-login input:focus {
  border-color: var(--sib-primary);
  box-shadow: 0 0 0 3px var(--sib-ring);
  outline: none;
}
::placeholder { color: var(--sib-placeholder); opacity: 1; }

/* --- primary button: mirrors the SPA `Sign in` (7px, elev-1, hover:brightness) --- */
input[type="submit"],
.pf-c-button.pf-m-primary,
#kc-login,
input.btn-primary {
  width: 100%;
  height: 2.25rem;           /* SPA h-9 (36px) */
  margin-top: 6px;
  background: var(--sib-primary);
  border: none;
  border-radius: 7px;        /* SPA rounded-[7px] */
  color: #ffffff;
  font-size: .875rem;        /* text-sm */
  font-weight: 500;          /* font-medium */
  box-shadow: var(--sib-elev-1);
  cursor: pointer;
  transition: filter 150ms ease, background 150ms ease;
}
input[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover,
#kc-login:hover,
input.btn-primary:hover {
  filter: brightness(1.1);   /* SPA hover:brightness-110 */
}

/* --- "remember me" + secondary rows --- */
#kc-form-options,
.checkbox {
  color: var(--sib-muted);
  font-size: .82rem;
  margin: .25rem 0 .75rem;
}
#kc-form-options a,
#kc-info a,
a {
  color: var(--sib-primary);
  text-decoration: none;
}
#kc-form-options a:hover,
#kc-info a:hover,
a:hover { text-decoration: underline; }

/* --- registration / info footer (muted) --- */
#kc-info,
#kc-registration {
  margin-top: 1.1rem;
  text-align: center;
  font-size: .82rem;
  color: var(--sib-muted);
}

/* --- error / alert: design-language critical language --- */
.pf-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger,
.alert-error,
#kc-content .alert-error {
  background: var(--sib-critical-soft);
  border: 1px solid var(--sib-critical);
  border-radius: 8px;
  color: var(--sib-critical);
  font-size: .85rem;
  margin-bottom: 1rem;
}
.pf-c-alert.pf-m-danger .pf-c-alert__icon,
.alert-error .pf-icon { color: var(--sib-critical); }

/* --- hide Keycloak's password reveal (eye) toggle; the app login has none --- */
.pf-c-input-group button,
.pf-v5-c-input-group button,
#kc-form-login .pf-c-button.pf-m-control,
#kc-form-login .pf-v5-c-button.pf-m-control { display: none !important; }
.pf-c-input-group,
.pf-v5-c-input-group { display: block; }
.pf-c-input-group input,
.pf-v5-c-input-group input { width: 100%; }