/*
 * wm: account and admin consoles (Keycloak's React consoles) with the brand of the portal. Only
 * PatternFly 5 variables and a few selectors of the masthead: if a later Keycloak version changes
 * them, the console falls back to its default look instead of breaking. Colours and fonts come
 * from wm-brand.css, generated from @wm/brand.
 */

:root {
  --pf-v5-global--FontFamily--text: var(--wm-font);
  --pf-v5-global--FontFamily--heading: var(--wm-font);
  --pf-v5-global--FontFamily--text--vf: var(--wm-font);
  --pf-v5-global--FontFamily--heading--vf: var(--wm-font);
  --pf-v5-global--primary-color--100: var(--wm-primary);
  --pf-v5-global--primary-color--200: var(--wm-primary-dark);
  --pf-v5-global--primary-color--dark-100: var(--wm-primary);
  --pf-v5-global--primary-color--light-100: var(--wm-primary-soft);
  --pf-v5-global--active-color--100: var(--wm-primary);
  --pf-v5-global--active-color--200: var(--wm-primary-bg);
  --pf-v5-global--active-color--300: var(--wm-primary);
  --pf-v5-global--active-color--400: var(--wm-primary-soft);
  --pf-v5-global--link--Color: var(--wm-primary);
  --pf-v5-global--link--Color--hover: var(--wm-primary-dark);
  --pf-v5-global--link--Color--dark: var(--wm-primary);
  --pf-v5-global--link--Color--dark--hover: var(--wm-primary-dark);
  --pf-v5-global--link--Color--light: var(--wm-hero-check);
  --pf-v5-global--link--Color--light--hover: #ffffff;
  --pf-v5-global--Color--dark-100: var(--wm-text);
  --pf-v5-global--Color--dark-200: var(--wm-text-muted);
  --pf-v5-global--BackgroundColor--dark-100: var(--wm-sidebar);
  --pf-v5-global--BackgroundColor--dark-200: var(--wm-sidebar-deep);
  --pf-v5-global--BackgroundColor--dark-300: var(--wm-sidebar);
  --pf-v5-global--BackgroundColor--light-300: var(--wm-surface);
  --pf-v5-global--BorderRadius--sm: 6px;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Masthead: the dark band of the portal's sidebar, with the mark and the localised name. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--wm-sidebar);
}

.pf-v5-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pf-v5-c-masthead__brand img {
  width: 32px;
  height: 32px;
  max-height: 32px;
}

.pf-v5-c-masthead__brand::after {
  content: var(--wm-brand-name);
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Navigation: the portal's dark menu, the selected item on the primary colour. */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--wm-sidebar-text);
  --pf-v5-c-nav__link--hover--Color: #ffffff;
  --pf-v5-c-nav__link--focus--Color: #ffffff;
  --pf-v5-c-nav__link--active--Color: #ffffff;
  --pf-v5-c-nav__link--m-current--Color: #ffffff;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--wm-primary);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--after--BorderColor: transparent;
  --pf-v5-c-nav__link--focus--after--BorderColor: transparent;
  --pf-v5-c-nav__link--active--after--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: transparent;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__list {
  padding-inline: 10px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  border-radius: var(--wm-radius);
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--wm-surface);
}

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--wm-radius);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--wm-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--wm-primary-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--wm-primary-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--wm-primary-dark);
}

.pf-v5-c-card {
  --pf-v5-c-card--BorderRadius: var(--wm-radius-lg);
}