/* HALMEEL look for the account and admin consoles (React apps on PatternFly 5): the
   website's white header with the yellow accent, light sidebar with navy text, light grey
   page, DM Sans. Only colours and type are changed; the layout stays Keycloak's. */

/* Header: white like the website, with the yellow top bar as an accent line. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--hm-card);
  --pf-v5-global--Color--100: var(--hm-navy);
  --pf-v5-global--Color--200: var(--hm-muted-foreground);
  --pf-v5-global--BorderColor--100: var(--hm-input);
  --pf-v5-global--primary-color--100: var(--hm-primary);
  --pf-v5-global--link--Color: var(--hm-primary);
  --pf-v5-global--link--Color--hover: var(--hm-primary-hover);
  --pf-v5-global--BackgroundColor--100: var(--hm-card);
  --pf-v5-global--icon--Color--light: var(--hm-navy);
  --pf-v5-global--icon--Color--dark: var(--hm-navy);
  border-top: 4px solid var(--hm-yellow);
  border-bottom: 1px solid var(--hm-header-border);
  color: var(--hm-navy);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-button--m-plain--Color: var(--hm-navy);
  --pf-v5-c-button--m-plain--hover--Color: var(--hm-primary);
  --pf-v5-c-menu-toggle--Color: var(--hm-navy);
  --pf-v5-c-menu-toggle--m-plain--Color: var(--hm-navy);
  --pf-v5-c-menu-toggle--m-plain--hover--Color: var(--hm-primary);
  color: var(--hm-navy);
  font-weight: 600;
}

.pf-v5-c-masthead .pf-v5-c-masthead__brand img,
.pf-v5-c-masthead .pf-v5-c-brand {
  height: 3rem;
  max-height: none;
  width: auto;
}

/* Sidebar: white with navy links; the current page in the website's blue. */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--hm-card);
  --pf-v5-global--Color--100: var(--hm-navy);
  --pf-v5-global--Color--200: var(--hm-muted-foreground);
  --pf-v5-global--BackgroundColor--100: var(--hm-card);
  border-right: 1px solid var(--hm-border);
  color: var(--hm-navy);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--hm-navy);
  --pf-v5-c-nav__link--hover--Color: var(--hm-link);
  --pf-v5-c-nav__link--m-current--Color: var(--hm-navy-link);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--hm-muted);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--hm-accent);
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--hm-primary);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--hm-primary);
  --pf-v5-c-nav__section-title--Color: var(--hm-muted-foreground);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--hm-primary);
}

.pf-v5-c-nav__link {
  font-weight: 600;
}

/* Page background and content. */
.pf-v5-c-page,
.pf-v5-c-page__main {
  --pf-v5-c-page--BackgroundColor: var(--hm-background);
  --pf-v5-c-page__main-section--BackgroundColor: var(--hm-background);
}

.pf-v5-c-page__main-section.pf-m-light {
  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--hm-card);
}

.pf-v5-c-title {
  color: var(--hm-foreground);
  font-weight: 600;
}

.pf-v5-c-tabs {
  --pf-v5-c-tabs__link--after--BorderColor: transparent;
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--hm-primary);
  --pf-v5-c-tabs__item--m-current__link--Color: var(--hm-navy-link);
}

.pf-v5-c-card {
  --pf-v5-c-card--BoxShadow: 0 1px 2px rgb(16 24 40 / 0.04);
  border: 1px solid var(--hm-border);
  border-radius: 12px;
}

/* Dark pages use the dark-theme logo (transparent, light lettering). */
html.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-masthead__brand img,
html.pf-v5-theme-dark .pf-v5-c-masthead img.pf-v5-c-brand {
  content: url("../img/halmeel-logo-dark.png");
}