/* 4future Keycloak Login Theme (CSS-only override)
   - No FTL overrides (avoids FreeMarker null refs)
   - Brand color: #0c9897
*/

:root {
  --4f-teal: #0c9897;
  --4f-bg: #ffffff;
  --4f-text: #111827;
  --4f-muted: #6b7280;
  --4f-card-shadow: 0 12px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}

/* Clean white background */
html, body {
  height: 100%;
}

body#keycloak-bg {
  background: var(--4f-bg) !important;
}

/* Center the whole login container */
.pf-v5-c-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

/* PatternFly login grid tweaks:
   Make it a single centered column */
.pf-v5-c-login__container {
  width: min(1100px, 100%);
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

/* Put header + main in a vertical stack, centered */
.pf-v5-c-login__header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* Replace "4future" text header with logo (CSS only) */
#kc-header-wrapper.pf-v5-c-brand {
  /* keep element for layout */
  display: block;
  width: min(520px, 92vw);
  height: 92px;
  background-image: url("../img/4future-id.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* hide original text but keep accessibility */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* Main card */
.pf-v5-c-login__main {
  width: min(520px, 92vw);
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--4f-card-shadow);
}

/* Title color */
#kc-page-title,
.pf-v5-c-title {
  color: var(--4f-teal) !important;
  font-weight: 650;
}

/* Labels */
.pf-v5-c-form__label-text {
  color: var(--4f-text) !important;
}

/* Inputs focus ring */
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control textarea:focus,
.pf-v5-c-form-control select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(12, 152, 151, .25) !important;
  border-color: var(--4f-teal) !important;
}

/* Link styling */
a {
  color: var(--4f-teal) !important;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Primary button: force PF variable + direct styles */
.pf-v5-c-button.pf-m-primary,
#kc-login.pf-v5-c-button.pf-m-primary {
  background: var(--4f-teal) !important;
  border-color: var(--4f-teal) !important;
  color: #fff !important;
  border-radius: 8px;
  height: 44px;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary:hover,
#kc-login.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(0.95);
}

/* Password eye button align + teal hover */
.pf-v5-c-button.pf-m-control:hover {
  border-color: rgba(12, 152, 151, .45) !important;
}

/* Language dropdown align, keep it neat */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  min-width: 160px;
}

/* Reduce overly wide spacing on small screens */
@media (max-width: 520px) {
  .pf-v5-c-login {
    padding: 32px 12px;
  }
  #kc-header-wrapper.pf-v5-c-brand {
    height: 72px;
  }
}


/* === HARD FIX: PatternFly v5 Grid → echtes Single-Column Layout === */

/* Kill PF grid behaviour */
.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Header (Logo) */
.pf-v5-c-login__header {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 24px;
}

/* Brand wrapper MUST be centered explicitly */
#kc-header-wrapper.pf-v5-c-brand {
  margin: 0 auto !important;
}

/* Main card */
.pf-v5-c-login__main {
  margin: 0 auto !important;
}

/* Prevent phantom columns */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  width: 100%;
}