/* =========================================================================
   KEYCLOAK 26 (PATTERNFLY 5) — Medezide AMR 360 SKIN
   Generated by generate_keycloak_skins.py

   HOW TO CLONE THIS FOR ANOTHER STORE
   ------------------------------------
   1. Copy this file.
   2. Update the tokens in the :root block below.
   3. Remove the @import if the store doesn't use Encode Sans Compressed.
   4. Save as /public/keycloak/<realm-domain>/keycloak-theme.css

   TOKENS
   ─────────────────────────────────────────────────────────────────────────
   --brand-primary        Baseline colour — used ONLY for the secondary
                          button focus outline ring. Stripe, link, and focus
                          each have their own token (see below) and default
                          to this value when no per-skin override is needed.
                          DO NOT expect changes here to affect stripe/links.
   --brand-primary-hover  Darker shade of primary (for hover states that
                          still reference primary directly).
   --brand-stripe         Card header accent border — may differ from links
                          (e.g. Edinburgh: amber stripe, red links).
   --brand-link           Link colour + secondary button text / border.
   --brand-link-hover     Darker shade of --brand-link.
   --brand-secondary      Secondary button colour — defaults to --brand-link;
                          override when the button should use the primary
                          button colour instead (e.g. UW: purple).
   --brand-button         CTA button fill (Sign In / Register).
   --brand-button-hover   Darker shade — button hover fill.
   --brand-button-radius  Border-radius for the CTA button ($btn-rounded).
   --brand-button-text    CTA button text colour (default #ffffff).
   --brand-focus-color    Input focus border colour.
   --brand-focus-rgb      Space-separated R G B for the focus glow:
                          rgb(var(--brand-focus-rgb) / 0.45).
                          Both default to --brand-link unless overridden.
   --brand-heading-color  Form heading text (#5e5e5e grey by default;
                          some skins use their brand colour).
   --brand-input-border   Resting border (#d2d2d2 — same for all skins).
   --brand-input-radius   Border-radius for inputs and password group.
   --brand-page-bg        html.login-pf page background colour.
   --brand-logo-height    max-height for the logo above the card.
   --brand-logo-width     max-width for the logo (default 280px; increase
                          for wide horizontal logos like Edinburgh).
   ─────────────────────────────────────────────────────────────────────────
   ========================================================================= */

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

:root {
  /* Base accent colour — navy primary */
  --brand-primary:        #232E65;
  --brand-primary-hover:  #1a2350;

  /* Accent stripe (top border of card) — navy */
  --brand-stripe:         #232E65;

  /* Link and secondary-button colour — red */
  --brand-link:           #C41D26;
  --brand-link-hover:     #a3161d;

  /* Secondary button colour — red */
  --brand-secondary:      #C41D26;

  /* Primary button — red CTA */
  --brand-button:         #C41D26;
  --brand-button-hover:   #a3161d;
  --brand-button-radius:  9999px;
  --brand-button-text:    #ffffff;

  /* Input focus: navy border + navy glow */
  --brand-focus-color:    #232E65;
  --brand-focus-rgb:      35 46 101;

  /* Heading text colour */
  --brand-heading-color:  #000000;

  /* Input resting border */
  --brand-input-border:   #d3d3d8;
  --brand-input-radius:   5px;

  --brand-page-bg:        #f3f4f8;
  --brand-logo-height:    60px;
  --brand-logo-width:     280px;
  color-scheme: only light;
}


/* =========================================================================
   1. PAGE BACKGROUND + VERTICAL POSITION
   ========================================================================= */
.login-pf body {
  background: none;
  background-color: var(--brand-page-bg);
  font-family: 'Manrope', system-ui, Arial, sans-serif;
}

html.login-pf {
  background-color: var(--brand-page-bg);
}

.pf-v5-c-login {
  align-items: flex-start !important;
  justify-content: center !important;
}

