/*
 * DACS login page.
 *
 * THE FILE NAME IS LOAD-BEARING. Keycloak's `keycloak` login theme ships its own
 * `css/login.css`, and theme resource lookup walks the parent chain: because
 * this file sits at the same path in the child theme, `${url.resourcesPath}/css/login.css`
 * resolves HERE and the parent's stylesheet is never served. The Keycloak logo
 * and the Keycloak page background are `background-image` rules inside that
 * parent file, so shadowing it is what removes the vendor's branding - not a
 * pile of overrides that a renamed upstream selector would defeat.
 *
 * The palette is a verbatim copy of apps/web/src/views/tokens.ts (DARK + LIGHT).
 * It is duplicated rather than imported because Keycloak serves this file as a
 * static asset from its own container: there is no build step here, and a
 * generated stylesheet would be a second thing to keep in sync. The values are
 * the contract; a unit test in apps/web asserts the console references only
 * tokens defined there, and the README records that this file must be updated
 * with them.
 *
 * Selector discipline: elements and the stable `#kc-*` ids only. No PatternFly
 * class names appear anywhere below. PatternFly's vocabulary was renamed between
 * Keycloak majors (`pf-c-*` -> `pf-v5-c-*`); the ids have not moved in years,
 * and their specificity also means this file still wins if a future Keycloak
 * ignores `stylesCommon=` and loads PatternFly anyway.
 *
 * Contrast: every ratio quoted below is computed against the surface the text
 * actually sits on, using the WCAG 2.1 relative-luminance formula. AA for body
 * text is 4.5:1; AA for a control boundary (1.4.11) is 3:1.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg: #020711;
  --bg-far: #06101d;
  --surface: #071321;
  --surface-2: #0b1a2c;
  --chip: #122032;

  --line: rgba(120, 165, 220, 0.16);
  --hair: rgba(120, 165, 220, 0.09);

  /* DERIVED, not a token, and derived for one reason: the token `--line` over
     `--surface` measures 1.4:1, which fails WCAG 1.4.11 for an input boundary.
     An input whose background barely differs from the card has nothing BUT its
     border to announce it is an input. At 0.60 alpha the composite is #4B6B91
     over #071321 = 3.39:1, which passes. */
  --field-line: rgba(120, 165, 220, 0.60);

  --ink: #F3F7FF;
  --dim: #8E9CB0;

  --accent: #338BFF;
  --accent-ink: #7FB6FF;
  --on-accent: #04101F;
  --cyan: #49D6FF;
  --green: #65D987;
  --amber: #F4AD3C;
  --stop: #FF6B63;
  --stop-bg: rgba(255, 107, 99, 0.10);
  --warn-bg: rgba(244, 173, 60, 0.10);
  --green-bg: rgba(101, 217, 135, 0.10);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/*
 * The light branch is kept for the same reason the cockpit keeps it
 * (apps/web/src/views/tokens.ts): `prefers-color-scheme: light` is an
 * accessibility signal as much as a taste one, and the login page is the one
 * page nobody can route around. The galaxy declines a light variant because a
 * light star field is illegible; a login card has no such excuse.
 */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f6f7f9;
    --bg-far: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --chip: #eef1f5;

    --line: #dde1e7;
    --hair: #e9ecf1;
    /* #7d8798 on #ffffff = 3.63:1 - same job, same rule, opposite direction:
       the LIGHT token `--line` (#dde1e7) measures 1.2:1 and fails 1.4.11. */
    --field-line: #7d8798;

    --ink: #16181d;
    --dim: #5c6470;

    --accent: #1f5bb5;
    --accent-ink: #17458c;
    --on-accent: #ffffff;
    --cyan: #0b6f8c;
    --green: #1d7a45;
    --amber: #8a5300;
    --stop: #b3261e;
    --stop-bg: #fdf3f2;
    --warn-bg: #fdf6e9;
    --green-bg: #eef7f1;
  }
}

