/*
 * SmartGare login theme — extends keycloak.v2 (PatternFly v5).
 *
 * Layout: a full-bleed two-column split. The LEFT column is the stock
 * `.pf-v5-c-login__header` carrying the brand panel; the RIGHT column is
 * `.pf-v5-c-login__main` carrying the form. Both are already grid children of
 * `.pf-v5-c-login__container`, which is why the split needs no wrapper — only
 * template.ftl's three added copy blocks (see that file's FORK markers).
 *
 * Palette mirrors the @smartgare/ui tokens in smartgare-frontend
 * (packages/ui/src/styles.css); keep both in sync when values change.
 *
 * Contrast (WCAG AA, measured): white on navy 14.66:1 · teal-light on navy
 * 7.87:1 · slate-light on navy 7.10:1 · navy on white 14.66:1 · accent-dark on
 * white 5.07:1 · muted on white 4.79:1. Nothing load-bearing sits below 4.5:1.
 */
:root {
  --sg-color-navy: #0f2a43;
  --sg-color-navy-dark: #091d30;
  --sg-color-navy-deep: #0a1e31;
  --sg-color-accent: #0d9488;
  --sg-color-accent-dark: #0b7c72;
  --sg-color-accent-darker: #095f57;
  /* On-navy variants: the bright accent is too dark to read on the panel. */
  --sg-color-accent-light: #2dd4bf;
  --sg-color-on-navy: #ffffff;
  --sg-color-on-navy-muted: #a8b6c6;
  --sg-color-field: #eef1f5;
  --sg-color-surface: #ffffff;
  --sg-color-border: #cdd6e0;
  /* #cdd6e0 is 1.47:1 on white — decorative only. A control boundary needs
     3:1 under WCAG non-text contrast, which is what this darker slate is for. */
  --sg-color-control-border: #74879a;
  --sg-color-muted: #647486;

  /* Drop the default Keycloak background artwork and card accent bar. */
  --keycloak-bg-logo-url: none;
  --keycloak-card-top-color: transparent;

  /* PatternFly v5 globals: links, focus rings, secondary text. */
  --pf-v5-global--primary-color--100: var(--sg-color-accent-dark);
  --pf-v5-global--primary-color--200: var(--sg-color-accent-darker);
  --pf-v5-global--active-color--100: var(--sg-color-accent);
  --pf-v5-global--link--Color: var(--sg-color-accent-dark);
  --pf-v5-global--link--Color--hover: var(--sg-color-accent-darker);
  --pf-v5-global--Color--200: var(--sg-color-muted);
  --pf-v5-global--BorderColor--300: var(--sg-color-border);
}

/* ---------------------------------------------------------------------------
 * The split.
 * ------------------------------------------------------------------------- */
.login-pf body,
body#keycloak-bg {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--sg-color-surface);
}

.pf-v5-c-login {
  display: block;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* keycloak.v2 declares `grid-template-areas: "header" "main"` here — a single
 * column of two rows. Setting grid-template-columns alone is NOT enough: the
 * columns apply but the named areas keep stacking the items. The areas string
 * has to be rewritten onto one row, and both children re-pointed at it. */
.pf-v5-c-login__container {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(28rem, 48fr);
  grid-template-areas: 'header main';
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
 * Left column — the brand panel.
 *
 * Content sits in the LOWER left, as in the reference, rather than centred:
 * `justify-content: flex-end` on a column flex. The radial glow and the grid
 * overlay are two stacked background layers, no extra DOM and no image asset.
 * ------------------------------------------------------------------------- */
.pf-v5-c-login__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
  padding: clamp(2.5rem, 4vw, 4.5rem);
  color: var(--sg-color-on-navy);
  background-color: var(--sg-color-navy);
  /* Layer order is TOP-first, and the base gradient is opaque — listing it
     above the grid hides the grid completely. Glow, then grid, then base. */
  background-image:
    radial-gradient(
      70% 55% at 12% 8%,
      rgba(45, 212, 191, 0.18) 0%,
      rgba(45, 212, 191, 0) 60%
    ),
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.028) 0 1px,
      transparent 1px 96px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.028) 0 1px,
      transparent 1px 96px
    ),
    linear-gradient(160deg, var(--sg-color-navy) 0%, var(--sg-color-navy-deep) 100%);
}

