/* ===================================================================
   Tema Yellowbit -- pagine di login di Keycloak
   Estende keycloak.v2: sfondo nero + logo al posto del nome del realm.
   =================================================================== */

/* 1) Sfondo nero su tutta la pagina (annulla l'immagine di sfondo del
      tema e i colori di riempimento dei contenitori PatternFly) */
html,
body,
body#keycloak-bg,
.login-pf body,
.pf-v5-c-login,
.pf-v5-c-login__container {
  background: #000 !important;
  background-image: none !important;
}

/* 2) Logo centrato al posto della scritta (nome del realm) in testa
      alla pagina. Il testo resta nel DOM (accessibilita'/lettori di
      schermo) ma viene nascosto. */
#kc-header {
  display: flex;
  justify-content: center;
}

#kc-header-wrapper {
  display: block;
  width: 100%;
  height: 130px;
  /* Spazio logo -> riquadro = 34 px visibili, come riquadro -> scritta.
     L'immagine del logo ha un margine trasparente in basso: circa 11 px visibili quando e'
     limitata dall'altezza (130 px), proporzionalmente meno (2,57% della larghezza) sulle
     finestre strette. Il margine sottrae esattamente quella parte, a qualunque larghezza. */
  margin: 0 auto calc(34px - min(2.57%, 11px));
  background: url("../img/yellowbit-logo.png") center bottom / contain no-repeat;   /* ancorato in basso: lo spazio sotto il logo non dipende dalla larghezza della finestra */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  overflow: hidden;
}

/* 3) Il "nome visualizzato" del realm puo' contenere un proprio HTML (di
      default Keycloak vi mette <div class="kc-logo-text">, a cui il tema
      di base assegna il logo Keycloak come sfondo): finirebbe SOVRAPPOSTO
      al nostro logo. Nascondiamo qualunque elemento dentro l'intestazione:
      il logo Yellowbit e' lo sfondo del contenitore stesso, non un figlio. */
#kc-header-wrapper > *,
#kc-header-wrapper .kc-logo-text {
  display: none !important;
}

/* 4) Scritta "yellowbit.it" FUORI dal riquadro bianco, sullo sfondo nero, sotto la form.
      Keycloak v2 definisce la griglia della pagina con due aree (intestazione e riquadro):
      ne aggiungiamo una terza, "firma", che ospita la scritta. */
.pf-v5-c-login__container {
  grid-template-areas: "header"
                       "main"
                       "firma";
}
.pf-v5-c-login__container::after {
  content: "yellowbit.it";
  display: block;          /* sotto i 1200 px il contenitore non e' una griglia: serve un blocco per centrare */
  grid-area: firma;
  text-align: center;
  margin-top: 1.75rem;
  padding-bottom: 1.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: #ffffff;
}