/*
 * BeON administration console theme.
 *
 * The admin console is dense and data heavy, so the branding here is
 * deliberately lighter than on the login pages: BeON red for actions, links and
 * selection state, everything else stays PatternFly default.
 */

:root {
    --beon-red: #d93a2f;
    --beon-red-hover: #b82c23;
    --beon-red-active: #99231b;
    --beon-hairline: #e6e0df;

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

/* Masthead: a warm off-white bar so it reads as a distinct band against the
 * white content area, with a solid BeON red rule under it. A plain white
 * masthead on white content had no edge at all. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: transparent;
    --pf-v5-c-masthead--Color: #212121;
    background: linear-gradient(180deg, #ffffff 0%, #fdf1ef 100%);
    border-bottom: 4px solid var(--beon-red);
    box-shadow: 0 2px 10px rgba(122, 45, 40, 0.10);
}

/* The masthead is white in this theme, but PatternFly styles its controls for
 * the stock dark bar - the user menu came out white-on-white. */
.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    color: #212121;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--Color: #212121;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    --pf-v5-c-button--m-plain--Color: #4f4f4f;
    --pf-v5-c-button--m-plain--hover--Color: var(--beon-red-hover);
}

/* PatternFly leaves the brand at width/height auto, which let the wordmark
 * shrink to ~64px wide and made "by SCG" illegible. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead img.pf-v5-c-brand {
    height: 44px;
    width: auto;
    max-height: none;
}

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--beon-red);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--beon-red-active);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--beon-red-hover);
    --pf-v5-c-button--m-secondary--after--BorderColor: #f0cdca;
    --pf-v5-c-button--m-secondary--hover--Color: var(--beon-red-active);
}

/* The side nav is dark, so the current item keeps PatternFly's light text and
 * takes the BeON accent on its indicator bar instead. Red text on that
 * background was unreadable. */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--beon-red);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    --pf-v5-c-tabs__link--after--BorderColor: var(--beon-red);
}