/* The product wordmark (the realm's displayNameHtml) is deliberately NOT shown
 * here — the station identifies this screen, not the software. `display: none`
 * rather than visibility/clip so it leaves the accessibility tree too and no
 * screen reader announces "SmartGare" before the station name. The product name
 * still appears in the legal line at the foot of the form column. */
#kc-header-wrapper.pf-v5-c-brand {
  display: none;
}

/* The station is the mark. Uppercasing is presentational, so the configured
 * value stays naturally cased ("Ouled Ziane") for the browser title. */
.sg-brand__station {
  margin: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-color-on-navy);
}

.sg-brand__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sg-color-accent-light);
}

.sg-brand__headline {
  max-width: 12ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--sg-color-on-navy);
}

.sg-brand__sub {
  max-width: 46ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sg-color-on-navy-muted);
}

/* ---------------------------------------------------------------------------
 * Right column — the form.
 * ------------------------------------------------------------------------- */
/* `align-self: stretch` is not the default here — the base theme centres the
 * main in its row, leaving it shorter than the column. Without the stretch the
 * absolutely-positioned legal line anchors to a 590px box, not the viewport. */
.pf-v5-c-login__main {
  grid-area: main;
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 100dvh;
  max-width: none;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem) 4rem;
  background: var(--sg-color-surface);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main > .pf-v5-c-login__main-footer {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding-inline: 0;
}

.pf-v5-c-login__main-header {
  display: block;
  padding-top: 0;
  padding-bottom: 2rem;
  border-top: 0;
}

.sg-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sg-color-accent-dark);
}

.pf-v5-c-login__main .pf-v5-c-title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--sg-color-navy);
}

.sg-subtitle {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sg-color-muted);
}

/* Pinned to the foot of the column rather than flowed after the form: an auto
 * margin would eat the free space that `justify-content: center` needs, which
 * top-aligns the whole form. Taking it out of flow keeps the form centred and
 * the line at the bottom on every screen, however tall the form gets. */
.sg-legal {
  position: absolute;
  inset: auto 0 1.5rem;
  margin: 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--sg-color-muted);
}

/* ---------------------------------------------------------------------------
 * Fields.
 *
 * The input is a CHILD of `.pf-v5-c-form-control`, not the element itself, so
 * every rule here targets the child. PatternFly paints the resting border on
 * the wrapper's ::before and the interaction border on its ::after — there is
 * no `--pf-v5-c-form-control--BorderColor`, and the hover/focus states each
 * carry their OWN variable. Setting only the base one leaves the underline
 * PatternFly blue (#0066cc) on the username field, which Keycloak autofocuses.
 * ------------------------------------------------------------------------- */
.pf-v5-c-form-control {
  /* PatternFly draws its own boundary on ::before/::after. We replace it with a
     real border, so those are neutralised rather than recoloured. */
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: transparent;
  min-height: 3.5rem;
  border: 1px solid var(--sg-color-control-border);
  border-radius: 0;
  background: var(--sg-color-field);
  overflow: hidden;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-bottom: 0;
}

.pf-v5-c-form-control:hover {
  border-color: var(--sg-color-navy);
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--sg-color-accent-dark);
}

.pf-v5-c-form-control > :is(input, textarea)::placeholder {
  color: var(--sg-color-muted);
  opacity: 1;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  color: var(--sg-color-navy);
  border: 0;
  background-color: transparent;
  box-shadow: none;
  outline: 0;
}

/* Leading icons, as in the reference. Inline SVG data URIs — the theme ships no
 * icon font and a strict CSP would block an external one. */
#username,
#password {
  padding-inline-start: 3rem;
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.125rem;
}

#username {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647486' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

#password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647486' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='1'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Chrome paints autofilled fields its own yellow unless the inset shadow wins. */
.pf-v5-c-form-control > input:-webkit-autofill {
  -webkit-text-fill-color: var(--sg-color-navy);
  box-shadow: 0 0 0 1000px var(--sg-color-field) inset;
}

#rememberMe {
  accent-color: var(--sg-color-accent-dark);
}

.pf-v5-c-form__label-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-color-navy);
}

