/* f0und — X-IT login theme (gold standard, graph-native — matches the console shell).
   Overrides keycloak.v2 (PatternFly v5). Mounted read-only into the container;
   activated per realm via loginTheme='xit' (set declaratively by provision:console).
   The living background graph is js/graph.js (scripts= in theme.properties); the
   CSS constellation below stays as the no-JS fallback. */

:root {
  --xit-ink: #0F2A44;
  --xit-mut: #5B7488;
  --xit-brand: #0A5CA8;
  --xit-azure: #1E9BD7;
  --xit-bg: #F4F8FC;
  --xit-line: #D7E3EF;
}

/* Ground: calm blue-white; the dot constellation is only the no-JS fallback —
   the canvas (js/graph.js) paints the real living graph above it. */
body, .login-pf, .pf-v5-c-login, .pf-v5-c-background-image {
  background: var(--xit-bg) !important;
  background-image:
    radial-gradient(circle 3px at 12% 22%, rgba(30,155,215,.35) 3px, transparent 4px),
    radial-gradient(circle 2px at 26% 64%, rgba(10,92,168,.28) 2px, transparent 3px),
    radial-gradient(circle 3px at 78% 18%, rgba(30,155,215,.30) 3px, transparent 4px),
    radial-gradient(circle 2px at 88% 58%, rgba(10,92,168,.25) 2px, transparent 3px),
    radial-gradient(circle 2px at 62% 84%, rgba(30,155,215,.28) 2px, transparent 3px),
    linear-gradient(115deg, rgba(30,155,215,.10) 0%, rgba(244,248,252,0) 42%),
    linear-gradient(0deg, var(--xit-bg), var(--xit-bg)) !important;
}

/* Layering: canvas (0) → readability veil (1) → login UI (2). */
#xit-graph-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 44%,
    rgba(255,255,255,.88) 0%, rgba(244,248,252,.42) 55%, rgba(244,248,252,0) 100%);
}
.pf-v5-c-login, .login-pf-page { position: relative; z-index: 2; }

/* Center the login column (KC v2 left-aligns it on wide screens, leaving dead space).
   A calm, centered node in the graph reads as gold-standard on any width. */
.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: none !important;
  gap: 2px;
  padding: 24px 16px;
  box-sizing: border-box;
}
.pf-v5-c-login__header, .pf-v5-c-login__main {
  width: 100%;
  max-width: 460px;
  align-self: center !important; /* PF sets align-self:start on __main → override */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header: realm displayNameHtml (X-IT chevrons + wordmark) — larger, with the
   company subline, exactly the console sidebar's brand block. */
#kc-header, .pf-v5-c-login__header { background: transparent !important; }
#kc-header-wrapper {
  color: var(--xit-ink) !important;
  font-family: "Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  font-size: 24px !important;
  padding: 34px 0 4px !important;
  text-align: center;
}
#kc-header-wrapper::after {
  content: "X-IT SERVICE GMBH";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--xit-mut);
  margin-top: 5px;
}

/* Card: the login as a NODE of the graph — frosted white, soft radius, layered
   blue shadow, a brand-gradient top edge, and a gentle entry rise. */
.card-pf, .pf-v5-c-login__main {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.87) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--xit-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(10,60,110,.08), 0 24px 64px rgba(10,60,110,.14) !important;
  color: var(--xit-ink);
  animation: xit-in .45s cubic-bezier(.2,.7,.3,1) both;
}
.card-pf::before, .pf-v5-c-login__main::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--xit-brand), var(--xit-azure) 55%, #6FB5E8);
}
@keyframes xit-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-pf, .pf-v5-c-login__main { animation: none; }
}

#kc-page-title, .pf-v5-c-login__main-header h1, .pf-v5-c-title {
  color: var(--xit-ink) !important;
  font-family: "Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}

label, .pf-v5-c-form__label-text { color: var(--xit-mut) !important; font-weight: 600 !important; }

/* Inputs: light, azure focus ring. */
input.pf-v5-c-form-control, .pf-v5-c-form-control > input, .pf-v5-c-form-control {
  background: #fff !important;
  color: var(--xit-ink) !important;
  border-radius: 10px !important;
  --pf-v5-c-form-control--BorderColor: var(--xit-line);
  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--xit-azure);
  --pf-v5-c-form-control--after--BorderBottomColor: var(--xit-line);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--xit-azure);
}
.pf-v5-c-form-control:focus-within { outline: 2px solid var(--xit-azure) !important; outline-offset: 1px; }

/* Primary action: the brand gradient with a confident hover lift — the console's
   primary button, verbatim. */
.pf-v5-c-button.pf-m-primary, input[type="submit"], #kc-login {
  background: linear-gradient(135deg, var(--xit-brand), var(--xit-azure)) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(10,92,168,.28) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pf-v5-c-button.pf-m-primary:hover, #kc-login:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10,92,168,.34) !important;
}
.pf-v5-c-button.pf-m-primary:active, #kc-login:active { transform: none; }
.pf-v5-c-button.pf-m-primary:focus-visible, #kc-login:focus-visible {
  outline: 2px solid var(--xit-azure); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pf-v5-c-button.pf-m-primary, #kc-login { transition: none; }
  .pf-v5-c-button.pf-m-primary:hover, #kc-login:hover { transform: none; }
}

/* Language select + any dropdown: light, not the dark PF default. */
select, .pf-v5-c-form-control select, #kc-locale select, .pf-v5-c-menu-toggle {
  background: #fff !important;
  color: var(--xit-ink) !important;
  border: 1px solid var(--xit-line) !important;
  border-radius: 10px !important;
}
/* Password "show/hide" toggle (PF control button) — light, not dark. */
.pf-v5-c-button.pf-m-control {
  background: #fff !important;
  color: var(--xit-mut) !important;
  border: 1px solid var(--xit-line) !important;
  --pf-v5-c-button--m-control--BorderTopColor: var(--xit-line);
  --pf-v5-c-button--m-control--BorderBottomColor: var(--xit-line);
}
.pf-v5-c-button.pf-m-control:hover { color: var(--xit-azure) !important; border-color: var(--xit-azure) !important; }

a, .pf-v5-c-login__main-footer-links a { color: var(--xit-azure) !important; font-weight: 600; }
.pf-v5-c-login__footer, #kc-info { color: var(--xit-mut) !important; }

/* Quiet product caption at the page foot — the graph is the product. Only shown when the
   viewport is tall enough to clear the card (never overlaps the submit button on short windows). */
body::after {
  content: "f0und · Wissensgraph · mandantengetrennt";
  position: fixed; left: 0; right: 0; bottom: 14px; z-index: 2;
  text-align: center; pointer-events: none; display: none;
  font-family: "Avenir Next","Segoe UI",system-ui,sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--xit-mut); opacity: .78;
}
@media (min-height: 720px) { body::after { display: block; } }

/* Error/info banners: keep semantic colors readable on white. */
.pf-v5-c-alert { border-radius: 10px !important; }