/* darkfactory Keycloak login — the console's sign-in, restated for the realm.
   Palette mirrors control-center/src/app/globals.css: background #0a0a0a,
   card #171717, rail #121212, cream accent #ece3cd, muted #a1a1a1.

   These selectors are OURS (`.df-*`, from template.ftl) plus the classic
   theme's form ids. The previous version of this file targeted PatternFly's
   `.pf-v5-c-*` classes and spent three commits losing to its grid; owning the
   markup is what made the layout a layout instead of an override war. */

:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

.df-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #0a0a0a;
  color: #fafafa;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Background: the console's drift orbs ───────────────────────────── */
@keyframes df-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-14px, 12px) scale(0.97); }
  100% { transform: translate(6px, -6px) scale(1.02); }
}
.df-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: df-drift 16s ease-in-out infinite alternate;
}
.df-orb-1 {
  width: 480px; height: 480px; top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(236, 227, 205, 0.07) 0%, transparent 70%);
}
.df-orb-2 {
  width: 400px; height: 400px; bottom: -90px; left: -80px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.05) 0%, transparent 70%);
  animation-delay: -3s;
}
@media (prefers-reduced-motion: reduce) {
  .df-orb { animation: none; }
}

/* ── The card ───────────────────────────────────────────────────────── */
/* The header lockup, and the offset it creates. The console's header is
   `px-8 py-6` around a 36px mark, so ~84px tall, and the card centres in
   what is left. Reproducing the header reproduces the offset — matching it
   with a magic top margin would drift the moment either page's chrome
   changed. */
.df-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 32px;
}
.df-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ece3cd, #c9b98a);
  color: #050505;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.df-lockup { display: flex; flex-direction: column; line-height: 1.25; }
.df-lockup-name { font-size: 15px; font-weight: 600; color: #ece3cd; }
.df-lockup-sub {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(161, 161, 161, 0.8);
}

.df-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.df-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 896px;             /* the console's max-w-4xl */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(23, 23, 23, 0.6);   /* --card #171717 at 60%, as the console */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
  .df-card { flex-direction: row; min-height: 500px; }
  /* `min-width: 0` lets a flex child narrower than its content shrink;
     without it the form column refuses to give ground and its heading wraps
     a word per line. */
  .df-brand, .df-form { flex: 1 1 50%; min-width: 0; }
}

/* ── Left panel ─────────────────────────────────────────────────────── */
.df-brand {
  position: relative;          /* the capsules hang off this */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  /* `--color-rail` is oklch(0.115 0 0) = #050505 — DARKER than the card it
     sits in, which is what gives the console's left panel its depth. The
     #121212 here before was a guess and read as grey beside the real thing;
     converted from globals.css rather than matched by eye, because at these
     levels the difference between 0.115 and 0.145 is invisible in a swatch
     and obvious across a whole panel. */
  background: #050505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 768px) {
  .df-brand {
    padding: 48px;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
}
.df-wordmark {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ece3cd;
}
.df-lede {
  margin: 16px 0 0;
  max-width: 24rem;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.85);
}
.df-body-copy {
  margin: 10px 0 0;
  max-width: 24rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: #a1a1a1;
}

/* ── Right panel ────────────────────────────────────────────────────── */
.df-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}
@media (min-width: 768px) { .df-form { padding: 48px 44px; } }

.df-title {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ece3cd;
  text-wrap: pretty;
}

/* The classic theme's form markup — ids and the kc* classes it emits. */
#kc-form, #kc-form-wrapper, #kc-form-login { width: 100%; }

.df-form label,
#kc-form-login label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #a1a1a1;
}
/* Text-like inputs only. A bare `#kc-form-login input` also matched the
   remember-me checkbox and the hidden fields, stretching the checkbox to
   100% width with text-field padding and a border — the classic theme's
   checkbox became unusable wherever remember-me is enabled. */
.df-form input[type="text"],
.df-form input[type="password"],
.df-form input[type="email"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="email"],
#kc-form-login input[type="number"],
#kc-form-login input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #0f0f0f;
  color: #fafafa;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.df-form input:focus,
