/*
 * 1820 skin for the Keycloak login page.
 *
 * Goal: standing next to the portal, the login must not read as a different
 * product. Values mirror packages/ui/src/theme.css — the ONE place the brand is
 * defined; duplicated here as literals because Keycloak serves this stylesheet
 * standalone (it cannot import the app's token sheet). Keep them in sync:
 *
 *   brand #ff0000 · brand-strong #d70000 · hover #b80000
 *   surface #ffffff · surface-muted #f5f6f9 · border #dfdfdf
 *   ink #555555 · ink-muted #777777
 *   container max-w-5xl = 64rem · header py-4 px-6 · text-lg = 1.125rem
 *
 * The two fonts below are served FIRST-PARTY, from auth.1820.ch itself: the
 * exact same latin-subset variable woff2 files that next/font self-hosts for
 * the portal (apps/portal/lib/fonts.ts), copied byte-for-byte into
 * resources/fonts/ next to this stylesheet. There is NO third-party request —
 * fetching from Google Fonts would leak every visitor's IP to a third party,
 * not acceptable for a Swiss directory product — and the login headline
 * renders in Raleway, matching the portal exactly.
 *
 * Re-skinning goes primarily through PatternFly's own custom properties, so
 * components we do not name explicitly come along.
 */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
.pf-v5-c-login,
.login-pf {
  --pf-v5-global--primary-color--100: #ff0000;
  --pf-v5-global--primary-color--200: #d70000;
  --pf-v5-global--link--Color: #d70000;
  --pf-v5-global--link--Color--hover: #b80000;
  --pf-v5-global--BorderColor--100: #dfdfdf;
  --pf-v5-global--Color--100: #555555;
  --pf-v5-global--Color--200: #777777;
  --pf-v5-global--BackgroundColor--100: #ffffff;
  --pf-v5-global--FontFamily--sans-serif: "Open Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif: "Raleway", "Open Sans",
    ui-sans-serif, system-ui, sans-serif;
  --pf-v5-global--BorderRadius--sm: 6px;
}