.pf-v5-c-login__container {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.pf-v5-c-login__main {
  justify-self: center;
  overflow: hidden;
}


/* =========================================================================
   2. LOGIN CARD
   ========================================================================= */
.pf-v5-c-login__main {
  max-width: 500px;
  width: 100%;
  background-color: #ffffff;
  box-shadow:
    rgba(3, 3, 3, 0.16) 0px 16px 32px 0px,
    rgba(3, 3, 3, 0.10) 0px 0px 8px 0px;
  overflow: hidden;
}


/* =========================================================================
   3. CARD HEADER — accent stripe + layout
   ========================================================================= */
.pf-v5-c-login__main-header {
  border-top: 4px solid var(--brand-stripe);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.pf-v5-c-login__main-header h1,
.pf-v5-c-login__main-header .pf-v5-c-title {
  flex: 1;
  min-width: 0;
}

.pf-v5-c-login__main-header-utilities {
  flex-shrink: 0;
}


/* =========================================================================
   4. LOGO
   ========================================================================= */
.pf-v5-c-brand img,
#kc-header-wrapper img {
  display: block;
  margin: 40px auto 0;
  max-width: min(var(--brand-logo-width), 90vw);
  max-height: var(--brand-logo-height);
  object-fit: contain;
}


/* =========================================================================
   5. HEADING
   ========================================================================= */
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  font-family: 'Manrope', system-ui, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.4rem !important;
  color: var(--brand-heading-color);
  text-align: left;
}


/* =========================================================================
   6. INPUT FIELDS
   ========================================================================= */
body .pf-v5-c-form-control {
  background-color: #ffffff !important;
  color: #151515 !important;
  border: 1px solid var(--brand-input-border) !important;
  border-radius: var(--brand-input-radius);
  overflow: hidden;
}

body .pf-v5-c-form-control::after,
body .pf-v5-c-form-control:focus::after,
body .pf-v5-c-form-control:focus-within::after,
body .pf-v5-c-form-control:active::after {
  border: none !important;
}

body .pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: var(--brand-input-radius);
}

body span.pf-v5-c-form-control > input.pf-v5-c-form-control,
body span.pf-v5-c-form-control > select.pf-v5-c-form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: var(--brand-input-radius);
}

body .pf-v5-c-form-control:focus,
body .pf-v5-c-form-control:focus-within,
body .pf-v5-c-form-control:active {
  border-color: var(--brand-focus-color) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),
              0 0 8px rgb(var(--brand-focus-rgb) / 0.45) !important;
  outline: none !important;
}

body .pf-v5-c-form-control[aria-invalid="true"] {
  border-bottom-color: #c9190b !important;
  border-bottom-width: 2px !important;
}

body .pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline:    none !important;
  box-shadow: none !important;
}


/* -------------------------------------------------------------------------
   INPUT GROUP (password field + eye toggle)
   ------------------------------------------------------------------------- */
body .pf-v5-c-input-group {
  border: 1px solid var(--brand-input-border);
  border-radius: var(--brand-input-radius);
  overflow: hidden;
}

body .pf-v5-c-input-group .pf-v5-c-form-control {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
body .pf-v5-c-input-group .pf-v5-c-form-control::after,
body .pf-v5-c-input-group .pf-v5-c-form-control:focus::after,
body .pf-v5-c-input-group .pf-v5-c-form-control:focus-within::after {
  border: none !important;
}
body .pf-v5-c-input-group .pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: 0 !important;
}

body .pf-v5-c-input-group:focus-within {
  border-color: var(--brand-focus-color);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),
              0 0 8px rgb(var(--brand-focus-rgb) / 0.45);
  outline: none;
}


/* =========================================================================
   7. FORM LABELS
   ========================================================================= */
.pf-v5-c-form__label-text {
  font-size: 0.8rem;
}


/* =========================================================================
   8. PRIMARY BUTTON (Sign In / Register)
   ========================================================================= */
.pf-v5-c-button.pf-m-block {
  display: block;
  width: 100%;
  padding: 10px 16px;
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--brand-button);
  border-radius: var(--brand-button-radius);
  color: var(--brand-button-text);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--brand-button-hover);
}


/* =========================================================================
   9. SECONDARY BUTTONS (social / admin login)
   ========================================================================= */
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--after--BorderColor: transparent;
  --pf-v5-c-button--after--BorderWidth: 0;
  background-color: transparent;
  color: var(--brand-secondary);
  border: 2px solid var(--brand-secondary) !important;
  font-weight: 500;
  width: 100% !important;
  padding: 10px 16px !important;
  justify-content: center !important;
  gap: 8px;
  transition:
    background-color 0.5s ease-in-out,
    border-color     0.3s ease-in-out,
    color            0.3s ease-in-out;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--brand-secondary);
  color: #ffffff;
  border-color: var(--brand-secondary);
}

