/* nG Solutions look for the account (keycloak.v3) and admin (keycloak.v2)
   consoles, both React apps on PatternFly 5: only tokens, fonts, logo and
   radii are changed, components are left alone. Colors follow the
   @ngsolutionsbr/web-ui design system (src/styles/theme.css, oklch tokens
   derived from the brand blue #42738D): primary #42738D, foreground #111C22,
   muted text #5B6C75, borders #D7E0E5, muted surface #EEF4F8, accent #DFEEF7,
   sidebar #F7FBFD, radius 10px. Titles in NG Display, text in Nunito Sans. */
:root {
  --ng-primary: #42738d;
  --ng-primary-strong: #1d3f50;
  --ng-foreground: #111c22;
  --ng-muted-foreground: #5b6c75;
  --ng-border: #d7e0e5;
  --ng-muted: #eef4f8;
  --ng-accent: #dfeef7;
  --ng-accent-foreground: #0f3243;
  --ng-sidebar: #f7fbfd;
  --ng-orange: #f1a148;

  --pf-v5-global--FontFamily--sans-serif: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading-sans-serif: "NG Display", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: "NG Display", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pf-v5-global--Color--100: var(--ng-foreground);
  --pf-v5-global--Color--200: var(--ng-muted-foreground);
  --pf-v5-global--primary-color--100: var(--ng-primary);
  --pf-v5-global--primary-color--200: var(--ng-primary-strong);
  --pf-v5-global--active-color--100: var(--ng-primary);
  --pf-v5-global--active-color--400: var(--ng-accent);
  --pf-v5-global--link--Color: var(--ng-primary);
  --pf-v5-global--link--Color--hover: var(--ng-primary-strong);
  --pf-v5-global--BorderColor--100: var(--ng-border);
  --pf-v5-global--BorderColor--300: var(--ng-border);
  --pf-v5-global--BackgroundColor--200: var(--ng-muted);
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BorderRadius--lg: 10px;
  --pf-v5-global--warning-color--100: var(--ng-orange);
}

/* Titles: NG Display has one weight (Regular), so headings drop the bold. */
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3 {
  font-family: var(--pf-v5-global--FontFamily--heading);
  font-weight: 400;
}

/* Masthead: white, brand logo, thin border, dark text for the toggles and
   the user menu (PatternFly paints them light for the dark masthead). */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #fff;
  --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-masthead__main--before--BorderColor: transparent;
  border-bottom: 1px solid var(--ng-border);
  box-shadow: 0 1px 3px rgba(17, 28, 34, 0.06);
}
.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead img {
  height: 32px;
  max-height: 32px;
  width: auto;
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-page__header-tools-item {
  --pf-v5-c-button--m-plain--Color: var(--ng-foreground);
  --pf-v5-c-button--m-plain--hover--Color: var(--ng-primary);
  --pf-v5-c-menu-toggle--Color: var(--ng-foreground);
  --pf-v5-c-menu-toggle--m-plain--Color: var(--ng-foreground);
  --pf-v5-c-menu-toggle--m-plain--hover--Color: var(--ng-primary);
  --pf-v5-c-menu-toggle__toggle-icon--Color: var(--ng-muted-foreground);
  --pf-v5-c-menu-toggle__controls--Color: var(--ng-muted-foreground);
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--BackgroundColor: var(--ng-accent);
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--Color: var(--ng-accent-foreground);
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomColor: var(--ng-primary);
  color: var(--ng-foreground);
}
.pf-v5-c-masthead .pf-v5-c-page__header-tools .pf-v5-c-avatar {
  border: 1px solid var(--ng-border);
}

/* Sidebar: light, like the web-ui sidebar tokens, with readable nav colors. */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--ng-sidebar);
  --pf-v5-c-page__sidebar--BoxShadow: none;
  border-right: 1px solid var(--ng-border);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav {
  --pf-v5-c-nav__link--Color: var(--ng-foreground);
  --pf-v5-c-nav__link--hover--Color: var(--ng-primary-strong);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--ng-accent);
  --pf-v5-c-nav__link--active--Color: var(--ng-primary-strong);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--ng-accent);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--ng-accent);
  --pf-v5-c-nav__link--m-current--Color: var(--ng-primary-strong);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ng-accent);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ng-primary);
  --pf-v5-c-nav__section-title--Color: var(--ng-muted-foreground);
  --pf-v5-c-nav__section-title--BorderBottomColor: var(--ng-border);
  --pf-v5-c-nav__item--before--BorderColor: transparent;
  --pf-v5-c-nav__item--m-expanded__toggle--Color: var(--ng-muted-foreground);
  --pf-v5-c-nav__toggle--Color: var(--ng-muted-foreground);
  --pf-v5-c-nav__subnav--BackgroundColor: transparent;
  --pf-v5-c-nav__subnav__link--Color: var(--ng-foreground);
  --pf-v5-c-nav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-nav__link--BorderRadius: 8px;
  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--sm);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  border-radius: 8px;
  margin: 2px var(--pf-v5-global--spacer--sm);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  font-weight: 600;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after {
  border-radius: 8px;
}
/* Realm selector of the admin console lives in the sidebar too. */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle,
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle.pf-m-full-width,
.pf-v5-c-page__sidebar [data-testid="realmSelector"] {
  --pf-v5-c-menu-toggle--Color: var(--ng-foreground);
  --pf-v5-c-menu-toggle--BackgroundColor: #fff;
  --pf-v5-c-menu-toggle--before--BorderColor: var(--ng-border);
  --pf-v5-c-menu-toggle--m-full-width--BackgroundColor: #fff;
  --pf-v5-c-menu-toggle--m-full-width--Color: var(--ng-foreground);
  --pf-v5-c-menu-toggle--m-full-width--before--BorderColor: var(--ng-border);
  --pf-v5-c-menu-toggle__toggle-icon--Color: var(--ng-muted-foreground);
  --pf-v5-c-menu-toggle__controls--Color: var(--ng-muted-foreground);
  color: var(--ng-foreground);
}

