/* ============================================================
   Dstny Zone — Login theme
   Light page background, white login card, and the Dstny colour
   logo sitting directly on the light page (no header background).
   Keycloak 24+ (PatternFly 5). This stylesheet only *layers on top*
   of the base PatternFly styles — it never replaces the form layout.
   Selectors are doubled up (pf-v5-c- / pf-c- / element ids) so the
   theme survives PatternFly version drift across Keycloak releases.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --dstny-cyan:        #1BA9B5;
  --dstny-cyan-hover:  #178f99;
  --dstny-dark-blue:   #005C87;
  --dstny-dark-gray:   #38344D;
  --dstny-black:       #261616;
  --dstny-magenta:     #B41284;
  --dstny-dark-purple: #7E0A5C;
  --dstny-orange:      #FE9305;
  --dstny-border:      #d7d7de;
  --dstny-radius:      12px;
  --dstny-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Light page background ---- */
html { height: 100%; }
body.login-pf,
.login-pf body,
body {
  font-family: var(--dstny-font);
  background: #F4F8F9;
  min-height: 100vh;
}
body.login-pf { background-image: none; }              /* drop stock PatternFly bg image */
.login-pf-page { padding-top: 0; }

/* ---- Colour logo on the light page (no header background) ---- */
#kc-header {
  text-align: center;
  margin: 0 0 8px;
}
#kc-header-wrapper {
  display: inline-block;
  margin: 40px auto 8px;
  /* hide the realm display-name text; the logo comes in via ::before */
  font-size: 0;
  line-height: 0;
  color: transparent;
  white-space: nowrap;
}
#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 210px;
  height: 56px;
  background: url('../img/dstny-logo-color.png') no-repeat center center;
  background-size: contain;
}

/* ---- The login card ---- */
.login-pf-page .card-pf,
.card-pf {
  max-width: 520px;
  margin: auto;
  margin-top: 64px;
  padding: 2.5rem 2.5rem 2.25rem;
  background: #FFFFFF;
  border: 1px solid #eceaf0;
  border-top: 4px solid var(--dstny-cyan);
  border-radius: var(--dstny-radius);
  box-shadow: 0 16px 40px rgba(38, 22, 34, 0.10);
}

/* ---- Titles / headings ---- */
#kc-page-title,
.pf-v5-c-title,
.pf-c-title {
  font-family: var(--dstny-font);
  color: var(--dstny-black);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Labels ---- */
label,
.pf-v5-c-form__label,
.pf-c-form__label,
#kc-form-login label {
  font-family: var(--dstny-font);
  color: var(--dstny-dark-gray);
  font-weight: 500;
}

/* ---- Inputs (do NOT set width — PatternFly handles full-width layout) ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
.pf-v5-c-form-control,
.pf-c-form-control,
#kc-form-login input {
  font-family: var(--dstny-font);
  border-radius: 8px;
  border: 1px solid var(--dstny-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
.pf-v5-c-form-control:focus,
.pf-c-form-control:focus,
#kc-form-login input:focus {
  outline: none;
  border-color: var(--dstny-cyan);
  box-shadow: 0 0 0 3px rgba(27, 169, 181, 0.22);
}

/* ---- Password field: input-group + "show password" toggle ---- */
.pf-v5-c-input-group,
.pf-c-input-group {
  display: flex;
  align-items: stretch;
}
/* input on the left keeps only left corners rounded when grouped.
   The ID is included so this beats the `#kc-form-login input` rule above
   on specificity — otherwise the right corners stay rounded. */
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-c-input-group .pf-c-form-control,
#kc-form-login .pf-v5-c-input-group input,
#kc-form-login .pf-c-input-group input,
#kc-form-login .pf-v5-c-input-group .pf-v5-c-form-control,
#kc-form-login .pf-c-input-group .pf-c-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
/* the eye toggle button — give it real size so it isn't a tiny box */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control,
.pf-c-input-group .pf-c-button.pf-m-control,
button[aria-label*="password" i],
#kc-form-login button.pf-c-button {
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--dstny-border);
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #ffffff;
  color: var(--dstny-dark-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover,
.pf-c-input-group .pf-c-button.pf-m-control:hover {
  background: #f4f8f9;
  color: var(--dstny-cyan);
}
/* make sure the eye icon is visible at a sensible size */
.pf-v5-c-input-group .pf-m-control i,
.pf-c-input-group .pf-m-control i,
button[aria-label*="password" i] i { font-size: 15px; line-height: 1; }

/* ---- Primary button (Sign in) ---- */
input[type="submit"],
#kc-login,
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
  font-family: var(--dstny-font);
  font-weight: 600;
  background-color: var(--dstny-cyan) !important;
  border-color: var(--dstny-cyan) !important;
  color: #FFFFFF !important;
  border-radius: 8px;
}
input[type="submit"]:hover,
#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
  background-color: var(--dstny-cyan-hover) !important;
  border-color: var(--dstny-cyan-hover) !important;
}

