/* Salaxy brand overlay for the Keycloak admin console (loaded after the admin UI's own CSS).
 * Branding only: white top bar with the logo, white left navigation, brand-coloured
 * buttons/links. Same tokens and the same PatternFly v5 override set as the account console
 * (apps/account-ui/src/brand.css) so the two consoles match. Brand #3C1EEB = rgb(60, 30, 235). */

/* ---- Tokens ------------------------------------------------------------------------------ */
:root {
  --brand: #3C1EEB;
  --brand-dark: #2F17B8;            /* hover / active */
  /* top bar: white background, dark text + icons (the logo file has a white background) */
  --masthead-bg: #ffffff;
  --masthead-fg: #151515;
  --masthead-fg-muted: #4f5255;
  --masthead-border: #d2d2d2;
  --masthead-logo-height: 40px;   /* 126x40 logo at 1:1 */
  /* left navigation: white, dark text, brand-coloured current-item indicator */
  --sidebar-bg: #ffffff;
  --sidebar-fg: #151515;
  --sidebar-fg-muted: #4f5255;
  --sidebar-border: #d2d2d2;
  --nav-hover-bg: #f0f0f0;
  --nav-current-bg: #f0f0f0;
  --nav-indicator: var(--brand);

  --pf-v5-global--primary-color--100: var(--brand);
  --pf-v5-global--primary-color--200: var(--brand-dark);
  --pf-v5-global--link--Color: var(--brand);
  --pf-v5-global--link--Color--hover: var(--brand-dark);
  --pf-v5-global--active-color--100: var(--brand);
}

/* ---- Top bar (masthead) --------------------------------------------------------------------
 * PatternFly emits its own .pf-v5-c-masthead rules after this file and sets the same variables,
 * so the doubled class wins on specificity. */
.pf-v5-c-masthead.pf-v5-c-masthead,
.pf-v5-c-page__header.pf-v5-c-page__header {
  --pf-v5-c-masthead--BackgroundColor: var(--masthead-bg);
  --pf-v5-c-page__header--BackgroundColor: var(--masthead-bg);
  --pf-v5-c-masthead__main--before--BorderBottomColor: var(--masthead-border);
  --pf-v5-global--Color--100: var(--masthead-fg);
  --pf-v5-global--Color--200: var(--masthead-fg-muted);
  --pf-v5-global--BackgroundColor--100: var(--masthead-bg);
  --pf-v5-global--icon--Color--light: var(--masthead-fg-muted);
  --pf-v5-global--icon--Color--dark: var(--masthead-fg);
  background-color: var(--masthead-bg);
  color: var(--masthead-fg);
  border-bottom: 1px solid var(--masthead-border);
}
/* Plain buttons inside the masthead (sidebar toggle, help, kebab, user menu) get re-flipped by
 * PatternFly at (0,3,0); give them the masthead foreground explicitly. */
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain,
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-global--Color--100: var(--masthead-fg);
  --pf-v5-global--Color--200: var(--masthead-fg-muted);
  --pf-v5-global--icon--Color--light: var(--masthead-fg-muted);
  --pf-v5-global--icon--Color--dark: var(--masthead-fg);
  color: var(--masthead-fg-muted);
}
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
  color: var(--masthead-fg);
}
/* The user menu is a bordered menu toggle; the stock dark masthead hides that border. */
.pf-v5-c-masthead.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--before--BorderTopColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderRightColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderLeftColor: transparent;
  --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--masthead-fg-muted);
}
/* The logo (theme.properties `logo`), rendered as <img class="keycloak__pageheader_brand">. */
.pf-v5-c-masthead .keycloak__pageheader_brand,
.pf-v5-c-brand.keycloak__pageheader_brand {
  height: var(--masthead-logo-height);
  --pf-v5-c-brand--Height: var(--masthead-logo-height);
}

/* ---- Left navigation (sidebar) ----------------------------------------------------------------
 * PatternFly's default is dark and flips the global text/icon variables to light; set the light
 * palette explicitly. Covers the realm selector at the top of the sidebar too. */
.pf-v5-c-page__sidebar.pf-v5-c-page__sidebar {
  --pf-v5-global--Color--100: var(--sidebar-fg);
  --pf-v5-global--Color--200: var(--sidebar-fg-muted);
  --pf-v5-global--BorderColor--100: var(--sidebar-border);
  --pf-v5-global--BackgroundColor--100: var(--sidebar-bg);
  --pf-v5-global--icon--Color--light: var(--sidebar-fg-muted);
  --pf-v5-global--icon--Color--dark: var(--sidebar-fg);
  --pf-v5-global--link--Color: var(--brand);
  --pf-v5-global--link--Color--hover: var(--brand-dark);
  --pf-v5-global--primary-color--100: var(--brand);
  --pf-v5-c-page__sidebar--BackgroundColor: var(--sidebar-bg);
  --pf-v5-c-page__sidebar-body--m-menu--BackgroundColor: var(--sidebar-bg);
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--sidebar-border);
  --pf-v5-c-menu-toggle--BackgroundColor: var(--sidebar-bg);
  --pf-v5-c-menu-toggle--Color: var(--sidebar-fg);
  --pf-v5-c-menu-toggle--m-full-width--BackgroundColor: var(--sidebar-bg);
  background-color: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border-inline-end: 1px solid var(--sidebar-border);
}
.pf-v5-c-page__sidebar.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
  color: var(--sidebar-fg);
  background-color: var(--sidebar-bg);
}
/* Nav items: dark text, light hover/current background, brand-coloured left indicator
 * (PatternFly draws it with the link's ::after border). */
.pf-v5-c-page__sidebar.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-page__sidebar.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav {
  --pf-v5-c-nav__link--Color: var(--sidebar-fg);
  --pf-v5-c-nav__link--hover--Color: var(--sidebar-fg);
  --pf-v5-c-nav__link--focus--Color: var(--sidebar-fg);
  --pf-v5-c-nav__link--active--Color: var(--sidebar-fg);
  --pf-v5-c-nav__link--m-current--Color: var(--sidebar-fg);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--nav-hover-bg);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--nav-hover-bg);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--nav-hover-bg);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--nav-current-bg);
  --pf-v5-c-nav__link--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__link--focus--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__link--active--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__item--before--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--nav-current-bg);
  --pf-v5-c-nav__section-title--Color: var(--sidebar-fg-muted);
  --pf-v5-c-nav__toggle--Color: var(--sidebar-fg-muted);
  --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--nav-indicator);
  --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--nav-indicator);
}
.pf-v5-c-page__sidebar.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav {
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__link--focus--after--BorderColor: var(--sidebar-border);
  --pf-v5-c-nav__link--active--after--BorderColor: var(--sidebar-border);
}

/* ---- Buttons, links, form focus ------------------------------------------------------------- */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--brand);
  --pf-v5-c-button--m-secondary--BorderColor: var(--brand);
  --pf-v5-c-button--m-secondary--hover--Color: var(--brand-dark);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--brand-dark);
}
a:hover {
  color: var(--brand-dark);
}
.pf-v5-c-tabs__link::after,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--brand);
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--brand);
}
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--brand);
}
.pf-v5-c-check__input:checked,
.pf-v5-c-check__input:focus,
.pf-v5-c-radio__input:checked {
  accent-color: var(--brand);
}
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--brand);
}