/* Qbit-360 brand skin over keycloak.v2 (PatternFly 5). Colours are literal hex, not the app's tokens:
   q360-web/app/globals.css builds its roles with color-mix()/oklch() over --q360-* names that do not
   exist here, so the deck's own values are repeated rather than re-derived. */

@font-face {
  font-family: "Schibsted Grotesk"; /* the app's face, bundled so the sign-in page calls no third party */
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800; /* variable face; the latin subset covers U+0000-00FF, Danish included */
  font-display: swap;
}

:root {
  --q360-deep-navy: #20365f;
  --q360-logo-red: #c11e3d; /* the one flat fill q360-mark.png is drawn in */
  --q360-input-border: #cbd5e1; /* the app's .field-input border, Tailwind slate-300 */
  --q360-input-border-focus: #64748b; /* and its focused border, Tailwind slate-500 */

  --keycloak-logo-url: url("../img/q360-mark.png");
  --keycloak-logo-width: 200px;
  --keycloak-logo-height: 98px; /* the wordmark is 512x252, so height follows width at 2.03:1 */
  --keycloak-card-top-color: var(--q360-logo-red);

  --pf-v5-global--FontFamily--text: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
  /* PatternFly declares the --100 aliases as literals, so overriding only the --dark-* ones it
     nominally derives them from leaves the button blue. Both are set, hence the pairs below.
     --200/--300 are the button's hover and active states. */
  --pf-v5-global--primary-color--100: var(--q360-deep-navy);
  --pf-v5-global--primary-color--200: #12213e; /* the app's --color-button-primary-hover, resolved */
  --pf-v5-global--primary-color--300: var(--pf-v5-global--primary-color--200);
  --pf-v5-global--primary-color--dark-100: var(--q360-deep-navy);
  --pf-v5-global--link--Color: var(--q360-deep-navy);
  --pf-v5-global--link--Color--dark: var(--q360-deep-navy);
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--primary-color--200);
  --pf-v5-global--link--Color--dark--hover: var(--pf-v5-global--primary-color--200);
  --pf-v5-global--danger-color--100: var(--q360-logo-red);
}

.login-pf body {
  background: var(--q360-deep-navy); /* replaces keycloak.v2's own background image */
}

/* PatternFly draws a field as three faint sides plus a separate full-width bar underneath, which is
   where its weight lives. The app has one input look (q360-web .field-input), a plain bordered box, so
   the four edges are evened out and the bar is dropped. Each state is silenced at the token PF derives
   it from, since its own :focus-within/.pf-m-error rules outrank a single-class override. */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopColor: var(--q360-input-border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--q360-input-border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--q360-input-border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--q360-input-border);
  --pf-v5-c-form-control--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: 0;
}

/* The browser's own focus ring is rounded, and PF offsets it 2px INTO the box, so it sat behind the
   square border as a second frame with only some of its sides showing. The app replaces that ring
   rather than moving it (.field-input is outline-none plus a slate-500 border and a 1px ring of the
   same colour), so here the box itself doubles and darkens to the same weight, drawn inward so a
   focused password field cannot overlap the button in its input group. */
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--before--BorderTopColor: var(--q360-input-border-focus);
  --pf-v5-c-form-control--before--BorderRightColor: var(--q360-input-border-focus);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--q360-input-border-focus);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--q360-input-border-focus);
  --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--md);
}

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

/* PF signals a refused value in the bar, which is gone, so the box carries it instead. */
.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--danger-color--100);
}

/* The show-password button shares the password field's input group and carries the identical bar. */
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--q360-input-border);
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
}

/* And the same for its focus: the button's box is the identical inset frame, so the browser's rounded
   ring stacked over it too. One declaration each here rather than four, because the button reads its
   four sides through one shorthand token where the field publishes them separately. */
.pf-v5-c-button.pf-m-control:focus-visible {
  --pf-v5-c-button--after--BorderColor: var(--q360-input-border-focus);
  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  outline: none;
}

/* The header sits on the navy above the card, and the wordmark carries the product name itself, so it
   stands alone. font-size:0 hides the realm displayName visually but keeps it as the accessible name. */
#kc-header-wrapper {
  width: var(--keycloak-logo-width);
  height: var(--keycloak-logo-height);
  margin: 0 auto var(--pf-v5-global--spacer--xl);
  background: var(--keycloak-logo-url) center / contain no-repeat;
  font-size: 0;
}

/* Microsoft (Entra ID) social button. v2 puts the label INSIDE this element, so it is the whole button
   content: a centred row with the official 4-square mark drawn before the text. */
.kc-mslogo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: auto; /* matches how v2 centres its built-in providers (kcFormSocialAccountNameClass) */
}

.kc-mslogo::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: none;
  background: url("../img/microsoft.svg") center / contain no-repeat;
}

/* The requirements list on the set-password form: helper text above the field, not a heading. */
.q360-password-requirements {
  margin-block-end: var(--pf-v5-global--spacer--md);
  color: var(--pf-v5-global--Color--200);
  font-size: var(--pf-v5-global--FontSize--sm);
  list-style: disc;
  padding-inline-start: var(--pf-v5-global--spacer--md);
}