/*
 * WHERE IS login theme.
 *
 * The tokens below are copied from the frontend monorepo's `src/index.css`, which
 * all five apps share verbatim, so the login page and the product agree by
 * construction rather than by eye. Interactive colour is the apps' --primary
 * (#2563eb); the Wavecom logo's own blue (#3339ff) is used only for the brand
 * accent, because matching the product UI matters more than matching the logo.
 *
 * Everything is expressed by redefining variables the parent theme and PatternFly
 * already read. That is deliberate: PatternFly's global custom properties are a
 * supported surface, while its class names are not, so this survives a Keycloak
 * upgrade far better than rules written against generated markup.
 */

:root {
  /* --- WHERE IS design tokens (frontend packages/*/src/index.css) --- */
  --wi-background: hsl(0 0% 100%);
  --wi-foreground: hsl(222.2 84% 4.9%);
  --wi-muted: hsl(210 40% 96.1%);
  --wi-muted-foreground: hsl(215.4 16.3% 46.9%);
  --wi-primary: hsl(221.2 83.2% 53.3%);
  --wi-primary-hover: hsl(221.2 83.2% 45%);
  --wi-primary-foreground: hsl(210 40% 98%);
  --wi-destructive: hsl(0 84.2% 60.2%);
  --wi-border: hsl(214.3 31.8% 91.4%);
  --wi-radius: 0.5rem;
  --wi-brand: #3339ff;
  --wi-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* --- keycloak.v2's own hooks --- */
  --keycloak-logo-url: url("../img/wavecom-logo.png");
  --keycloak-logo-width: 240px;
  --keycloak-logo-height: 60px;
  /* The stock theme paints a full-bleed Keycloak photo; the apps are flat and
     light, so the page background is handled below instead. */
  --keycloak-bg-logo-url: none;
  --keycloak-card-top-color: var(--wi-brand);

  /* --- PatternFly globals --- */
  --pf-v5-global--FontFamily--text: var(--wi-font);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--wi-font);
  --pf-v5-global--FontFamily--sans-serif: var(--wi-font);
  --pf-v5-global--primary-color--100: var(--wi-primary);
  --pf-v5-global--primary-color--200: var(--wi-primary-hover);
  --pf-v5-global--link--Color: var(--wi-primary);
  --pf-v5-global--link--Color--hover: var(--wi-primary-hover);
  --pf-v5-global--Color--100: var(--wi-foreground);
  --pf-v5-global--Color--200: var(--wi-muted-foreground);
  --pf-v5-global--BorderColor--100: var(--wi-border);
  --pf-v5-global--BorderColor--200: var(--wi-border);
  --pf-v5-global--BorderColor--300: var(--wi-border);
  --pf-v5-global--BackgroundColor--100: var(--wi-background);
  --pf-v5-global--danger-color--100: var(--wi-destructive);
  --pf-v5-global--BorderRadius--sm: var(--wi-radius);
  --pf-v5-global--BorderRadius--lg: var(--wi-radius);
}

/* Tailwind's slate-50/white wash, so the page reads as part of the product. */
.login-pf body {
  background: linear-gradient(180deg, hsl(210 40% 98%) 0%, hsl(0 0% 100%) 55%);
  background-size: auto;
  font-family: var(--wi-font);
  color: var(--wi-foreground);
}

/* The logo sits above the card; give it room and centre it. */
#kc-header-wrapper {
  padding: 0 0 1.25rem;
}

/* shadcn-style card: hairline border, soft shadow, matching radius. */
.pf-v5-c-login__main {
  border: 1px solid var(--wi-border);
  border-radius: var(--wi-radius);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 4px 16px -4px rgb(15 23 42 / 0.08);
  overflow: hidden;
}

.pf-v5-c-login__main-header {
  padding-block-end: 0;
}

#kc-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wi-foreground);
}

/* Buttons and inputs: the product's radius, and its primary for the CTA. */
.pf-v5-c-button {
  border-radius: var(--wi-radius);
  font-weight: 500;
}

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

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

/* --- Inputs: one border, one radius ---------------------------------------
   PatternFly draws a form control's outline with two pseudo-elements: ::before
   paints the top, right and left sides with square corners, ::after paints only
   the bottom accent. Giving ::after a radius therefore leaves ::before's square
   outline showing through it -- two borders, one curved and one not. The
   password field compounds it: its reveal button is `pf-m-control`, whose own
   ::after outline is explicitly `border-radius: initial`, so it stays square.

   So rather than round three outlines and hope they line up, switch all three
   off -- through the same variables PatternFly's own `pf-m-plain` and
   `pf-m-disabled` modifiers use -- and draw exactly one ordinary border. Where
   there is an input group the border goes on the group, so the field and its
   button read as one rounded control instead of two boxes. */
