/* Compent brand for the Keycloak admin console (keycloak.v2, PatternFly 5).
   Same palette as the login theme (login/resources/css/compent.css):
   petrol #10323c, teal #286c77, mint #e6f1f2, font Inter.
   This file is also used by the account console (account/resources/css). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin.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 {
  --compent-petrol-deep: #0b252d;
  --compent-petrol: #10323c;
  --compent-petrol-2: #173f4a;
  --compent-petrol-3: #1f4d59;
  --compent-teal: #286c77;
  --compent-teal-bright: #5fb8c4;
  --compent-mint: #e6f1f2;
  --compent-mint-2: #f3f8f9;
  --compent-font: "Inter", helvetica, arial, sans-serif;

  --pf-v5-global--FontFamily--text: var(--compent-font);
  --pf-v5-global--FontFamily--text--vf: var(--compent-font);
  --pf-v5-global--FontFamily--heading: var(--compent-font);
  --pf-v5-global--FontFamily--heading--vf: var(--compent-font);
  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: var(--compent-font);
  --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--compent-font);

  --pf-v5-global--primary-color--100: var(--compent-teal);
  --pf-v5-global--primary-color--200: var(--compent-petrol);
  --pf-v5-global--primary-color--light-100: var(--compent-teal-bright);
  --pf-v5-global--primary-color--dark-100: var(--compent-teal);
  --pf-v5-global--active-color--100: var(--compent-teal);
  --pf-v5-global--active-color--300: var(--compent-teal-bright);
  --pf-v5-global--link--Color: var(--compent-teal);
  --pf-v5-global--link--Color--hover: var(--compent-petrol);
  --pf-v5-global--link--Color--dark: var(--compent-teal);
  --pf-v5-global--link--Color--dark--hover: var(--compent-petrol);
  --pf-v5-global--link--Color--light: var(--compent-teal-bright);
  --pf-v5-global--link--Color--light--hover: #fff;

  /* Light grey page background gets a hint of mint. */
  --pf-v5-global--BackgroundColor--200: var(--compent-mint-2);
  --pf-v5-global--BackgroundColor--light-200: var(--compent-mint-2);
  --pf-v5-global--BackgroundColor--light-300: var(--compent-mint);

  /* The dark chrome (masthead, sidebar) becomes petrol. */
  --pf-v5-global--BackgroundColor--dark-100: var(--compent-petrol-deep);
  --pf-v5-global--BackgroundColor--dark-200: var(--compent-petrol-2);
  --pf-v5-global--BackgroundColor--dark-300: var(--compent-petrol);
  --pf-v5-global--BackgroundColor--dark-400: var(--compent-petrol-3);
}

/* Dark mode: petrol-tinted surfaces instead of PatternFly's neutral greys.
   :root.pf-v5-theme-dark beats PatternFly's :where(.pf-v5-theme-dark). */
:root.pf-v5-theme-dark {
  --pf-v5-global--BackgroundColor--100: #10252b;
  --pf-v5-global--BackgroundColor--150: #142c33;
  --pf-v5-global--BackgroundColor--200: #0a1a1f;
  --pf-v5-global--BackgroundColor--300: #18343c;
  --pf-v5-global--BackgroundColor--400: #224049;
  --pf-v5-global--BackgroundColor--light-100: #10252b;
  --pf-v5-global--BackgroundColor--light-200: #0a1a1f;
  --pf-v5-global--BackgroundColor--light-300: #18343c;
  --pf-v5-global--BackgroundColor--dark-100: #071519;
  --pf-v5-global--BackgroundColor--dark-200: #10252b;
  --pf-v5-global--BackgroundColor--dark-300: #0b1d22;
  --pf-v5-global--BackgroundColor--dark-400: #18343c;
  --pf-v5-global--BorderColor--100: #2e4d55;
  --pf-v5-global--BorderColor--200: #2e4d55;
  --pf-v5-global--BorderColor--300: #3c5c64;
  --pf-v5-global--BorderColor--dark-100: #2e4d55;
  --pf-v5-global--BorderColor--light-100: #2e4d55;
  --pf-v5-global--Color--100: #e4eef0;
  --pf-v5-global--Color--200: #a9bec3;

  --pf-v5-global--primary-color--100: var(--compent-teal-bright);
  --pf-v5-global--primary-color--light-100: var(--compent-teal-bright);
  --pf-v5-global--primary-color--dark-100: var(--compent-teal-bright);
  --pf-v5-global--active-color--100: var(--compent-teal-bright);
  --pf-v5-global--link--Color: var(--compent-teal-bright);
  --pf-v5-global--link--Color--hover: var(--compent-mint);
  --pf-v5-global--link--Color--light: var(--compent-teal-bright);
  --pf-v5-global--link--Color--light--hover: var(--compent-mint);
  --pf-v5-global--link--Color--dark: var(--compent-teal-bright);
  --pf-v5-global--link--Color--dark--hover: var(--compent-mint);
}

