/* Grait ID - a thin layer over keycloak.v2 (PatternFly 5): the Grait logo on a
   navy field, white card, azure actions. Nothing but Grait appears here. */
:root {
  --grait-navy: #083F6B;
  --grait-navy-dark: #04213a;
  --grait-azure: #0398E6;
  --grait-cyan: #17C8D4;
  --keycloak-bg-logo-url: none;                 /* no stock background image */
  --pf-v5-global--primary-color--100: #0398E6;
  --pf-v5-global--primary-color--200: #0b7cb8;
  --pf-v5-global--active-color--100: #0398E6;
  --pf-v5-global--link--Color: #083F6B;
  --pf-v5-global--link--Color--hover: #0398E6;
  --pf-v5-c-button--m-primary--BackgroundColor: #0398E6;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #0b7cb8;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #0b7cb8;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #0b7cb8;
}

body#keycloak-bg, .login-pf body {
  background: radial-gradient(circle at 20% 0%, #15508c 0, var(--grait-navy) 45%, var(--grait-navy-dark) 100%) fixed !important;
}

/* the brand block above the card: logo, then the service name */
#kc-header-wrapper {
  color: #fff !important;                        /* the stock rule is !important too */
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .85rem;
  line-height: 1.3;
  padding: 0;
  text-align: center;
}
#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 300px; height: 170px;
  max-width: 70vw;
  margin: 0 auto 2px;
  background: url(../img/logo-white.png) center / contain no-repeat;
}

.pf-v5-c-login__main {
  border-top: 4px solid var(--grait-cyan) !important;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
#kc-page-title {
  font-size: 1.2rem;
  color: var(--grait-navy);
}
.pf-v5-c-button.pf-m-primary {
  border-radius: .45em;
  font-weight: 700;
  letter-spacing: .04em;
}
.pf-v5-c-form-control {
  border-radius: .45em;
}
.pf-v5-c-form-control:focus-within {
  border-bottom-color: var(--grait-azure) !important;
}

/* the legal line, under the card */
.pf-v5-c-login__main::after {
  content: "© 2026 Grait Cloud. All Rights Reserved.";
  display: block;
  padding: .6rem 1.5rem 1rem;
  font-size: .7rem;
  line-height: 1.4;
  color: #6a7385;
  text-align: center;
}