/*
 * ever&keep – Keycloak Login Theme (keycloak.v2 / PatternFly v5)
 *
 * Design tokens from Figma (Ever-Keep-Design, node 1416:17739):
 *   Primary:       #007984
 *   Primary dark:  #005259
 *   Logo text:     #003F42
 *   Logo accent:   #643B61
 *   Background:    #ffffff
 *   Card:          #f7f7f7
 *   Text primary:  rgba(0,0,0,0.87)
 *   Text secondary:rgba(0,0,0,0.6)
 *   Input border:  rgba(0,0,0,0.23)
 *   Disabled bg:   rgba(0,0,0,0.04)
 *   Card radius:   15px
 *   Input radius:  8px
 *   Button radius: 4px
 *   Font:          Open Sans
 *
 * Note on !important: PatternFly v5 applies styles via CSS custom properties,
 * deeply nested selectors, and pseudo-elements. Most overrides here require
 * !important to reliably win against PF5 internals. Custom classes (e.g.
 * .eak-subtitle) that don't compete with PF5 avoid !important.
 */

/* ── Font (self-hosted, latin subset) ────────── */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'),
    url('../fonts/open-sans-latin-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:
    url('../fonts/open-sans-latin-500-normal.woff2') format('woff2'),
    url('../fonts/open-sans-latin-500-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:
    url('../fonts/open-sans-latin-600-normal.woff2') format('woff2'),
    url('../fonts/open-sans-latin-600-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:
    url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'),
    url('../fonts/open-sans-latin-700-normal.woff') format('woff');
}

* {
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Page background ─────────────────────────── */

body.login-pf,
.pf-v5-c-login {
  background: #ffffff !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide empty Keycloak header wrappers that reserve space */
#kc-header,
#kc-header-wrapper,
.pf-v5-c-login__header {
  display: none !important;
}

/* ── Overall layout ──────────────────────────── */

.pf-v5-c-login__container {
  margin: 0 auto;
  /* Override keycloak.v2 grid-template-columns (default: 34rem ≈ 544px) */
  grid-template-columns: 42rem !important;
  max-width: none !important;
}

/* ── Header / Logo ───────────────────────────── */

.pf-v5-c-login__main-header {
  text-align: center;
  padding-bottom: 24px;
  border-top: none !important;
}

/* Logo + title + subtitle on all screens */
.pf-v5-c-login__main-header .pf-v5-c-title {
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Title text styling (Keycloak renders each page's own title here) */
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.167 !important;
  letter-spacing: 0.5px !important;
  color: rgba(0, 0, 0, 0.87) !important;
  text-align: center !important;
}

/* Logo above the title */
.pf-v5-c-login__main-header .pf-v5-c-title::before {
  content: '';
  display: block;
  width: 333px;
  height: 39px;
  margin: 0 auto 24px;
  background: url('../img/logo-testamanagement.svg') no-repeat center / contain;
}

/* Subtitle below the title — rendered via ${msg()} in login.ftl */
.eak-subtitle {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}

/* ── Login card (main area) ──────────────────── */

.pf-v5-c-login__main {
  background: #f7f7f7 !important;
  border-radius: 15px !important;
  box-shadow:
    0px 1px 18px 0px rgba(0, 0, 0, 0.12),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 3px 5px 0px rgba(0, 0, 0, 0.2) !important;
  padding: 0 80px 80px 80px !important;
  border: none !important;
  position: relative;
  /* Inheritable text colour for templates that aren't login.ftl. The
     keycloak.v2 parent renders device-verified, oauth-grant, info etc.
     with bare <p>/<ul>/<li> elements and no explicit colour — they
     therefore pick up PatternFly's default `--pf-v5-global--Color--100`
     which resolves to white-ish on our light card and reads as
     invisible (EVK-481 device-flow consent / success screens).
     Pinning the colour on the card itself fixes every descendant
     element via normal inheritance, without touching template files. */
  color: rgba(0, 0, 0, 0.87) !important;
}

/* Defensive overrides: a handful of PatternFly classes set their own
   colour via CSS custom properties that wouldn't be touched by the
   plain `color:` on the parent. Keep the list minimal — extend only
   if a new template renders text in a class that escapes inheritance. */
.pf-v5-c-login__main p,
.pf-v5-c-login__main ul,
.pf-v5-c-login__main ol,
.pf-v5-c-login__main li,
.pf-v5-c-login__main .pf-v5-c-list,
.pf-v5-c-login__main .pf-v5-c-list__item,
.pf-v5-c-login__main .instruction,
.pf-v5-c-login__main #kc-oauth {
  color: rgba(0, 0, 0, 0.87) !important;
}

/* ── Locale selector: bottom-right, aligned with form content edge ── */
/* The locale select lives inside .pf-v5-c-login__main-header (sibling of h1).
   We pull it to the bottom of the card via absolute positioning on <main>. */

.pf-v5-c-login__main-header-utilities {
  position: absolute !important;
  bottom: 40px;
  right: 0;
  padding: 0 126px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 20px;
  z-index: 10;
  width: 100%;
  justify-content: flex-end !important;
}

/* Ensure header is a centered single-column layout */
.pf-v5-c-login__main-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Strip all PatternFly chrome from the locale select wrapper */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  border: none !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.pf-v5-c-login__main-header-utilities select {
  font-size: 13px !important;
  color: rgba(0, 0, 0, 0.6) !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  cursor: pointer;
  appearance: auto;
}

.pf-v5-c-login__main-header-utilities select:hover {
  border-color: rgba(0, 0, 0, 0.87) !important;
}

.pf-v5-c-login__main-header-utilities select:focus {
  border-color: #007984 !important;
  outline: none !important;
}

/* Hide the PatternFly dropdown arrow icon and toggle chrome (use native select arrow instead) */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__utilities,
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__toggle-icon,
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control::before,
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control::after {
  display: none !important;
}

/* Gap between readonly username and restart button */
.pf-v5-c-input-group {
  gap: 12px;
}

/* Suppress PatternFly's vertical separator between input-group items.
   PF draws a 1px solid black-700 border-inline-start on every child after
   the first via `.pf-v5-c-input-group > * + *`. The 12px gap above already
   visually separates the input from the trailing icon button, so the
   divider is redundant. Overriding the CSS variable (rather than the
   shorthand) keeps us forward-compatible with future PF v5 updates. */
.pf-v5-c-input-group > * + * {
  --pf-v5-c-input-group__item--BorderLeftWidth: 0 !important;
}

#kc-form-login {
  gap: 0 !important;
}

/* ── Input fields ────────────────────────────── */

.pf-v5-c-form-control {
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  /* Disable all PatternFly border/focus layers */
  --pf-v5-c-form-control--BorderColor: transparent !important;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent !important;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
}

.pf-v5-c-form-control input,
.pf-v5-c-form-control input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* Override browser autofill highlight (light blue with square corners) */
.pf-v5-c-form-control input:-webkit-autofill,
.pf-v5-c-form-control input:-webkit-autofill:hover,
.pf-v5-c-form-control input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f7f7f7 inset !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87) !important;
  border-radius: 8px !important;
  transition: background-color 5000s ease-in-out 0s;
}

.pf-v5-c-form-control:hover {
  border-color: rgba(0, 0, 0, 0.87) !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: #007984 !important;
  border-width: 2px !important;
}

.pf-v5-c-form-control input {
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0.15px !important;
  color: rgba(0, 0, 0, 0.87) !important;
  padding: 16px 12px !important;
}

/* ── Locked username on password screen ──────
   On the password step the username is HTML-readonly so the form still
   submits the value and password-managers/screen-readers still see it.
   Our base .pf-v5-c-form-control style flattens both states; restore
   the visual distinction so users see the field is locked and reach
   for the adjacent #reset-login button to change it. */
/* cursor: default — intentionally overrides the browser's default text-caret
   on readonly <input>, so the locked username does not appear editable.
   Applied both on the container (covers padding/border area) and the inner
   input below. */
.pf-v5-c-form-control.pf-m-readonly {
  background-color: rgba(0, 0, 0, 0.04) !important;
  cursor: default;
}

/* border-width: 1px — explicitly resets the 2px focus border that the editable
   .pf-v5-c-form-control:focus-within rule above would otherwise apply to the
   readonly variant. The more-specific .pf-m-readonly selector wins on color,
   but border-width needs the same-axis override to defeat the editable rule. */
.pf-v5-c-form-control.pf-m-readonly:hover,
.pf-v5-c-form-control.pf-m-readonly:focus-within {
  border-color: rgba(0, 0, 0, 0.23) !important;
  border-width: 1px !important;
}

.pf-v5-c-form-control.pf-m-readonly input {
  color: rgba(0, 0, 0, 0.6) !important;
  cursor: default;
}

/* Labels */
.pf-v5-c-form__label-text {
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.15px !important;
}

/* Form groups spacing */
.pf-v5-c-form__group {
  margin-bottom: 6px;
}

/* ── Primary button ──────────────────────────── */

.pf-v5-c-button.pf-m-primary {
  background-color: #007984 !important;
  border-color: #007984 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 8px 22px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0.46px !important;
  text-transform: none !important;
  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: #005259 !important;
  border-color: #005259 !important;
}

.pf-v5-c-button.pf-m-primary:focus {
  background-color: #005259 !important;
  border-color: #005259 !important;
  outline: 2px solid #007984 !important;
  outline-offset: 2px !important;
}

/* ── Links ───────────────────────────────────── */

a,
.pf-v5-c-button.pf-m-link {
  color: #007984 !important;
}

a:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: #005259 !important;
}