.pf-v5-c-button.pf-m-secondary:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.pf-v5-c-button.pf-m-secondary::after,
.pf-v5-c-button.pf-m-secondary:hover::after,
.pf-v5-c-button.pf-m-secondary:focus::after {
  border: none !important;
}


/* =========================================================================
   10. PASSWORD VISIBILITY TOGGLE (eye button)
   ========================================================================= */
body .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--BorderRadius: 0;
  --pf-v5-c-button--disabled--BackgroundColor: #bfbfbf;
  --pf-v5-c-button--after--BorderWidth: 0 !important;
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--hover--after--BorderWidth: 0 !important;
  --pf-v5-c-button--m-control--focus--after--BorderWidth: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  color: #5e5e5e !important;
  border-left: 1px solid #d3d3d8 !important;
}

body .pf-v5-c-button.pf-m-control::after,
body .pf-v5-c-button.pf-m-control:hover::after,
body .pf-v5-c-button.pf-m-control:focus::after {
  border: none !important;
}


/* =========================================================================
   11. SOCIAL / ADMIN LOGIN SVG ICONS
   ========================================================================= */
body #kc-social-providers svg:not(.google) {
  filter: none !important;
}

body #kc-social-providers svg:not(.google) path {
  fill: var(--brand-link) !important;
}


/* =========================================================================
   12. LINKS
   ========================================================================= */
.pf-v5-c-login__main-body a,
.pf-v5-c-login__main-footer a,
.pf-v5-c-login__main-footer-links a,
.pf-v5-c-check a {
  color: var(--brand-link);
}

.pf-v5-c-login__main-body a:hover,
.pf-v5-c-login__main-footer a:hover,
.pf-v5-c-login__main-footer-links a:hover {
  color: var(--brand-link-hover);
}


/* =========================================================================
   13. FOOTER / INFO BAND
   ========================================================================= */
.pf-v5-c-login__main-body {
  padding-bottom: 0 !important;
}

.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer:empty {
  display: none;
}

.pf-v5-c-login__main-footer {
  font-size: 13px;
  background-color: transparent;
  padding: 0;
  margin-top: 20px;
  margin-left:  -48px;
  margin-right: -48px;
  margin-bottom: 0;
  border-top: none !important;
}

.pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form) {
  background-color: transparent;
  padding: 0 48px;
  text-align: center;
  color: #6a6e73;
  font-size: 13px;
  border-top: none;
}

.pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form)::before {
  content: '';
  display: block;
  border-top: 1px solid #e0e0e0 !important;
  margin-bottom: 16px;
}

#kc-social-providers {
  display: block;
  width: 100%;
  padding: 0 48px;
  margin-top: 8px;
  margin-bottom: 20px;
}

#kc-social-providers ul,
#kc-social-providers .pf-v5-c-login__main-footer-links {
  display: block !important;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

#kc-social-providers li,
#kc-social-providers .pf-v5-c-login__main-footer-links-item {
  display: block !important;
  width: 100%;
  padding: 0 !important;
  margin: 0;
}

.pf-v5-c-login__main-footer-band.pf-v5-c-form {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
  text-align: center;
  font-size: 13px;
  padding: 15px 48px;
  margin-top: 0;
}

.pf-v5-c-form__group.pf-v5-c-login__main-footer-band {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
  text-align: center;
  font-size: 13px;
  padding: 15px 48px;
  margin-top: 16px;
  margin-left:  -48px;
  margin-right: -48px;
  margin-bottom: 0;
}


/* =========================================================================
   14. INLINE ALERTS
   ========================================================================= */