/* ---- Secondary buttons ---- */
.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary {
  color: var(--dstny-dark-blue) !important;
  border-color: var(--dstny-dark-blue) !important;
  border-radius: 8px;
}

/* ---- Links ---- */
a,
#kc-registration a,
#kc-info-wrapper a,
#kc-form-options a {
  color: var(--dstny-cyan);
  text-decoration: none;
  font-weight: 500;
}
a:hover { color: var(--dstny-cyan-hover); text-decoration: underline; }

/* ---- Checkbox accent (remember me) ---- */
input[type="checkbox"] { accent-color: var(--dstny-cyan); }

/* ---- Alerts: refined Dstny styling ----
   PatternFly's defaults (heavy coloured top border, saturated fill,
   muddy amber text) look harsh. We flatten to a soft tinted panel with a
   single left accent bar, rounded corners, and clean dark text.
   !important is used to beat PatternFly's own design-token values. */
.pf-v5-c-alert, .pf-c-alert {
  font-family: var(--dstny-font);
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  border-top: 1px solid transparent !important;   /* kill the thick coloured top bar */
  border-left-width: 4px !important;
  box-shadow: none !important;
  padding: 0.9rem 1.1rem;
  --pf-v5-c-alert--BorderTopColor: transparent;    /* neutralise the token too */
}
.pf-v5-c-alert__title, .pf-c-alert__title,
.pf-v5-c-alert__description, .pf-c-alert__description {
  color: var(--dstny-black) !important;
  font-family: var(--dstny-font);
}
.pf-v5-c-alert__title, .pf-c-alert__title { font-weight: 600; }

/* Success — Dstny cyan */
.pf-v5-c-alert.pf-m-success, .pf-c-alert.pf-m-success {
  background: #EAF7F8 !important;
  border-color: #C6E9EC !important;
  border-left-color: var(--dstny-cyan) !important;
}
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon,
.pf-c-alert.pf-m-success .pf-c-alert__icon { color: var(--dstny-cyan) !important; }

/* Info — Dstny dark blue */
.pf-v5-c-alert.pf-m-info, .pf-c-alert.pf-m-info {
  background: #EAF1F5 !important;
  border-color: #C5DAE6 !important;
  border-left-color: var(--dstny-dark-blue) !important;
}
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon,
.pf-c-alert.pf-m-info .pf-c-alert__icon { color: var(--dstny-dark-blue) !important; }

/* Warning — soft warm tint with a restrained Dstny orange accent */
.pf-v5-c-alert.pf-m-warning, .pf-c-alert.pf-m-warning {
  background: #FDF4E7 !important;
  border-color: #F4E2C4 !important;
  border-left-color: var(--dstny-orange) !important;
}
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon,
.pf-c-alert.pf-m-warning .pf-c-alert__icon { color: var(--dstny-orange) !important; }

/* Danger — Dstny magenta */
.pf-v5-c-alert.pf-m-danger, .pf-c-alert.pf-m-danger {
  background: #FBEAF4 !important;
  border-color: #F0C9E3 !important;
  border-left-color: var(--dstny-magenta) !important;
}
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon,
.pf-c-alert.pf-m-danger .pf-c-alert__icon { color: var(--dstny-magenta) !important; }

/* ---- Social / identity-provider buttons ---- */
#kc-social-providers a { border-radius: 8px; border: 1px solid var(--dstny-border); }

/* ---- Footer info block ("New user? Register") ---- */
#kc-info { background: transparent; }
#kc-info-wrapper { color: var(--dstny-black); font-family: var(--dstny-font); }

/* ---- Language selector (now on a light page) ---- */
#kc-locale ul { border-radius: 8px; }
#kc-locale a { color: var(--dstny-dark-blue); }

/* ---- Responsive polish ---- */
@media (max-width: 520px) {
  .login-pf-page .card-pf { margin: 0 1rem; padding: 2rem 1.5rem; }
  #kc-header-wrapper { margin-top: 28px; }
  #kc-header-wrapper::before { width: 170px; height: 46px; }
}