/* Content: white main area, cards and tables with the web-ui radius, blue
   tabs underline. The main area paints the white itself and the page
   sections go transparent, so the brand triangles (same SVG as the login
   page, the deck asset flipped vertically and rotated 90 degrees clockwise)
   sit between the white and the content, pinned to the bottom right at low
   opacity, never over the masthead or the sidebar. */
.pf-v5-c-page__main {
  position: relative;
  isolation: isolate;
  background: #fff;
}
.pf-v5-c-page__main::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: clamp(110px, 13vw, 240px);
  aspect-ratio: 1125 / 2005.6;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201125%202005.6'%3E%3Cg%20transform='matrix%280%201%201%200%20-1500%200%29'%3E%3Cpath%20fill='%23123d70'%20d='M967.55%202058.61L967.55%202452.33%20416.45%202140.64%20779.63%202058.61%20967.55%202058.61z'/%3E%3Cpath%20fill='%23f1a148'%20d='M2005.64%203000L0%201807.46%200%203000%202005.64%203000z'/%3E%3Cpath%20fill='%234187aa'%20d='M967.55%202058.61L0%201500%200%202617.23%20967.55%202058.61z'/%3E%3Cpath%20fill='%234187aa'%20d='M1147.54%202323.54L1656.23%202617.23%201656.23%202029.85%201147.54%202323.54z'/%3E%3Cpath%20fill='%234187aa'%20d='M1573.54%201955.18L1330.78%201815.02%201330.78%202095.34%201573.54%201955.18z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain;
  opacity: 0.2;
  pointer-events: none;
}
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-section.pf-m-light {
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
}
.pf-v5-c-card {
  --pf-v5-c-card--BorderRadius: 10px;
  --pf-v5-c-card--BoxShadow: 0 1px 2px rgba(17, 28, 34, 0.06);
  border: 1px solid var(--ng-border);
}
.pf-v5-c-tabs {
  --pf-v5-c-tabs__link--after--BorderColor: var(--ng-border);
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--ng-primary);
  --pf-v5-c-tabs__link--Color: var(--ng-muted-foreground);
  --pf-v5-c-tabs__item--m-current__link--Color: var(--ng-primary-strong);
}
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 8px;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ng-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ng-primary-strong);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ng-primary-strong);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ng-primary-strong);
  --pf-v5-c-button--m-secondary--Color: var(--ng-primary);
  --pf-v5-c-button--m-secondary--BorderColor: var(--ng-primary);
  --pf-v5-c-button--m-secondary--hover--Color: var(--ng-primary-strong);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--ng-primary-strong);
  --pf-v5-c-button--m-link--Color: var(--ng-primary);
  --pf-v5-c-button--m-link--hover--Color: var(--ng-primary-strong);
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 8px;
  --pf-v5-c-form-control--after--BorderBottomColor: var(--ng-border);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--ng-primary);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--ng-primary);
}
.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--ng-primary);
}
.pf-v5-c-table {
  --pf-v5-c-table--BorderColor: var(--ng-border);
  --pf-v5-c-table--cell--Color: var(--ng-foreground);
  --pf-v5-c-table__sort--m-selected__button--Color: var(--ng-primary);
}
.pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: #fff;
}
.pf-v5-c-data-list {
  --pf-v5-c-data-list--BorderColor: var(--ng-border);
}