/* Account and admin console, styled like My AWL. Tokens and brand come from the awl login theme (tokens.css, brand.css). */

@import url("../../login/awl/tokens.css");
@import url("../../login/awl/brand.css");

:root {
    --awl-border: var(--color-gray-200);
    --awl-hover: var(--color-gray-100);
    --awl-selected: var(--color-gray-100);
    --awl-page: var(--color-gray-100);
    --awl-gutter: 32px;
}

/* Brand colors; repeated on components that reset PatternFly's global colors */
:root,
.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-page__sidebar,
.pf-v5-c-table,
.pf-v5-c-data-list,
.pf-v5-c-menu,
.pf-v5-c-form-control,
.pf-v5-c-chip-group,
.pf-v5-c-chip {
    --pf-v5-global--FontFamily--text: var(--brand-font);
    --pf-v5-global--FontFamily--heading: var(--brand-font);
    --pf-v5-global--primary-color--100: var(--brand-primary);
    --pf-v5-global--primary-color--200: var(--brand-primary-hover, var(--brand-primary));
    --pf-v5-global--link--Color: var(--brand-secondary);
    --pf-v5-global--link--Color--hover: var(--brand-secondary);
    --pf-v5-global--BorderRadius--sm: var(--radius-lg);
    --pf-v5-global--BorderColor--100: var(--awl-border);
    --pf-v5-global--FontWeight--normal: var(--font-weight-light);
}

/* Page: grey background, content on white rounded cards */

.pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: var(--awl-page);
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-breadcrumb,
.pf-v5-c-page__main-section.pf-m-light {
    background-color: transparent;
}

/* Page header (first section): no box, big title */
.pf-v5-c-page__main > :nth-child(1 of .pf-v5-c-page__main-section) {
    padding: 40px var(--awl-gutter) 24px;
}

/* Every following section is a card */
.pf-v5-c-page__main > .pf-v5-c-page__main-section ~ .pf-v5-c-page__main-section,
.pf-v5-c-card {
    margin: 0 var(--awl-gutter) 24px;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

.pf-v5-c-card {
    --pf-v5-c-card--BackgroundColor: var(--color-white);
    margin: 0;
}

.pf-v5-c-page__main > .pf-v5-c-page__main-section ~ .pf-v5-c-page__main-section .pf-v5-c-card {
    box-shadow: none;
    border: 1px solid var(--awl-border);
}

.pf-v5-c-table,
.pf-v5-c-toolbar,
.pf-v5-c-tab-content,
.pf-v5-c-data-list,
.pf-v5-c-jump-links {
    --pf-v5-c-table--BackgroundColor: transparent;
    --pf-v5-c-toolbar--BackgroundColor: transparent;
    --pf-v5-c-data-list__item--BackgroundColor: transparent;
    background-color: transparent;
}

/* Typography: headings black, body light */

.pf-v5-c-page__main :is(h1, h2, h3, h4, .pf-v5-c-title) {
    --pf-v5-c-title--m-4xl--FontWeight: var(--font-weight-black);
    --pf-v5-c-title--m-3xl--FontWeight: var(--font-weight-black);
    --pf-v5-c-title--m-2xl--FontWeight: var(--font-weight-black);
    --pf-v5-c-title--m-xl--FontWeight: var(--font-weight-black);
    --pf-v5-c-title--m-lg--FontWeight: var(--font-weight-black);
    --pf-v5-c-title--m-md--FontWeight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
}

.pf-v5-c-page__main > :nth-child(1 of .pf-v5-c-page__main-section) :is(h1, .pf-v5-c-title.pf-m-2xl) {
    --pf-v5-c-content--h1--FontSize: 40px;
    --pf-v5-c-title--m-2xl--FontSize: 40px;
    font-size: 40px;
    line-height: 48px;
}

.pf-v5-c-page__main > :nth-child(1 of .pf-v5-c-page__main-section) p {
    font-size: 18px;
    color: var(--color-gray-600);
}

/* Links black like the text, so underline them as on the login pages */

.pf-v5-c-page__main a:not(.pf-v5-c-button, .pf-v5-c-tabs__link, .pf-v5-c-nav__link, .pf-v5-c-breadcrumb__link, .pf-v5-c-jump-links__link) {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Buttons and form controls: rounded, brand-colored */

.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: var(--radius-lg);
    --pf-v5-c-button--after--BorderRadius: var(--radius-lg);
    --pf-v5-c-button--FontWeight: var(--font-weight-bold);
    --pf-v5-c-button--m-primary--BackgroundColor: var(--brand-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--brand-primary-hover, var(--brand-primary));
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--brand-primary-hover, var(--brand-primary));
    --pf-v5-c-button--m-secondary--Color: var(--brand-primary);
    --pf-v5-c-button--m-secondary--hover--Color: var(--brand-primary);
    --pf-v5-c-button--m-secondary--focus--Color: var(--brand-primary);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--awl-border);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--brand-primary);
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--brand-primary);
    --pf-v5-c-button--m-link--Color: var(--brand-secondary);
    --pf-v5-c-button--m-link--hover--Color: var(--brand-secondary);
    --pf-v5-c-button--m-link--focus--Color: var(--brand-secondary);
}