/* ── Alerts ──────────────────────────────────── */

.pf-v5-c-alert {
  border-radius: 8px;
}

/* ── Error page instruction text ─────────────── */
/* PatternFly renders this in a near-white gray by default, making it
   invisible on the light card background (#f7f7f7). */

#kc-error-message .instruction,
#kc-error-message p {
  color: #d32f2f !important;
  margin-bottom: 16px !important;
}

/* ── All .pf-m-control buttons (password toggle, restart) ── */
/* Global reset — kills PatternFly chrome on ALL control-variant buttons */

.pf-v5-c-button.pf-m-control {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(0, 0, 0, 0.6) !important;
  /* Square 40×40 icon button. align-self: center prevents the parent
     .pf-v5-c-input-group (align-items: stretch by default) from pulling
     the button back to the input field's height. flex: 0 0 auto stops
     PF's child flex-grow from re-widening the button. */
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--after--BorderWidth: 0 !important;
  --pf-v5-c-button--m-control--after--BorderLeftWidth: 0 !important;
  --pf-v5-c-button--m-control--after--BorderBottomWidth: 0 !important;
}

.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
  display: none !important;
  border: none !important;
}

.pf-v5-c-button.pf-m-control:hover {
  color: rgba(0, 0, 0, 0.87) !important;
  border-color: rgba(0, 0, 0, 0.87) !important;
}