/* The password field is a form-control plus a "show password" toggle sitting
 * beside it in an input group. Left alone they read as two separate boxes, so
 * the GROUP carries the border and radius and the parts inside go borderless. */
.pf-v5-c-input-group {
  border: 1px solid var(--sg-color-control-border);
  border-radius: 0;
  background: var(--sg-color-field);
  overflow: hidden;
}

.pf-v5-c-input-group:hover {
  border-color: var(--sg-color-navy);
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--sg-color-accent-dark);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  border: 0;
  border-radius: 0;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  min-height: 3.5rem;
  color: var(--sg-color-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Actions. Rectangular, as in the reference — the pill belonged to the older
 * card design. Navy fill because the teal accent is 3.25:1 on white and cannot
 * carry a call to action.
 * ------------------------------------------------------------------------- */
.pf-v5-c-login__main .pf-v5-c-button:not(.pf-m-control):not(.pf-m-inline) {
  --pf-v5-c-button--BorderRadius: 0;
  --pf-v5-c-button--after--BorderRadius: 0;
  min-height: 3.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pf-v5-c-login__main .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: var(--sg-color-surface);
  --pf-v5-c-button--m-primary--BackgroundColor: var(--sg-color-navy);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--sg-color-navy-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--sg-color-navy-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--sg-color-navy-dark);
}

/* The submit carries the reference's trailing arrow: label pushed left, arrow
 * pinned right. Only the login button — secondary actions stay centred. */
#kc-login.pf-v5-c-button.pf-m-primary {
  padding-inline: 1.25rem 3.5rem;
  text-align: start;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 1.125rem) center;
  background-size: 1.25rem;
}

.pf-v5-c-login__main .pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--sg-color-navy);
  --pf-v5-c-button--m-secondary--BorderColor: var(--sg-color-border);
}

/* "Se souvenir de moi" and "Mot de passe oublié ?" share a row in the DOM but
 * stack by default; the reference puts the recovery link opposite the option. */
#kc-form-login .pf-v5-c-form__group:has(#kc-form-options) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------
 * Focus. PatternFly's own rule for form controls only sets outline-offset — it
 * never assigns an outline-color, so focused fields fall back to the browser's
 * default blue UA outline; --pf-v5-global--active-color--100 is not consulted
 * there at all. :focus-visible keeps the ring off pointer interactions.
 * ------------------------------------------------------------------------- */
.pf-v5-c-login__main
  :is(.pf-v5-c-form-control > :is(input, select, textarea), a, button):focus-visible {
  outline: 3px solid var(--sg-color-accent-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Shared screens: OTP tiles, passkey pickers, alerts and helper text all reach
 * these pages through the same template, so they get the palette too rather
 * than staying PatternFly blue.
 * ------------------------------------------------------------------------- */
.pf-v5-c-tile.pf-m-selected,
.select-auth-box-parent:hover {
  --pf-v5-c-tile--m-selected--BorderColor: var(--sg-color-accent-dark);
  border-color: var(--sg-color-accent-dark);
}

.pf-v5-c-tile__title,
.select-auth-box-headline {
  color: var(--sg-color-navy);
}

.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band,
#kc-info,
.instruction {
  color: var(--sg-color-muted);
}

/* ---------------------------------------------------------------------------
 * Narrow viewports: the brand panel cannot hold a 4rem headline beside a form,
 * so it collapses to a band above it and drops the supporting copy.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Resetting the columns is NOT enough — the named areas keep the two-column
     placement on their own. Both have to come back to a single stack. */
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'header'
      'main';
    min-height: 100dvh;
  }

  .pf-v5-c-login__header {
    justify-content: flex-start;
    min-height: auto;
    padding: 2.5rem 1.5rem 3rem;
  }

  .sg-brand__station {
    margin: 0 0 2rem;
  }

  .sg-brand__headline {
    max-width: 16ch;
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }

  .sg-brand__sub {
    display: none;
  }

  .pf-v5-c-login__main {
    min-height: auto;
    padding: 2.5rem 1.5rem 4rem;
  }

  /* No longer a full-height column, so the line flows after the form. */
  .sg-legal {
    position: static;
    margin-top: 3rem;
  }
}