.pf-v5-c-form-control,
.pf-v5-c-input-group {
  --pf-v5-c-form-control--before--BorderStyle: none;
  --pf-v5-c-form-control--after--BorderStyle: none;
  /* Zeroes the -1px overlap between group items, and with it the divider
     PatternFly draws between them in dark mode. */
  --pf-v5-c-input-group__item--offset: 0;

  background-color: var(--wi-background);
  border: 1px solid var(--wi-border);
  border-radius: var(--wi-radius);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  border-color: var(--wi-primary);
  /* Offset 0 so the ring abuts the border and focus reads as one thicker edge.
     The apps' inputs leave a 2px gap there, but Keycloak autofocuses the first
     field, which turns a detached ring into a second border on page load. */
  outline: 2px solid color-mix(in srgb, var(--wi-primary) 35%, transparent);
  outline-offset: 0;
}

/* State belongs on whichever box draws the border, hence `:has` for the group.
   A browser without it just keeps the neutral border. */
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-input-group:has(.pf-m-error) {
  border-color: var(--wi-destructive);
}

.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control.pf-m-disabled,
.pf-v5-c-input-group:has(.pf-m-readonly),
.pf-v5-c-input-group:has(.pf-m-disabled) {
  background-color: var(--wi-muted);
}

/* The group owns the box, so the control inside it draws none. */
.pf-v5-c-input-group .pf-v5-c-form-control {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  outline: 0;
}

/* The password reveal, and every other `pf-m-control` button that sits in an
   input group, now live inside the group's box, which makes them icons rather
   than controls -- no fill, no outline of their own. Every value below is one of PatternFly's own state variables, because
   `pf-m-control` writes those widths straight onto :after, where a variable set
   on the element is the only thing that beats them. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--Color: var(--wi-muted-foreground);
  --pf-v5-c-button--m-control--hover--Color: var(--wi-foreground);
  --pf-v5-c-button--m-control--focus--Color: var(--wi-foreground);
  --pf-v5-c-button--m-control--active--Color: var(--wi-foreground);
  --pf-v5-c-button--m-control--after--BorderWidth: 0;
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: 0;
  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: 0;
  border-radius: var(--wi-radius);
}

/* A dropdown toggle -- the username menu in the account masthead, the locale
   picker on the login page -- is outlined the same two-pseudo-element way, but
   there `border-style` is hardcoded rather than read from a variable, so the
   only way out is to zero both pseudo borders outright. One rule covers every
   state, because PatternFly drives the states through those same widths. Plain
   toggles are excluded: they are meant to have no box at all. */
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
  border: 0;
}

.pf-v5-c-menu-toggle:not(.pf-m-plain) {
  border: 1px solid var(--wi-border);
  border-radius: var(--wi-radius);
}

a {
  color: var(--wi-primary);
}

a:hover {
  color: var(--wi-primary-hover);
}

/* --- dark mode: the apps' `.dark` block, same source file --- */
.pf-v5-theme-dark {
  --wi-background: hsl(222.2 84% 4.9%);
  --wi-foreground: hsl(210 40% 98%);
  --wi-muted: hsl(217.2 32.6% 17.5%);
  --wi-muted-foreground: hsl(215 20.2% 65.1%);
  --wi-primary: hsl(217.2 91.2% 59.8%);
  --wi-primary-hover: hsl(217.2 91.2% 68%);
  --wi-primary-foreground: hsl(222.2 47.4% 11.2%);
  --wi-border: hsl(217.2 32.6% 17.5%);

  --keycloak-logo-url: url("../img/wavecom-logo-white.png");
  --pf-v5-global--Color--100: var(--wi-foreground);
  --pf-v5-global--Color--200: var(--wi-muted-foreground);
  --pf-v5-global--BorderColor--100: var(--wi-border);
  --pf-v5-global--BackgroundColor--100: var(--wi-background);
  --pf-v5-global--primary-color--100: var(--wi-primary);
  --pf-v5-global--link--Color: var(--wi-primary);
}

.pf-v5-theme-dark.login-pf body,
.pf-v5-theme-dark .login-pf body {
  background: linear-gradient(180deg, hsl(222.2 84% 4.9%) 0%, hsl(222.2 47.4% 11.2%) 100%);
  color: var(--wi-foreground);
}

.pf-v5-theme-dark .pf-v5-c-login__main {
  background-color: hsl(222.2 84% 4.9%);
  border-color: var(--wi-border);
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.5);
}

/* Inputs need no dark rule of their own: the shared block paints them with
   --wi-background and --wi-border, which is exactly what the apps do -- an input
   the colour of its card, separated by a visible border. */