/* ── Canvas ───────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html.dacs-html,
html {
  background: var(--bg);
  height: 100%;
}

body.dacs-body,
body {
  margin: 0;
  min-height: 100%;
  padding: 2.5rem 1.25rem 3.5rem;
  font: 15px/1.55 var(--font-sans);
  color: var(--ink);
  /* The same two-lobe wash the cockpit and the galaxy use, so an owner who has
     seen either recognises this page as the same product. Fixed attachment so
     it does not slide under a tall OTP or error card. */
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(51, 139, 255, 0.10), transparent 62%),
    radial-gradient(900px 520px at 8% 4%, rgba(154, 99, 255, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

@media (prefers-color-scheme: light) {
  body.dacs-body,
  body {
    background:
      radial-gradient(1200px 620px at 78% -8%, rgba(31, 91, 181, 0.07), transparent 62%),
      radial-gradient(900px 520px at 8% 4%, rgba(107, 63, 191, 0.05), transparent 60%),
      var(--bg);
  }
}

.dacs-login {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

/* ── Wordmark ─────────────────────────────────────────────────────────────── */

/*
 * The markup for this comes from the REALM, not from a template: Keycloak
 * renders `realm.displayNameHtml` into `#kc-header-wrapper` on every page of
 * the login flow. Setting it there rather than in login.ftl is what puts DACS
 * on the OTP page, the error page and the expired-action page too - none of
 * which this theme overrides.
 */
#kc-header {
  margin: 0 0 1.5rem;
}

#kc-header-wrapper {
  text-align: center;
}

.dacs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.35rem;
  font-weight: 660;
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* A rotated square, drawn in CSS rather than fetched. No external asset, no
   third-party beacon with a logo attached - the same rule the cockpit applies
   to webfonts. */
.dacs-wordmark::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  transform: rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(51, 139, 255, 0.18);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

/* The width constraint is stated on BOTH the wrapper and the card, deliberately.
   If `kcLoginClass` is ever not the property the outer div reads, the card still
   centres itself instead of stretching to the full viewport — a page that is
   merely un-narrowed, rather than a page that looks broken. */
.dacs-card {
  max-width: 26rem;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 26px rgba(0, 0, 0, 0.20);
}

@media (prefers-color-scheme: light) {
  .dacs-card {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 26px rgba(16, 24, 40, 0.06);
  }
}

.dacs-card-header {
  margin: 0 0 1rem;
}

/* Keycloak's page heading. "Sign in to your account" - no vendor name. */
#kc-page-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 640;
  letter-spacing: 0.005em;
  color: var(--ink);
}

/* Shown on re-authentication, where Keycloak already knows the account. */
#kc-username {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: var(--dim); /* 6.69:1 on --surface */
}

#kc-username a {
  margin-left: 0.4rem;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

.dacs-field {
  margin: 0 0 0.9rem;
}

/*
 * Real labels, always visible, always associated by `for`/`id` (login.ftl).
 * Not placeholders: a placeholder disappears the moment someone types, which
 * strands anyone using magnification or coming back to a half-filled form.
 */
.dacs-label,
label {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 560;
  color: var(--dim);
}

.dacs-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-far);
  border: 1px solid var(--field-line);
  border-radius: 9px;
  /* iOS zooms the page when a focused control is under 16px. Nothing here is. */
}

/* The id selectors exist so this still wins if PatternFly loads: `#username`
   (specificity 100) beats any `.pf-*-c-form-control` (10). */
#username,
#password,
#kc-otp-login-form input {
  width: 100%;
  color: var(--ink);
  background: var(--bg-far);
  border: 1px solid var(--field-line);
  border-radius: 9px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
}

input::placeholder {
  color: var(--dim);
  opacity: 1; /* Firefox dims placeholders further; that would fail contrast. */
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--accent-ink);
}

/* A field Keycloak flagged. Colour is never the only signal: the message below
   the pair says what is wrong, and `aria-invalid` carries it to assistive tech. */
input[aria-invalid="true"],
#username[aria-invalid="true"],
#password[aria-invalid="true"] {
  border-color: var(--stop);
  background: var(--stop-bg);
}

