/*
  PIRSA Keycloak login theme
  - Keeps Keycloak templates, only restyles.
  - Safe to ship: no external fonts.
  - Logo is optional (see ../img/README.txt).
*/

:root {
  --pirsa-green: #88b600;
  --pirsa-green-d: #6f9800;
  --pirsa-ink: #0f172a;
  --pirsa-muted: #64748b;
  --pirsa-bg0: #f8fafc;
  --pirsa-bg1: #eef2f7;
  --pirsa-card: #ffffff;
  --pirsa-border: rgba(15, 23, 42, 0.12);
}

html,
body {
  background: radial-gradient(1200px 600px at 10% 0%, rgba(136, 182, 0, 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 20%, rgba(136, 182, 0, 0.08), transparent 60%),
    linear-gradient(180deg, var(--pirsa-bg0), var(--pirsa-bg1)) !important;
  color: var(--pirsa-ink);
}

/* Keycloak's default theme can inject a dark geometric background at multiple levels.
   Override them all to guarantee a light PIRSA look. */
.login-pf,
body.login-pf,
.login-pf-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Some Keycloak/PatternFly skins draw the geometric background using pseudo-elements. */
.login-pf-page::before,
.login-pf-page::after,
body.login-pf::before,
body.login-pf::after,
body::before,
body::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Keycloak parent themes often ship a dark/graphic background on #kc-page.
   Hard-reset it so we own the full background. */
#kc-page {
  background: transparent !important;
  background-image: none !important;
}

/* Center layout and avoid the "full width" stretched form. */
#kc-container,
#kc-container-wrapper {
  padding: 32px 16px !important;
}

#kc-content {
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* Container / card */
#kc-content-wrapper,
.card-pf {
  background: var(--pirsa-card);
  border: 1px solid var(--pirsa-border);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

/* Add breathing room inside the card (fix "inputs too close to margins"). */
.card-pf {
  padding: 28px 28px 24px !important;
}

#kc-content-wrapper {
  padding: 0 !important;
}

/* Prevent inner wrappers from forcing wide layouts */
#kc-form-wrapper,
.login-pf-page .card-pf {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* Header */
#kc-page-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pirsa-ink);
}

/* Make Keycloak logo area look like PIRSA (text only) */
#kc-header-wrapper,
#kc-header {
  color: var(--pirsa-ink);
}

/* Replace the tiny "pirsa" text with the PIRSA logo (if present). */
#kc-header-wrapper {
  display: block !important;
  width: 100% !important;
  height: 64px;
  margin: 0 auto 16px auto;
  text-indent: -9999px; /* hide text */
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../img/logo-full.png");
}

/* Inputs */
.pf-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
  border-radius: 12px !important;
  border-color: var(--pirsa-border) !important;
}

.pf-c-form-control:focus,
input:focus {
  outline: none !important;
  border-color: rgba(136, 182, 0, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(136, 182, 0, 0.18) !important;
}

/* Primary button */
#kc-login,
input[type="submit"].btn-primary,
.pf-c-button.pf-m-primary {
  background: var(--pirsa-green) !important;
  border-color: var(--pirsa-green) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#kc-login:hover,
input[type="submit"].btn-primary:hover,
.pf-c-button.pf-m-primary:hover {
  background: var(--pirsa-green-d) !important;
  border-color: var(--pirsa-green-d) !important;
}

/* Make the primary button look like our app (not edge-to-edge). */
#kc-form-buttons {
  margin-top: 14px !important;
}

#kc-login {
  width: 100% !important;
}

/* Tighten spacing */
.pf-c-form__group {
  margin-bottom: 14px !important;
}

/* Links */
a,
.kc-link,
#kc-registration a,
#kc-info-wrapper a {
  color: var(--pirsa-green-d) !important;
}

a:hover {
  color: var(--pirsa-green) !important;
}

/* Secondary text */
.subtitle,
.instruction,
.kc-feedback-text,
.pf-c-form__helper-text,
#kc-info-wrapper {
  color: var(--pirsa-muted) !important;
}