html,
body,
body#keycloak-bg,
.login-pf body,
.pf-v5-c-background-image,
.pf-v5-c-login {
  background: #f5f6f9 !important;
  background-image: none !important;
  color: #555555;
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- layout ---
 * The portal puts its header at the very TOP of the viewport and lays content
 * out left-aligned inside a max-w-5xl (64rem) container. Keycloak instead
 * vertically centres a 34rem grid, which is what produced the large empty band
 * above the header in the owner's screenshot, and what made the wordmark and
 * the card start at different x positions.
 *
 * So: stop the vertical centring, widen the container to the portal's 64rem,
 * and left-align the card inside it with the SAME left inset as the wordmark —
 * the two then line up exactly as they do in the portal.
 */
.pf-v5-c-login {
  /* PatternFly spaces this with LOGICAL properties (padding-block-start /
   * -inline), so the physical `padding` shorthand alone does not reliably clear
   * them — that leftover block-start inset is the grey band that sat above the
   * banner. Zero both spellings. */
  padding: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  padding-inline: 0 !important;
  margin: 0 !important;
  align-content: start !important;
  align-items: start !important;
  justify-items: center !important;
  row-gap: 0 !important;
  min-height: 100vh;
}
.pf-v5-c-login__container {
  /* NOT width-limited: the header is then full-bleed by nature and needs no
   * negative-margin/vw trick at all. `50vw` counts the scrollbar while a
   * percentage width does not, so any vw-based full-bleed re-introduces a few
   * px of horizontal scroll on a scrolling page — the very thing it is meant to
   * avoid. Width is applied to the header's inner wrapper and to the card
   * instead, exactly as the portal does it (mx-auto on the content, not on the
   * shell). */
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-block-start: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
}
html,
body,
body#keycloak-bg {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------- header ---
 * Full-bleed white bar with a hairline bottom border, its content constrained
 * to 64rem and left-aligned — the portal's shell.
 */
#kc-header,
.pf-v5-c-login__header {
  /* Full width without any vw arithmetic — the container above is unconstrained,
   * so the bar simply spans it. */
  width: 100%;
  background: #ffffff !important;
  border-bottom: 1px solid #dfdfdf !important;
  padding: 0 !important;
  padding-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  margin-bottom: 4rem;
}
#kc-header-wrapper,
.pf-v5-c-brand {
  max-width: 64rem; /* max-w-5xl, as in the portal header */
  margin: 0 auto !important;
  /* px-4 below the sm breakpoint, px-6 from sm up — exactly the portal header's
   * `px-4 py-4 sm:px-6`. A flat px-6 sat 0.5rem further in on narrow screens. */
  padding: 1rem !important;
  text-align: left !important;
  font-family: "Raleway", "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 700 !important;
  /* The stock sheet sets text-transform:uppercase + letter-spacing:3px on this
   * node — that is what rendered "1820 BUSINESS-PORTAL" instead of the portal's
   * "1820 Business-Portal". */
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  color: #555555 !important; /* ink — only the "1820" is brand red */
  white-space: normal !important;
}
/* The wordmark's brand half, emitted by the theme's message bundle. The mark
 * sits where the language puts it: de/en lead with it ("1820 Business-Portal"),
 * fr/it trail it ("Portail Business 1820") — same structure and same position
 * as the portal header's `text-brand` span. */
#kc-header-wrapper .wm-brand,
.wm-brand {
  color: #ff0000 !important;
}
@media (min-width: 640px) {
  #kc-header-wrapper,
  .pf-v5-c-brand {
    padding: 1rem 1.5rem !important; /* sm:px-6 */
  }
}

/* ------------------------------------------------------------------ card ---
 * Same treatment as the portal's panels: white, hairline border, soft shadow.
 */
.pf-v5-c-login__main {
  /* CENTRED, like the portal's content section (`mx-auto max-w-2xl`). Measured
   * on the portal: the header uses max-w-5xl and the content max-w-2xl, both
   * mx-auto — the content only LOOKS left because its container is narrower.
   * Pinning the card to the wordmark instead (an earlier attempt) tipped the
   * whole page to the left. */
  margin-left: auto !important;
  margin-right: auto !important;
  /* 34rem card, but never edge-to-edge: below 34rem+gutter the card keeps the
   * portal's px-4 breathing room, so its border, shadow and the outside focus
   * ring all stay visible. */
  max-width: min(34rem, 100% - 2rem);
  width: 100%;
  justify-self: center !important;
  background: #ffffff !important;
  color: #555555 !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  /* NOT `overflow: hidden`: the focus ring is drawn outside the control
   * (outline-offset), so clipping the card could cut it off at the edges. */
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#kc-page-title,
.pf-v5-c-title {
  color: #555555 !important;
  font-family: "Raleway", "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- form ---
 * PatternFly v5 puts the border on the WRAPPER (.pf-v5-c-form-control) and
 * leaves the inner <input> borderless. Styling both — as the first version of
 * this sheet did — produced the double-boxed fields in the owner's screenshot.
 * Border on the wrapper only.
 */
.pf-v5-c-form__label-text,
label {
  color: #555555 !important;
  font-weight: 600 !important;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
}
/* Breathing room between label and field. Without it the focus ring (drawn
 * OUTSIDE the control, offset by 2px) crosses the label text and the label
 * looks struck through. */
.pf-v5-c-form__label,
.pf-v5-c-form__group-label {
  margin-bottom: 0.4rem !important;
  padding-bottom: 0 !important;
}
/* Spacing inside the form is PatternFly's own grid, driven by custom
 * properties — the large void between the password field and the submit button
 * was --pf-v5-c-form__group--m-action--MarginTop (spacer--xl) on top of the grid
 * gap. Set the properties rather than fighting them with margins. */
.pf-v5-c-form,
#kc-form-login {
  --pf-v5-c-form--GridGap: 1rem;
  --pf-v5-c-form__group--m-action--MarginTop: 0.5rem;
  row-gap: 1rem !important;
}
/* Keycloak emits form groups that carry only a hidden input (credentialId) and
 * empty error containers. They render as blank rows and were the large gap
 * between the password field and the submit button. Collapse them. */
.pf-v5-c-form__group:has(> input[type="hidden"]:only-child),
.pf-v5-c-form__group:empty,
.pf-v5-c-login__main-footer:empty {
  display: none !important;
  margin: 0 !important;
}
.pf-v5-c-form__actions {
  margin-top: 0.5rem !important;
}

.pf-v5-c-form-control {
  background: #ffffff !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 6px !important;
  --pf-v5-c-form-control--BorderBottomColor: #dfdfdf;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: 0 !important;
  content: none !important;
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control select,
#login-select-toggle {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #555555 !important;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
}
/* Focus exactly as the portal does it (focus-visible:outline-2 outline-offset-2
 * outline-brand): a red RING outside the field. The first version also turned
 * the border red and added a glow, which made an autofocused empty field read
 * as a validation error. */
.pf-v5-c-form-control:focus-within {
  outline: 2px solid #ff0000 !important;
  outline-offset: 2px !important;
  border-color: #dfdfdf !important;
  box-shadow: none !important;
}

/* Language switcher: hidden. The portal now passes `ui_locales`, so the login
 * always renders in the language the user is already reading — and the portal
 * itself has no such control, so showing one here would be a visible seam
 * between the two. (Kept in the DOM rather than removed from the template: no
 * template fork, and the control returns if the parameter is ever dropped.) */
.pf-v5-c-login__main-header-utilities {
  display: none !important;
}

/* The show/hide-password toggle rendered as a dark block. Make it a quiet
 * ghost button that belongs to the field. */
.pf-v5-c-input-group,
.pf-v5-c-input-group__item {
  background: transparent !important;
  border: 0 !important;
}
.pf-v5-c-button.pf-m-control {
  background: #ffffff !important;
  color: #777777 !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 6px !important;
}
.pf-v5-c-button.pf-m-control:hover {
  color: #555555 !important;
  border-color: #b8b8b8 !important;
}

/* --------------------------------------------------------------- action ---
 * #d70000, not #ff0000: the accessible pairing for white label text — see the
 * contrast note in packages/ui/src/theme.css.
 */
.pf-v5-c-button.pf-m-primary,
input[type="submit"],
#kc-login {
  background: #d70000 !important;
  border-color: #d70000 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
}
.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
#kc-login:hover {
  background: #b80000 !important;
  border-color: #b80000 !important;
}

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

.pf-v5-c-alert {
  border-radius: 6px !important;
}