.pf-v5-c-alert.pf-m-inline {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger  { border-left-color: #c9190b; }
.pf-v5-c-alert.pf-m-inline.pf-m-warning { border-left-color: #f0ab00; }
.pf-v5-c-alert.pf-m-inline.pf-m-success { border-left-color: #92d400; }


/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */
@media (min-width: 768px) {
  .pf-v5-c-login__main {
    justify-self: center;
    overflow: hidden;
  }
}

@media (max-width: 767px) {

  .login-pf body {
    background-color: var(--brand-page-bg);
  }

  .pf-v5-c-login {
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .pf-v5-c-login__container {
    grid-template-columns: 100% !important;
    justify-content: center;
    width: calc(100% - 20px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .pf-v5-c-login__main {
    max-width: none;
    width: 100%;
    justify-self: stretch;
    overflow: hidden;
  }

  .pf-v5-c-login__main-body {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .pf-v5-c-login__main-footer {
    margin-left:  -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 0;
  }

  .pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form) {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  .pf-v5-c-login__main-footer-band.pf-v5-c-form {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  #kc-social-providers {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 8px;
  }

  .pf-v5-c-form__group.pf-v5-c-login__main-footer-band {
    margin-left:  -1.5rem;
    margin-right: -1.5rem;
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }

  .pf-v5-c-login__main-footer > .pf-v5-c-login__main-footer-band:not(.pf-v5-c-form)::before {
    margin-bottom: 12px;
  }

  .pf-v5-c-login__main-header {
    flex-wrap: wrap;
  }
  .pf-v5-c-login__main-header-utilities {
    order: 1;
    margin-left: auto;
  }
  .pf-v5-c-login__main-header h1,
  .pf-v5-c-login__main-header .pf-v5-c-title {
    order: 2;
    width: 100%;
    flex: none;
  }
}

.pf-v5-c-login__main > .pf-v5-c-login__main-footer {
  margin-top: 0 !important;
}

.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer:not(:has(*)) {
  margin-top: 0 !important;
}

/* =========================================================================
   REGISTRATION FORM
   ========================================================================= */
html:has(#kc-register-form) .pf-v5-c-login__main-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  position: static !important;
}

html:has(#kc-register-form) #kc-page-title {
  display: contents !important;
}

html:has(#kc-register-form) .pf-v5-c-login__main-header-utilities {
  order: 1 !important;
  margin-left: auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}

html:has(#kc-register-form) .register-promo-text {
  order: 2 !important;
  flex-basis: 100% !important;
  font-size: 0.8rem !important;
  font-weight: normal !important;
  text-align: left !important;
  color: var(--pf-v5-global--Color--200, #6a6e73) !important;
}

html:has(#kc-register-form) .register-signin-header {
  order: 3 !important;
  flex-basis: 100% !important;
  font-size: 0.8rem !important;
  font-weight: normal !important;
  text-align: left !important;
  color: var(--pf-v5-global--Color--200, #6a6e73) !important;
}

.pf-v5-c-login__main-body {
  padding-bottom: 24px !important;
}
.pf-v5-c-login__main-body:has(.pf-v5-c-login__main-footer-band) {
  padding-bottom: 0 !important;
}


/* =========================================================================
   16. DARK MODE — ADDITIONAL ELEMENTS
   ========================================================================= */

/* Input text colour — force directly on <input>/<select>/<textarea> so the
   browser dark-mode UA stylesheet cannot override the inherited value      */
body .pf-v5-c-form-control > :is(input, select, textarea),
body .pf-v5-c-input-group .pf-v5-c-form-control > :is(input, select, textarea) {
  color: #151515 !important;
}

/* Locale / language dropdown (PatternFly Select + Menu Toggle) */
body .pf-v5-c-select__toggle,
body .pf-v5-c-menu-toggle,
body .pf-v5-c-menu-toggle__button {
  color-scheme: only light;
}

body .pf-v5-c-select__menu,
body .pf-v5-c-menu__content,
body .pf-v5-c-menu {
  background-color: #ffffff !important;
  color: #151515 !important;
  color-scheme: only light;
}

body .pf-v5-c-select__menu-item,
body .pf-v5-c-menu__item-text {
  color: #151515 !important;
}

/* Inline alert messages — explicit light-mode backgrounds so dark-mode
   media queries cannot override PatternFly's semantic palette colours     */
body .pf-v5-c-alert {
  color-scheme: only light;
  color: #151515 !important;
}
body .pf-v5-c-alert.pf-m-warning {
  background-color: #fdf7e7 !important;
}
body .pf-v5-c-alert.pf-m-danger {
  background-color: #faeae8 !important;
}
body .pf-v5-c-alert.pf-m-success {
  background-color: #f3faf2 !important;
}
body .pf-v5-c-alert.pf-m-info,
body .pf-v5-c-alert:not([class*="pf-m-"]) {
  background-color: #e8f1f9 !important;
}

body .pf-v5-c-alert__title,
body .pf-v5-c-alert__description {
  color: #151515 !important;
}

/* Checkbox label (e.g. "Remember me") */
body .pf-v5-c-check__label {
  color: #151515 !important;
}