/* ============================================================================
   LG login theme: keycloak.v2 relaid out as the LG Suite sign-in.

   The Suite page (Bootstrap 5.3 on <client>.lgcloud.com.br/login) is the
   reference: the LG photograph covering the left, anchored top left; a 468px
   white column on the right (full width under 577px, where the photograph is
   hidden); the language menu at its top right; the colour logo in a 150px band;
   a centred title; icon fields 46px tall; a full-width Bootstrap-blue button;
   and two small footer lines. The values below are Bootstrap's defaults, the
   ones the Suite renders with.

   Two layers:
     1. The .lg-* classes template.ftl and login.ftl emit.
     2. PatternFly's components restyled as their Bootstrap counterparts, so the
        pages this theme inherits (OTP, update password, info, error) sit in
        the same column with the same fields, buttons and alerts.
   ============================================================================ */

:root {
  --lg-ink: #212529;
  --lg-muted: #6c757d;
  --lg-icon: #495057;
  --lg-line: #dee2e6;
  --lg-primary: #0d6efd;
  --lg-primary-hover: #0b5ed7;
  --lg-primary-active: #0a58ca;
  --lg-focus-border: #86b7fe;
  --lg-focus-ring: 0 0 0 0.25rem rgb(13 110 253 / 0.25);
  --lg-danger: #dc3545;
  --lg-radius: 0.375rem;
  --lg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
    sans-serif;

  /* PatternFly leaves, pointed at the same palette for whatever the inherited pages draw. */
  --pf-v5-global--primary-color--100: var(--lg-primary);
  --pf-v5-global--primary-color--dark-100: var(--lg-primary);
  --pf-v5-global--active-color--100: var(--lg-primary);
  --pf-v5-global--link--Color: var(--lg-primary);
  --pf-v5-global--link--Color--dark: var(--lg-primary);
  --pf-v5-global--link--Color--hover: var(--lg-primary-hover);
  --pf-v5-global--link--Color--dark--hover: var(--lg-primary-hover);
  --pf-v5-global--Color--100: var(--lg-ink);
  --pf-v5-global--Color--dark-100: var(--lg-ink);
  --pf-v5-global--Color--200: var(--lg-muted);
  --pf-v5-global--Color--dark-200: var(--lg-muted);
  --pf-v5-global--BorderColor--100: var(--lg-line);
  --pf-v5-global--BorderColor--dark-100: var(--lg-line);
  --pf-v5-global--danger-color--100: var(--lg-danger);
  --pf-v5-global--FontFamily--text: var(--lg-font);
  --pf-v5-global--FontFamily--text--vf: var(--lg-font);
  --pf-v5-global--FontFamily--heading: var(--lg-font);
  --pf-v5-global--FontFamily--heading--vf: var(--lg-font);
  --keycloak-bg-logo-url: none;
}

/* ==========================================================================
   Page frame: photograph | white column.
   ========================================================================== */
html.login-pf,
.login-pf body {
  height: auto;
  min-height: 100%;
}

.login-pf body.lg-auth {
  margin: 0;
  background: #fff;
  background-image: none;
  font-family: var(--lg-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lg-ink);
}

.lg-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.lg-photo {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  background: #10131a url("../img/background.jpg") left top / cover no-repeat;
}

.lg-panel {
  box-sizing: border-box;
  flex: none;
  width: 468px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

@media (min-width: 577px) {
  .lg-photo {
    display: block;
  }
}

@media (max-width: 576px) {
  .lg-panel {
    width: 100%;
  }
}

/* --- Language menu (the Suite's flag dropdown, top right) ---------------- */
.lg-lang {
  display: flex;
  justify-content: flex-end;
}

.lg-lang-menu {
  position: relative;
}

.lg-lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--lg-radius);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  color: var(--lg-ink);
  user-select: none;
}

.lg-lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lg-lang-menu > summary::after {
  content: "";
  margin-left: 0.15rem;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.lg-lang-menu > summary:focus-visible {
  outline: 0;
  box-shadow: var(--lg-focus-ring);
}

.lg-flag {
  width: 25px;
  height: auto;
  border-radius: 0.2rem;
}

.lg-lang-menu ul {
  position: absolute;
  right: 0;
  z-index: 10;
  min-width: 10rem;
  margin: 0.125rem 0 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.175);
  border-radius: var(--lg-radius);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
}

.lg-lang-menu li a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 1rem;
  color: var(--lg-ink);
  text-decoration: none;
  white-space: nowrap;
}

.lg-lang-menu li a:hover,
.lg-lang-menu li a:focus-visible {
  background: #e9ecef;
  outline: 0;
}

.lg-lang-menu li a.lg-lang-current {
  color: #3b5ea9;
  background: rgb(59 94 169 / 0.2);
}

/* --- Logo band ----------------------------------------------------------- */
.lg-logo {
  height: 150px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg-logo img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

/* --- Title and body ------------------------------------------------------ */
.lg-main {
  padding: 0 1rem;
}

.login-pf .lg-title,
#kc-page-title.lg-title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: var(--lg-font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--lg-ink);
}

/* --- Footer: "not a client" and the brand line --------------------------- */
.lg-footer {
  margin-top: 1.75rem;
  padding: 0 1rem;
  text-align: center;
  line-height: 1.25;
}

.lg-footer p {
  margin: 0;
  padding-bottom: 1rem;
}

.lg-footer small {
  font-size: 0.875em;
}

.lg-footer a {
  color: var(--lg-ink);
  text-decoration: none;
}

.lg-footer a:hover,
.lg-footer a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   The sign-in form (login.ftl): icon fields, the eye, the button.
   ========================================================================== */
.lg-form {
  display: flex;
  flex-direction: column;
}

