/*
 * Crowe ID login theme. Maps Keycloak's PatternFly login markup onto the
 * canonical dark operator language: gold #bfa669 on graphite #0b0b0c, square
 * 0.125rem radius, mono uppercase header eyebrow. Consumes the --crowe-* vars
 * from crowe-bundle.css (vendored @crowe/design-system), with literal fallbacks
 * so the theme never renders unbranded if a var fails to cascade.
 */

.login-pf,
.login-pf body,
body {
  background: var(--crowe-graphite, #0b0b0c) !important;
  background-image: none !important;
  color: var(--crowe-parchment, #e8e2cf);
}

/* Realm displayName renders here; style it as the gold eyebrow. */
#kc-header-wrapper {
  color: var(--crowe-gold, #bfa669);
  font-family: var(--crowe-font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
}

.card-pf {
  background: var(--crowe-graphite-soft, #15151a);
  border: 1px solid var(--crowe-gold-border, rgba(191, 166, 105, 0.18));
  border-radius: 0.125rem;
  box-shadow: 0 0 30px rgba(191, 166, 105, 0.18);
}

label,
.pf-c-form__label-text,
#kc-form-options,
#kc-info,
.kc-feedback-text,
.instruction {
  color: var(--crowe-parchment, #e8e2cf);
}

a {
  color: var(--crowe-gold, #bfa669);
}

input.pf-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: var(--crowe-graphite, #0b0b0c) !important;
  color: var(--crowe-parchment, #e8e2cf) !important;
  border: 1px solid var(--crowe-gold-border, rgba(191, 166, 105, 0.3)) !important;
  border-radius: 0.125rem !important;
}

input.pf-c-form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  outline: none;
  border-color: var(--crowe-gold-focus, rgba(191, 166, 105, 0.55)) !important;
  box-shadow: 0 0 0 1px var(--crowe-gold-focus, rgba(191, 166, 105, 0.55)) !important;
}

.pf-c-button.pf-m-primary,
input[type="submit"],
#kc-login {
  background: var(--crowe-gold, #bfa669) !important;
  border-color: var(--crowe-gold, #bfa669) !important;
  color: var(--crowe-graphite, #0b0b0c) !important;
  border-radius: 0.125rem !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pf-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
#kc-login:hover {
  background: var(--crowe-gold-dim, #8a7848) !important;
  border-color: var(--crowe-gold-dim, #8a7848) !important;
}

::selection {
  background: var(--crowe-gold, #bfa669);
  color: var(--crowe-graphite, #0b0b0c);
}