/* Masthead */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--compent-petrol-deep);
  border-bottom: 3px solid var(--compent-teal);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}

.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-global--primary-color--300: var(--compent-teal);
}

img.keycloak__pageheader_brand {
  height: 26px;
}

/* Sidebar: petrol with a bright teal bar on the current item. */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--compent-petrol);
}

[data-testid="currentRealm"] {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

.pf-v5-theme-dark .pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #0b1d22;
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--compent-petrol-2);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--compent-petrol-2);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--compent-petrol-2);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--compent-petrol-3);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--compent-petrol-3);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--compent-teal-bright);
  --pf-v5-c-nav__link--hover--after--BorderColor: rgba(95, 184, 196, 0.5);
  --pf-v5-c-nav__section-title--Color: #9fc3c9;
  --pf-v5-c-nav__section-title--BorderBottomColor: rgba(230, 241, 242, 0.12);
  --pf-v5-c-nav--c-divider--BackgroundColor: rgba(230, 241, 242, 0.12);
}

.pf-v5-theme-dark .pf-v5-c-nav {
  --pf-v5-c-nav__link--hover--BackgroundColor: #132b32;
  --pf-v5-c-nav__link--m-current--BackgroundColor: #18343c;
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: #18343c;
}

/* Section headings (Manage, Configure) as small caps; the realm heading at
   the top keeps its own casing. */
.pf-v5-c-nav__section > .pf-v5-c-nav__section-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Buttons: teal with white text in both modes, petrol on hover. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--compent-teal);
  --pf-v5-c-button--m-primary--Color: #fff;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--compent-petrol);
  --pf-v5-c-button--m-primary--hover--Color: #fff;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--compent-petrol);
  --pf-v5-c-button--m-primary--focus--Color: #fff;
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--compent-petrol);
  --pf-v5-c-button--m-primary--active--Color: #fff;
  font-weight: 500;
}

.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #1f5761;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #1f5761;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #1f5761;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--link--Color--hover);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--link--Color--hover);
}

/* The realm switcher chip ("Current realm"). */
.pf-v5-c-page__sidebar .pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--compent-mint);
  --pf-v5-c-label--m-blue__content--Color: var(--compent-petrol);
}

.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--compent-mint);
  --pf-v5-c-label--m-blue__content--Color: var(--compent-petrol);
  --pf-v5-c-label--m-blue__icon--Color: var(--compent-teal);
}

.pf-v5-theme-dark .pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: #1f4d59;
  --pf-v5-c-label--m-blue__content--Color: var(--compent-mint);
  --pf-v5-c-label--m-blue__icon--Color: var(--compent-teal-bright);
}

/* Page titles a little lighter, like the login page. */
.pf-v5-c-page__main-section h1.pf-v5-c-title {
  font-weight: 400;
  color: var(--compent-petrol);
}

.pf-v5-theme-dark .pf-v5-c-page__main-section h1.pf-v5-c-title {
  color: #fff;
}

:focus-visible {
  outline-color: var(--pf-v5-global--primary-color--100);
}

/* Admin console only: the key mark from the admin login (compent-admin theme)
   after the logo, behind a thin divider. The account console shares this file
   but has no key-header.svg, so it is scoped to the admin page. */
body[data-page-id="admin"] a.pf-v5-c-masthead__brand {
  display: flex;
  align-items: center;
}

body[data-page-id="admin"] a.pf-v5-c-masthead__brand::after {
  content: "";
  width: 2.75rem;
  height: 1.1rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(230, 241, 242, 0.3);
  background: url("../img/key-header.svg") right center / contain no-repeat;
  background-origin: content-box;
  box-sizing: content-box;
}