/*
 * Focus. `:focus-visible` so a mouse click does not draw a ring, but a keyboard
 * tab always does - and a fallback `:focus` for engines without it, because a
 * login form with no visible focus is unusable by keyboard.
 * --cyan on --bg is 11.9:1 (dark) and 5.7:1 (light); 3:1 is the bar.
 */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

@supports not selector(:focus-visible) {
  :focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.dacs-button,
button,
input[type="submit"],
#kc-login {
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 620;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 1rem;
}

/* #338BFF fill with #04101F text = 5.71:1 (dark); #1f5bb5 with #ffffff = 6.52:1
   (light). The two themes need OPPOSITE answers here - the same note
   apps/web/src/views/tokens.ts records for `on-accent`. */
.dacs-button-primary,
#kc-login {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.dacs-button-block,
#kc-login {
  display: block;
  width: 100%;
}

.dacs-button-primary:hover,
#kc-login:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.dacs-form-buttons {
  margin-top: 1.15rem;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

a {
  color: var(--accent-ink); /* 8.93:1 on --surface (dark), 9.27:1 (light) */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dacs-form-options {
  margin: -0.2rem 0 0;
  font-size: 0.86rem;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */

/*
 * Keycloak emits both its own `alert-<type>` classes and PatternFly `pf-m-<type>`
 * modifiers on the banner, and which one it uses has changed across versions.
 * Both are matched, so the banner is coloured either way; the type WORD is in
 * the text Keycloak writes, so the colour is never carrying the meaning alone.
 */
.dacs-alert,
.dacs-feedback {
  margin: 0 0 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 0.9rem;
  color: var(--ink);
}

.dacs-alert-title {
  color: inherit;
}

.alert-error,
.pf-m-error,
.pf-m-danger {
  border-color: var(--stop);
  background: var(--stop-bg);
}

.alert-warning,
.pf-m-warning {
  border-color: var(--amber);
  background: var(--warn-bg);
}

.alert-success,
.pf-m-success {
  border-color: var(--green);
  background: var(--green-bg);
}

.alert-info,
.pf-m-info {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* The per-form field error from login.ftl. 6.70:1 on --surface (dark). */
.dacs-field-error {
  display: block;
  margin: -0.35rem 0 0.9rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--stop);
  border-radius: 9px;
  background: var(--stop-bg);
  color: var(--stop);
  font-size: 0.86rem;
}

/* ── Info area, "try another way", and everything not overridden ──────────── */

.dacs-info,
.dacs-info-wrapper,
.dacs-reset-info,
#kc-info {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--dim);
}

.dacs-note {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
  font-size: 0.82rem;
  color: var(--dim);
}

/* Credential-selection and required-action pages we do not template. Styling
   them at element level means they inherit the palette instead of rendering as
   raw browser defaults on a dark canvas, which would be unreadable. */
ul,
ol {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
}

li {
  margin: 0.2rem 0;
}

p {
  margin: 0.5rem 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 1rem 0;
}

code,
kbd,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

.dacs-social-list {
  list-style: none;
  padding: 0;
}

.dacs-checkbox {
  width: auto;
  margin-right: 0.4rem;
  accent-color: var(--accent);
}

/* Keycloak's locale dropdown and any leftover PatternFly widget. */
select {
  cursor: pointer;
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

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

/* ── Defensive de-branding ────────────────────────────────────────────────── */

/*
 * Reached ONLY if a future Keycloak serves the parent theme's stylesheet after
 * all - i.e. if `styles=`/`stylesCommon=` in theme.properties stop replacing the
 * parent's lists, or if resource shadowing changes. In that world the rules
 * below are the last thing standing between an owner and a Keycloak logo, which
 * is why `!important` is justified here and nowhere else in this file.
 *
 * If any of these ever has an effect, the theme has a real problem and this
 * block is the symptom, not the fix: check theme.properties against the
 * Keycloak version in infra/prod/docker-compose.prod.yml.
 */
#kc-header-wrapper .kc-logo-text,
div.kc-logo-text,
.login-pf-brand,
.pf-c-brand,
.pf-v5-c-brand {
  background-image: none !important;
  text-indent: 0 !important;
  display: none !important;
}

.login-pf body,
.login-pf-page {
  background-image: none !important;
}