.lg-field {
  position: relative;
  margin-bottom: 0.75rem;
}

.lg-field input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 0.75rem 0 2.75rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--lg-ink);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.lg-field input[type="password"],
.lg-field input#password {
  padding-right: 3rem;
}

.lg-field input::placeholder {
  color: var(--lg-muted);
  opacity: 1;
}

.lg-field input:focus {
  outline: 0;
  border-color: var(--lg-focus-border);
  box-shadow: var(--lg-focus-ring);
}

.lg-field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 14px;
  height: 16px;
  transform: translateY(-50%);
  fill: var(--lg-icon);
  pointer-events: none;
}

.lg-field-toggle {
  position: absolute;
  right: 4px;
  top: 0;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lg-field-toggle svg {
  width: 20px;
  height: 16px;
  fill: var(--lg-ink);
}

.lg-field-toggle .lg-eye-shown,
.lg-field-toggle.lg-shown .lg-eye-hidden {
  display: none;
}

.lg-field-toggle.lg-shown .lg-eye-shown {
  display: block;
}

.lg-field-toggle:focus-visible {
  outline: 0;
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-focus-ring);
}

.lg-field-error input {
  border-color: var(--lg-danger);
}

.lg-field-error input:focus {
  border-color: var(--lg-danger);
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 0.25);
}

.lg-field-message {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--lg-danger);
}

.lg-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--lg-ink);
  cursor: pointer;
}

.lg-submit,
.pf-v5-c-button.pf-m-primary {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--lg-primary);
  border-radius: var(--lg-radius);
  background: var(--lg-primary);
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.lg-submit:hover,
.pf-v5-c-button.pf-m-primary:hover {
  background: var(--lg-primary-hover);
  border-color: var(--lg-primary-hover);
  color: #fff;
}

.lg-submit:active,
.pf-v5-c-button.pf-m-primary:active {
  background: var(--lg-primary-active);
  border-color: var(--lg-primary-active);
}

.lg-submit:focus-visible,
.pf-v5-c-button.pf-m-primary:focus-visible {
  outline: 0;
  box-shadow: var(--lg-focus-ring);
}

.lg-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.pf-v5-c-button.pf-m-primary::after {
  display: none;
}

/* The product's first-access page, and the realm's own reset when it is on. */
.lg-first-access {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
}

.lg-first-access a,
.lg-body a:not(.pf-v5-c-button) {
  color: var(--lg-primary);
  text-decoration: none;
}

.lg-first-access a:hover,
.lg-body a:not(.pf-v5-c-button):hover {
  color: var(--lg-primary-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Inherited pages: PatternFly restyled as Bootstrap.
   ========================================================================== */
.lg-body .pf-v5-c-form {
  --pf-v5-c-form--GridGap: 0.75rem;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--lg-ink);
}

.pf-v5-c-form-control {
  box-sizing: border-box;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  background: #fff;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.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 > select,
.pf-v5-c-form-control > textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--lg-ink);
  background: transparent;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus {
  outline: none;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--lg-focus-border);
  box-shadow: var(--lg-focus-ring);
}

.pf-v5-c-form-control.pf-m-error {
  border-color: var(--lg-danger);
}

/* A grouped field (password with its eye): the group is the box, its children flush. */
.pf-v5-c-input-group {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  overflow: hidden;
  background: #fff;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--lg-focus-border);
  box-shadow: var(--lg-focus-ring);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.pf-v5-c-input-group .pf-v5-c-input-group__item {
  --pf-v5-c-input-group__item--BorderWidth--base: 0;
  --pf-v5-c-input-group__item--offset: 0;
  border: 0;
  margin: 0;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 0;
  background: transparent;
  color: var(--lg-ink);
  padding: 0 12px;
}

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

.pf-v5-c-form__helper-text {
  font-size: 0.875rem;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  border-radius: var(--lg-radius);
  min-height: 42px;
  font-size: 1rem;
}

.pf-v5-c-button.pf-m-secondary {
  border: 1px solid var(--lg-line);
  background: #fff;
  color: var(--lg-ink);
}

.pf-v5-c-button.pf-m-secondary::after {
  display: none;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: #f2f2f2;
}

/* Alerts: Bootstrap's alert colours, inline above the form. */
.lg-body .pf-v5-c-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--lg-radius);
  box-shadow: none;
  font-size: 0.875rem;
}

.lg-body .pf-v5-c-alert::before {
  display: none;
}

.lg-body .pf-v5-c-alert .pf-v5-c-alert__title {
  font-weight: 400;
  color: inherit;
}

.lg-body .pf-v5-c-alert.pf-m-danger {
  color: #58151c;
  background: #f8d7da;
  border-color: #f1aeb5;
}

.lg-body .pf-v5-c-alert.pf-m-warning {
  color: #664d03;
  background: #fff3cd;
  border-color: #ffe69c;
}

.lg-body .pf-v5-c-alert.pf-m-info {
  color: #055160;
  background: #cff4fc;
  border-color: #9eeaf9;
}

.lg-body .pf-v5-c-alert.pf-m-success {
  color: #0a3622;
  background: #d1e7dd;
  border-color: #a3cfbb;
}

.lg-body .pf-v5-c-alert .pf-v5-c-alert__icon {
  color: inherit;
}

/* Identity providers (corporate sign-in): the Suite's provider buttons. */
.lg-providers .pf-v5-c-login__main-footer-band {
  margin-top: 1.5rem;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--lg-muted);
}

#kc-social-providers ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

#kc-social-providers a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  background: #fff;
  color: var(--lg-ink);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#kc-social-providers a:hover {
  background: #f2f2f2;
}

#kc-social-providers svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.lg-info {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
}