/* Link buttons (Refresh, Delete, …) get a grey hover like the sidebar */
.pf-v5-c-button.pf-m-link:not(.pf-m-inline, :disabled, .pf-m-disabled):hover {
    background-color: var(--awl-hover);
}

/* Fields (selects, search, inputs, input-group buttons): one look — 1px grey border all round,
   rounded, black border on hover and focus. :root[class] beats PatternFly's hover/expanded rules. */

.pf-v5-c-menu-toggle,
.pf-v5-c-form-control,
.pf-v5-c-text-input-group {
    --pf-v5-c-form-control--before--BorderColor: var(--awl-border);
    --pf-v5-c-form-control--after--BorderColor: transparent;
}

:root :is(.pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary), .pf-v5-c-form-control, .pf-v5-c-text-input-group, .pf-v5-c-button.pf-m-control)[class] {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.pf-v5-c-text-input-group__main,
.pf-v5-c-text-input-group__text,
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after,
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after,
.pf-v5-c-button.pf-m-control::after {
    border-radius: inherit;
}

:root .pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary)[class]::before,
:root .pf-v5-c-form-control[class]::before,
:root .pf-v5-c-text-input-group__text[class]::before {
    border: 1px solid var(--awl-border);
}

:root .pf-v5-c-button.pf-m-control[class]::after {
    border: 1px solid var(--awl-border);
}

:root .pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary)[class]::after,
:root .pf-v5-c-text-input-group__text[class]::after {
    border: 0;
}

:root .pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary, :disabled):is(:hover, :focus-visible, .pf-m-expanded)[class]::before,
:root .pf-v5-c-text-input-group:is(:hover, :focus-within) .pf-v5-c-text-input-group__text[class]::before,
:root .pf-v5-c-form-control:not(.pf-m-disabled, .pf-m-readonly):is(:hover, :focus-within)[class]::before,
:root .pf-v5-c-button.pf-m-control:is(:hover, :focus-visible)[class]::after {
    z-index: 1;
    border-color: var(--color-black);
}

/* Validation states keep PatternFly's colored bottom line */
:root .pf-v5-c-form-control:not(.pf-m-error, .pf-m-warning, .pf-m-success)[class]::after {
    border: 0;
}

/* Input groups (filter + search + submit): one box, outer corners rounded, shared 1px borders */
:root .pf-v5-c-input-group > :not(:last-child) :is(.pf-v5-c-menu-toggle, .pf-v5-c-form-control, .pf-v5-c-text-input-group, .pf-v5-c-button)[class],
:root .pf-v5-c-clipboard-copy__group > :is(.pf-v5-c-menu-toggle, .pf-v5-c-form-control, .pf-v5-c-text-input-group, .pf-v5-c-button):not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

:root .pf-v5-c-input-group > :not(:first-child) :is(.pf-v5-c-menu-toggle, .pf-v5-c-form-control, .pf-v5-c-text-input-group, .pf-v5-c-button)[class],
:root .pf-v5-c-clipboard-copy__group > :is(.pf-v5-c-menu-toggle, .pf-v5-c-form-control, .pf-v5-c-text-input-group, .pf-v5-c-button):not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

:is(.pf-v5-c-input-group, .pf-v5-c-clipboard-copy__group) > :not(:first-child) {
    margin-inline-start: -1px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary);
}

/* Inside cards: one 24px inset for tabs, toolbar and table */

:root .pf-v5-c-page__main-section ~ .pf-v5-c-page__main-section .pf-v5-c-toolbar {
    --pf-v5-c-toolbar__content--PaddingLeft: 24px;
    --pf-v5-c-toolbar__content--PaddingRight: 24px;
    --pf-v5-c-toolbar--PaddingTop: 20px;
    --pf-v5-c-toolbar--PaddingBottom: 20px;
}

