/* De Neve IT Consulting — Keycloak Login Theme */
/* Brand kleuren: rood #c41e0e (boven-ruit), blauw #0055b3 (onder-ruit), navy #0d2248 */
/* Laadt NA login.css van parent-theme zodat overrides winnen */

/* ── PatternFly 5 variabelen (Keycloak 24+) ── */
:root {
  --pf-v5-global--primary-color--100:                    #0055b3;
  --pf-v5-global--primary-color--200:                    #003d82;
  --pf-v5-global--link--Color:                           #0055b3;
  --pf-v5-global--link--Color--hover:                    #003d82;
  --pf-v5-c-button--m-primary--BackgroundColor:          #0055b3;
  --pf-v5-c-button--m-primary--hover--BackgroundColor:   #003d82;
  --pf-v5-c-button--m-primary--active--BackgroundColor:  #003d82;
  /* PatternFly 4 fallback */
  --pf-global--primary-color--100:                       #0055b3;
  --pf-global--primary-color--200:                       #003d82;
  --pf-global--link--Color:                              #0055b3;
  --pf-global--link--Color--hover:                       #003d82;
}

/* ── Pagina-achtergrond ── */
html, body {
  background-color: #0d2248 !important;
  background-image:  none !important;
}

/* ── Login-container (splitview of centered) ── */
.pf-v5-c-login,
.pf-c-login {
  background-color: #0d2248 !important;
}

/* Info-paneel links (optioneel zichtbaar in bredere viewports) */
.pf-v5-c-login__header,
.pf-c-login__header {
  color: #ffffff !important;
}

/* ── Logo boven de loginkaart ── */
#kc-header-wrapper {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            0.75rem;
  padding-bottom: 1.5rem;
  color:          #ffffff !important;
}

/* Logo in wit kader — zelfde stijl als de portal-header */
#kc-header-wrapper::before {
  content:          '';
  display:          block;
  width:            210px;
  height:           64px;
  background:       #ffffff url('../img/deneveit-logo.png') center / contain no-repeat;
  border-radius:    8px;
  padding:          6px 12px;
  box-sizing:       border-box;
}

/* ── Loginkaart: rood/blauw merklijn bovenaan ── */
.pf-v5-c-login__main,
.pf-c-login__main,
.card-pf {
  position:   relative !important;
  overflow:   visible !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
}

/* Gradient accent via pseudo-element (werkt samen met border-radius) */
.pf-v5-c-login__main::before,
.pf-c-login__main::before,
.card-pf::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        4px;
  background:    linear-gradient(90deg, #c41e0e 50%, #0055b3 50%);
  border-radius: 8px 8px 0 0;
  z-index:       1;
}

/* ── Primaire knop ── */
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
.btn.btn-primary,
input[type="submit"] {
  background-color: #0055b3 !important;
  border-color:     #0055b3 !important;
  color:            #ffffff !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover,
.btn.btn-primary:hover,
input[type="submit"]:hover {
  background-color: #003d82 !important;
  border-color:     #003d82 !important;
}

/* ── Links ── */
a, a:link, a:visited {
  color: #0055b3 !important;
}
a:hover {
  color: #003d82 !important;
}

/* ── Foutmeldingen: brand rood ── */
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.pf-c-alert.pf-m-danger .pf-c-alert__title,
.alert-error,
#kc-error-message,
.kc-feedback-text {
  color: #c41e0e !important;
}

/* ── Footer / sublinks ── */
.pf-v5-c-login__footer,
.pf-c-login__footer,
#kc-info-message {
  color: rgba(255, 255, 255, 0.7) !important;
}