#kc-form-login input:focus {
  outline: none;
  border-color: rgba(236, 227, 205, 0.5);
  box-shadow: 0 0 0 3px rgba(236, 227, 205, 0.12);
}
.df-form input::placeholder { color: #6b6b6b; }

/* Field groups: one rhythm, whatever the parent calls them. CSS is NOT
   FreeMarker-processed, so the class names are written out rather than read
   from `properties.kcFormGroupClass`. */
.df-form .form-group,
#kc-form-login > div { margin-bottom: 18px; }

/* The password reveal button the classic theme renders beside the input. */
#kc-form-login .pf-c-input-group,
#kc-form-login .input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
#kc-form-login .pf-c-input-group > :first-child,
#kc-form-login .input-group > :first-child { flex: 1 1 auto; min-width: 0; }

/* Submit — the console's cream gradient. */
.df-form input[type="submit"],
#kc-login,
.df-form button[type="submit"] {
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #ece3cd, #c9b98a);
  color: #121212;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(236, 227, 205, 0.12);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.df-form input[type="submit"]:hover,
#kc-login:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 24px rgba(236, 227, 205, 0.22);
}
.df-form input[type="submit"]:focus-visible,
#kc-login:focus-visible {
  outline: 2px solid rgba(236, 227, 205, 0.6);
  outline-offset: 2px;
}

.df-form a { color: #ece3cd; text-decoration: none; }
.df-form a:hover { text-decoration: underline; }

/* Checkbox rows (remember me) and the forgot-password link. */
#kc-form-options, #kc-form-buttons { margin-top: 4px; }
.df-form .checkbox label { display: flex; align-items: center; gap: 8px; }

/* ── Messages ───────────────────────────────────────────────────────── */
.df-alert {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.5;
}
.df-alert-error   { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.df-alert-warning { border-color: rgba(251, 191, 36, 0.3);  background: rgba(251, 191, 36, 0.1);  color: #fcd34d; }
.df-alert-success { border-color: rgba(74, 222, 128, 0.3);  background: rgba(74, 222, 128, 0.1);  color: #86efac; }
.df-alert-info    { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #d4d4d4; }

.df-info {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #a1a1a1;
}

/* ── Beating the classic parent's chrome ────────────────────────────────
   Two things `login.css` does that our own selectors never reached.

   1. The polygon photograph. It is painted on `html.login-pf`, not on the
      body, so setting `.df-body`'s background left it showing through
      everywhere the card was not. The image is the single biggest visual
      difference from the console's near-black page.
   2. `.pf-c-button.pf-m-primary` carries `!important`, which beats our
      `#kc-login` however specific an id is. Ours has to answer in kind. */
html.login-pf,
html.login-pf body,
body.login-pf-page {
  background: #0a0a0a !important;
  background-image: none !important;
}

#kc-login,
.df-form input[type="submit"],
.df-form .pf-c-button.pf-m-primary {
  background: linear-gradient(135deg, #ece3cd, #c9b98a) !important;
  color: #121212 !important;
  border: 0 !important;
  border-radius: 12px !important;
}

/* ── The console's agent capsules ───────────────────────────────────────
   Reproduced from the console's rendered markup rather than approximated.
   The container is `absolute inset-0 flex items-start justify-end gap-2
   pr-6` — RIGHT-aligned against the panel's right edge, which is what the
   first two attempts got wrong: mine sat left, so they read as a chart under
   the copy instead of a masthead over it.

   Each capsule is `w-7` (28px) with `-mt-3` (-12px), so they hang above the
   panel and the card's `overflow: hidden` clips them. Heights, gradient
   angle and the halftone are the console's own values. */
.df-capsules {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 24px;
  overflow: hidden;
  pointer-events: none;
}
.df-capsule {
  position: relative;
  display: block;
  width: 28px;
  margin-top: -12px;
  border-radius: 999px;
  opacity: 0.8;
  overflow: hidden;
}
/* The console's halftone: a dot screen over the gradient, overlay-blended. */
.df-capsule::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.df-c1 { height: 50px; background: linear-gradient(160deg, #28164b, #7a1530); }
.df-c2 { height: 36px; background: linear-gradient(160deg, #f3e6c4, #e3a21a); }
.df-c3 { height: 92px; background: linear-gradient(160deg, #1f4dd6, #3aa35c); }
.df-c4 { height: 78px; background: linear-gradient(160deg, #e94b27, #5a1122); }
.df-c5 { height: 64px; background: linear-gradient(160deg, #7eb6e3, #ee79a1); }
.df-c6 { height: 50px; background: linear-gradient(160deg, #9ce8a7, #bd7ff0); }
.df-c7 { height: 36px; background: linear-gradient(160deg, #f3b49e, #1f4ed4); }
.df-c8 { height: 92px; background: linear-gradient(160deg, #f2d95f, #4fbcba); }

/* ── The console's tag row ──────────────────────────────────────────── */
.df-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.df-tag {
  padding: 6px 14px;
  border: 1px solid rgba(236, 227, 205, 0.15);
  border-radius: 8px;
  background: rgba(236, 227, 205, 0.05);
  font-size: 12px;
  font-weight: 500;
  color: rgba(236, 227, 205, 0.8);
}