/* ── Password visibility icons ───────────────── */

/* Hide broken FA text, show SVG background instead */
.fa-eye,
.fa-eye-slash {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  display: inline-block !important;
  background: no-repeat center / contain;
}

.fa-eye::before,
.fa-eye-slash::before {
  content: '' !important;
}

.fa-eye {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.fa-eye-slash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* ── Checkbox (Remember me) ──────────────────── */

.pf-v5-c-check__label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}

/* ── Restart login button ────────────────────── */
/* Inherits base styles from .pf-v5-c-button.pf-m-control above.
   Only icon-specific overrides here. */

#reset-login i {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  display: inline-block !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M3 22v-6h6'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

#reset-login i::before {
  content: '' !important;
}

#reset-login .kc-tooltip-text {
  display: none !important;
}

#reset-login::after {
  display: none !important;
}

/* ── Organization selection (MUI ButtonGroup style) ── */

#kc-user-organizations h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.15px !important;
  margin-bottom: 8px;
}

#kc-user-organizations ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 8px;
  overflow: hidden;
}

#kc-user-organizations li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Shared border between items — no double borders */
#kc-user-organizations li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.23);
}

/* Reset the individual button styles */
#kc-user-organizations a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #007984 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
  box-shadow: none !important;
}

#kc-user-organizations a::before,
#kc-user-organizations a::after {
  display: none !important;
}

#kc-user-organizations a:hover {
  background: rgba(0, 121, 132, 0.08) !important;
  color: #005259 !important;
}

/* ── Footer area ─────────────────────────────── */

.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band {
  text-align: center;
}

/* ── Responsive adjustments ──────────────────── */

@media (max-width: 768px) {
  .pf-v5-c-login__main {
    padding: 40px 24px !important;
    margin: 16px;
    border-radius: 12px !important;
  }

  .pf-v5-c-login__container {
    padding-top: 20px;
  }
}