/* Tabs: underline exactly under the text, first tab on the 24px inset */
:root .pf-v5-c-page__main-section ~ .pf-v5-c-page__main-section .pf-v5-c-tabs {
    --pf-v5-c-tabs--inset: 24px;
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__link {
    padding: 16px 0 12px;
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__item + .pf-v5-c-tabs__item {
    margin-inline-start: 24px;
}

.pf-v5-c-toolbar .pf-v5-c-divider.pf-m-vertical {
    --pf-v5-c-divider--after--BackgroundColor: var(--awl-border);
    align-self: center;
    height: 24px;
}

.pf-v5-c-menu {
    --pf-v5-c-menu--BorderRadius: var(--radius-lg);
    border-radius: var(--radius-lg);
}

/* Labels: grey chips like My AWL */

/* :root raises specificity above PatternFly's color modifiers (.pf-m-blue, …) */
:root .pf-v5-c-label[class],
.pf-v5-c-chip {
    --pf-v5-c-label--BackgroundColor: var(--color-gray-100);
    --pf-v5-c-label--Color: var(--color-black);
    --pf-v5-c-label__content--Color: var(--color-black);
    --pf-v5-c-label__content--before--BorderColor: transparent;
    --pf-v5-c-label__icon--Color: var(--color-black);
    --pf-v5-c-label--BorderRadius: var(--radius-md);
    --pf-v5-c-chip--BackgroundColor: var(--color-gray-100);
    --pf-v5-c-chip--BorderRadius: var(--radius-md);
    --pf-v5-c-chip--before--BorderColor: transparent;
    font-weight: var(--font-weight-bold);
}

/* Tabs: plain text, current one bold with a black underline (:root beats PatternFly's box-tab selectors) */

:root .pf-v5-c-tabs .pf-v5-c-tabs__link {
    background-color: transparent;
    color: var(--color-gray-600);
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__link::before {
    border: 0;
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__link::after {
    inset: auto 0 0;
    border: 0;
    border-bottom: 2px solid transparent;
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__link:hover::after {
    border-bottom-color: var(--awl-border);
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
}

:root .pf-v5-c-tabs .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    border-bottom-color: var(--brand-primary);
}

.pf-v5-c-tabs {
    --pf-v5-c-tabs--before--BorderColor: var(--awl-border);
}

/* Header and sidebar: white, like the My AWL sidebar */

.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-page__sidebar {
    --pf-v5-global--Color--100: var(--color-black);
    --pf-v5-global--Color--200: var(--color-gray-600);
    --pf-v5-global--BackgroundColor--100: var(--color-white);
}

.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--color-white);
    color: var(--color-black);
    border-bottom: 1px solid var(--awl-border);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    --pf-v5-c-button--m-plain--Color: var(--color-black);
    --pf-v5-c-button--m-plain--hover--Color: var(--color-black);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain {
    --pf-v5-c-menu-toggle--m-plain--Color: var(--color-black);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--Color: var(--color-black);
}

.pf-v5-c-masthead__brand img {
    height: 40px;
}

.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--color-white);
    border-right: 1px solid var(--awl-border);
}

.pf-v5-c-page__sidebar :is(.pf-v5-c-nav, .pf-v5-c-nav__section, .pf-v5-c-nav__subnav) {
    --pf-v5-c-nav--BackgroundColor: var(--color-white);
    --pf-v5-c-nav__link--Color: var(--color-black);
    --pf-v5-c-nav__link--hover--Color: var(--color-black);
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--awl-hover);
    --pf-v5-c-nav__link--focus--Color: var(--color-black);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--awl-hover);
    --pf-v5-c-nav__link--active--Color: var(--color-black);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--awl-selected);
    --pf-v5-c-nav__link--m-current--Color: var(--color-black);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--awl-selected);
    --pf-v5-c-nav__item--before--BorderColor: transparent;
    --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: transparent;
    --pf-v5-c-nav__link--hover--after--BorderColor: transparent;
    --pf-v5-c-nav__section-title--Color: var(--color-gray-600);
    --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
    --pf-v5-c-nav__toggle--Color: var(--color-black);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
    width: auto;
    margin: 2px 12px;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    font-size: 17px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
    font-weight: var(--font-weight-bold);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__section {
    margin-top: 24px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
    margin: 0 24px 4px;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Admin: realm name above the navigation, like "My AWL" */
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 24px 0;
    font-size: 20px;
    font-weight: var(--font-weight-black);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-black);
}