/*
 * Ray Enterprises account theme: Keycloak's React account console (keycloak.v3,
 * PatternFly 5) dressed as the RMS Enterprise Portal, circa 2002. A framed page
 * on a striped blue background, a spectrum bar under the masthead, a pale
 * sidebar with a nav box, blue title-bar panels and Windows-classic bevels.
 *
 * The console follows the browser's dark-mode preference by adding
 * pf-v5-theme-dark to <html>, and Keycloak 26.0 has no switch to stop it, so
 * every colour here is set outright rather than left to PatternFly's tokens.
 *
 * PatternFly's component CSS loads after this file, so a rule here would lose
 * every tie. Component rules start with "html:root" to win them, including
 * against PatternFly's ".pf-v5-theme-dark ..." rules and in pop-ups that
 * render outside #app.
 */

:root,
:root.pf-v5-theme-dark {
    color-scheme: light;

    --rx-navy: #1d3a63;
    --rx-blue: #2d5287;
    --rx-sky: #5a86bf;
    --rx-pale: #eaf0f7;
    --rx-line: #9fb3cf;
    --rx-field: #7f9db9;
    --rx-link: #0033cc;
    --rx-muted: #666;
    --rx-green: #61bb46;
    --rx-yellow: #fdb827;
    --rx-orange: #f5821f;
    --rx-red: #e03a3e;
    --rx-purple: #963d97;
    --rx-cyan: #009ddc;
    --rx-font: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
    --rx-head: "Trebuchet MS", Verdana, sans-serif;

    --pf-v5-global--FontFamily--text: var(--rx-font);
    --pf-v5-global--FontFamily--heading: var(--rx-head);
    --pf-v5-global--FontSize--xs: 10px;
    --pf-v5-global--FontSize--sm: 11px;
    --pf-v5-global--FontSize--md: 11px;
    --pf-v5-global--FontSize--lg: 12px;
    --pf-v5-global--FontSize--xl: 14px;
    --pf-v5-global--FontSize--2xl: 17px;
    --pf-v5-global--BorderRadius--sm: 0;
    --pf-v5-global--BorderRadius--lg: 0;
    --pf-v5-global--BoxShadow--sm: none;
    --pf-v5-global--BoxShadow--md: 3px 3px 0 rgba(0, 0, 0, .28);
    --pf-v5-global--BoxShadow--lg: 3px 3px 0 rgba(0, 0, 0, .28);

    /* PatternFly's light palette, restored over its dark one. */
    --pf-v5-global--BackgroundColor--100: #fff;
    --pf-v5-global--BackgroundColor--150: #fafafa;
    --pf-v5-global--BackgroundColor--200: #f0f0f0;
    --pf-v5-global--BackgroundColor--300: #f0f0f0;
    --pf-v5-global--BackgroundColor--400: #f0f0f0;
    --pf-v5-global--BackgroundColor--light-100: #fff;
    --pf-v5-global--BackgroundColor--light-200: #fafafa;
    --pf-v5-global--BackgroundColor--light-300: #f0f0f0;
    --pf-v5-global--Color--100: #000;
    --pf-v5-global--Color--200: var(--rx-muted);
    --pf-v5-global--Color--300: #333;
    --pf-v5-global--Color--400: #707070;
    --pf-v5-global--Color--light-100: #000;
    --pf-v5-global--Color--light-200: var(--rx-muted);
    --pf-v5-global--Color--dark-100: #000;
    --pf-v5-global--Color--dark-200: var(--rx-muted);
    --pf-v5-global--BorderColor--100: var(--rx-line);
    --pf-v5-global--BorderColor--200: var(--rx-line);
    --pf-v5-global--BorderColor--300: #c3cede;
    --pf-v5-global--BorderColor--dark-100: var(--rx-line);
    --pf-v5-global--BorderColor--light-100: var(--rx-line);
    --pf-v5-global--primary-color--100: var(--rx-blue);
    --pf-v5-global--primary-color--200: var(--rx-navy);
    --pf-v5-global--active-color--100: var(--rx-blue);
    --pf-v5-global--link--Color: var(--rx-link);
    --pf-v5-global--link--Color--hover: #cc0000;
    --pf-v5-global--link--Color--dark: var(--rx-link);
    --pf-v5-global--link--Color--dark--hover: #cc0000;
    --pf-v5-global--disabled-color--100: #707070;
    --pf-v5-global--disabled-color--200: #f0f0f0;
}

html {
    min-height: 100%;
    background: #8fa7c4 repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 6px);
}

body {
    margin: 0;
    font: 11px/1.5 var(--rx-font);
    color: #000;
    background: transparent;
}

a { color: var(--rx-link); }
a:hover { color: #cc0000; }

/* ---- the framed page --------------------------------------------------- */

#app {
    padding: 18px 8px 28px;
}

html:root .pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: #fff;
    max-width: 1200px;
    height: auto;
    min-height: calc(100vh - 46px);
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--rx-navy);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .28);
}

/* ---- masthead, with the six-colour spectrum bar under it ----------------- */

html:root .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #fff;
    --pf-v5-c-masthead--Color: var(--rx-navy);
    --pf-v5-c-masthead--PaddingTop: 10px;
    --pf-v5-c-masthead--PaddingBottom: 22px;
    background:
        linear-gradient(var(--rx-green) 0 2px, var(--rx-yellow) 2px 4px, var(--rx-orange) 4px 6px,
            var(--rx-red) 6px 8px, var(--rx-purple) 8px 10px, var(--rx-cyan) 10px 12px)
            bottom / 100% 12px no-repeat,
        linear-gradient(#fff 40%, #eef2f7);
    border-bottom: 1px solid #0e2240;
}

html:root .pf-v5-c-masthead .pf-v5-c-masthead__content,
html:root .pf-v5-c-masthead .pf-v5-c-toolbar,
html:root .pf-v5-c-masthead .pf-v5-c-toolbar__content {
    --pf-v5-c-toolbar--BackgroundColor: transparent;
    background: transparent;
    color: var(--rx-navy);
}

/* Keep the user menu at the right edge, also when it folds into a kebab. */
html:root .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
    justify-content: flex-end;
}

html:root .pf-v5-c-masthead .pf-v5-c-toolbar__item {
    margin: 0 0 0 8px;
}

html:root .pf-v5-c-masthead__brand img {
    content: url("../img/logo.svg");
    height: 40px;
    width: auto;
}

html:root .pf-v5-c-masthead #nav-toggle {
    color: var(--rx-navy);
}

/* The user menu, as a bevelled button like the rest. */
html:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    --pf-v5-c-menu-toggle--before--BorderColor: transparent;
    --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
}

/* ---- sidebar: a pale column holding one blue nav box --------------------- */

/*
 * The menu is always shown, like the RMS sidebar, so the hamburger goes.
 * PatternFly collapses the sidebar on narrow pages and on toggle; these
 * rules hold it open and give it its own grid column whatever its state.
 */
html:root .pf-v5-c-masthead__toggle,
#nav-toggle {
    display: none;
}

html:root .pf-v5-c-page {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "nav main";
}

html:root .pf-v5-c-page__sidebar,
html:root .pf-v5-c-page__sidebar.pf-m-collapsed,
html:root .pf-v5-c-page__sidebar.pf-m-expanded {
    --pf-v5-c-page__sidebar--TranslateX: 0;
    --pf-v5-c-page__sidebar--TranslateZ: 0;
    grid-area: nav;
    position: static;
    width: 200px;
    max-width: none;
    transform: none;
    visibility: visible;
    opacity: 1;
}

html:root .pf-v5-c-page__main {
    grid-area: main;
}

/* On a phone the menu sits above the page instead of beside it. */
@media (max-width: 700px) {
    html:root .pf-v5-c-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main";
    }

    html:root .pf-v5-c-page__sidebar,
    html:root .pf-v5-c-page__sidebar.pf-m-collapsed,
    html:root .pf-v5-c-page__sidebar.pf-m-expanded {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #b9c9de;
    }
}

html:root .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--rx-pale);
    --pf-v5-c-page__sidebar--Width: 200px;
    --pf-v5-c-page__sidebar--BoxShadow: none;
    background: var(--rx-pale);
    border-right: 1px solid #b9c9de;
    box-shadow: none;
}

html:root .pf-v5-c-page__sidebar-body {
    padding: 12px 10px;
}

html:root .pf-v5-c-nav {
    --pf-v5-c-nav--BackgroundColor: #fff;
    background: #fff;
    border: 1px solid var(--rx-line);
}

html:root .pf-v5-c-nav::before {
    content: "My Account";
    display: block;
    padding: 3px 7px;
    font: bold 11px var(--rx-font);
    color: #fff;
    background: linear-gradient(var(--rx-sky), var(--rx-blue));
    border-bottom: 1px solid var(--rx-navy);
}

html:root .pf-v5-c-nav__list {
    padding: 4px 0;
}

html:root .pf-v5-c-nav__item {
    border: 0;
}

html:root .pf-v5-c-nav__item::before,
html:root .pf-v5-c-nav__item::after,
html:root .pf-v5-c-nav__link::after {
    display: none;
}

html:root .pf-v5-c-nav__link {
    --pf-v5-c-nav__link--Color: var(--rx-link);
    --pf-v5-c-nav__link--hover--Color: var(--rx-link);
    --pf-v5-c-nav__link--m-current--Color: #000;
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--rx-pale);
    --pf-v5-c-nav__link--m-current--BackgroundColor: #ffffcc;
    position: relative;
    padding: 2px 8px 2px 18px;
    font: 11px/1.5 var(--rx-font);
    color: var(--rx-link);
    background: transparent;
    border: 0;
}

/* RMS's orange » before every nav entry. */
html:root .pf-v5-c-nav__link::before {
    content: "\00bb";
    display: block;
    position: absolute;
    inset: 2px auto auto 7px;
    width: auto;
    height: auto;
    border: 0;
    color: var(--rx-orange);
    font-weight: bold;
    background: none;
}

html:root .pf-v5-c-nav__link:hover,
html:root .pf-v5-c-nav__link:focus {
    color: var(--rx-link);
    background: var(--rx-pale);
    text-decoration: underline;
}

html:root .pf-v5-c-nav__link.pf-m-current,
html:root .pf-v5-c-nav__link.pf-m-current:hover {
    font-weight: bold;
    color: #000;
    background: #ffffcc;
    text-decoration: none;
}

html:root .pf-v5-c-nav__toggle {
    color: var(--rx-navy);
}

html:root .pf-v5-c-nav__subnav {
    padding: 0 0 2px 10px;
}

/* ---- main column -------------------------------------------------------- */

html:root .pf-v5-c-page__main {
    --pf-v5-c-page__main--BackgroundColor: #fff;
    background: #fff;
}

html:root .pf-v5-c-page__main-section,
html:root .pf-v5-c-page__main-section.pf-m-light {
    --pf-v5-c-page__main-section--BackgroundColor: transparent;
    background: transparent;
    padding: 14px 20px 0;
}

html:root .pf-v5-c-page__main-section:last-child {
    padding-bottom: 20px;
}

html:root .pf-v5-c-content,
html:root .pf-v5-c-content p {
    color: #333;
    font-size: 11px;
}

html:root .pf-v5-c-title,
h1, h2, h3, h4 {
    font-family: var(--rx-head);
    color: var(--rx-navy);
}

/* The page headline, underlined with the spectrum like RMS. */
html:root .pf-v5-c-title.pf-m-2xl {
    margin: 0 0 6px;
    padding-bottom: 4px;
    font: bold 17px/1.25 var(--rx-head);
    color: var(--rx-navy);
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, var(--rx-green), var(--rx-yellow), var(--rx-orange),
        var(--rx-red), var(--rx-purple), var(--rx-cyan)) 1;
}

/* Section titles become blue title bars. */
html:root .pf-v5-c-title.pf-m-xl,
html:root .pf-v5-c-title.pf-m-lg {
    margin: 0 0 10px;
    padding: 3px 7px;
    font: bold 11px var(--rx-font);
    color: #fff;
    background: linear-gradient(var(--rx-sky), var(--rx-blue));
    border: 1px solid var(--rx-navy);
}

/* ---- forms -------------------------------------------------------------- */

html:root .pf-v5-c-form {
    --pf-v5-c-form--GridGap: 7px;
    --pf-v5-c-form__group--m-action--MarginTop: 12px;
}

html:root .pf-v5-c-form__label,
html:root .pf-v5-c-form__label-text {
    font: bold 11px var(--rx-font);
    color: #333;
}

html:root .pf-v5-c-form__label-required {
    color: var(--rx-red);
}

html:root .pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: #fff;
    --pf-v5-c-form-control--Color: #000;
    --pf-v5-c-form-control--before--BorderColor: var(--rx-field);
    --pf-v5-c-form-control--after--BorderColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderColor: transparent;
    background: #fff;
    color: #000;
    border-radius: 0;
}

html:root .pf-v5-c-form-control::before {
    border: 1px solid var(--rx-field);
    border-radius: 0;
}

html:root .pf-v5-c-form-control::after {
    border: 0;
}

html:root .pf-v5-c-form-control > input,
html:root .pf-v5-c-form-control > select,
html:root .pf-v5-c-form-control > textarea {
    height: 21px;
    padding: 2px 4px;
    font: 11px var(--rx-font);
    color: #000;
    -webkit-text-fill-color: #000;
    background: transparent;
}

html:root .pf-v5-c-form-control.pf-m-readonly,
html:root .pf-v5-c-form-control.pf-m-disabled,
html:root .pf-v5-c-form-control:has(> input[readonly]),
html:root .pf-v5-c-form-control:has(> input:disabled) {
    background: #f0f0f0;
}

html:root .pf-v5-c-form-control.pf-m-readonly > input,
html:root .pf-v5-c-form-control.pf-m-disabled > input,
html:root .pf-v5-c-form-control > input[readonly],
html:root .pf-v5-c-form-control > input:disabled {
    color: #444;
    -webkit-text-fill-color: #444;
}

html:root .pf-v5-c-form-control:focus-within {
    background: #ffffe1;
    outline: 1px dotted #000;
    outline-offset: 1px;
}

html:root .pf-v5-c-form__helper-text,
html:root .pf-v5-c-helper-text {
    font-size: 10px;
    color: var(--rx-muted);
}

/* ---- buttons: Windows-classic bevels, the primary one orange ------------- */

html:root .pf-v5-c-button.pf-m-primary,
html:root .pf-v5-c-button.pf-m-secondary,
html:root .pf-v5-c-button.pf-m-tertiary,
html:root .pf-v5-c-button.pf-m-danger,
html:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 12px;
    font: bold 11px var(--rx-font);
    color: #000;
    background: linear-gradient(#fff, #d4d0c8);
    border: 1px solid;
    border-color: #fff #404040 #404040 #fff;
    border-radius: 0;
    box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}

html:root .pf-v5-c-button.pf-m-primary::after,
html:root .pf-v5-c-button.pf-m-secondary::after,
html:root .pf-v5-c-button.pf-m-tertiary::after,
html:root .pf-v5-c-button.pf-m-danger::after,
html:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::before,
html:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::after {
    display: none;
}

html:root .pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
    color: #000;
}

html:root .pf-v5-c-button.pf-m-primary {
    color: #3b1d00;
    background: linear-gradient(#ffe08a, #ffb53d 55%, var(--rx-orange));
    border-color: #ffe9b0 #8a4100 #8a4100 #ffe9b0;
    box-shadow: inset -1px -1px #c0600f, inset 1px 1px #fff3cf;
}

html:root .pf-v5-c-button.pf-m-danger {
    color: #fff;
    background: linear-gradient(#ee5a5d, #b8262a);
    border-color: #f6a0a2 #6e1012 #6e1012 #f6a0a2;
    box-shadow: inset -1px -1px #8e1c1f, inset 1px 1px #f48a8c;
}

html:root .pf-v5-c-button.pf-m-primary:active,
html:root .pf-v5-c-button.pf-m-secondary:active,
html:root .pf-v5-c-button.pf-m-tertiary:active,
html:root .pf-v5-c-button.pf-m-danger:active {
    border-color: #404040 #fff #fff #404040;
    box-shadow: inset 1px 1px #808080;
}

html:root .pf-v5-c-button.pf-m-primary:focus-visible,
html:root .pf-v5-c-button.pf-m-secondary:focus-visible {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

html:root .pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--rx-link);
    --pf-v5-c-button--m-link--hover--Color: #cc0000;
    font: 11px var(--rx-font);
    color: var(--rx-link);
    text-decoration: underline;
}

html:root .pf-v5-c-button.pf-m-plain {
    color: var(--rx-navy);
}

/* ---- jump links, cards, lists and tables as RMS boxes -------------------- */

html:root .pf-v5-c-jump-links {
    --pf-v5-c-jump-links__link--before--BorderColor: var(--rx-line);
    --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--rx-orange);
    border: 1px solid var(--rx-line);
    background: #fff;
}

html:root .pf-v5-c-jump-links__label {
    margin: 0;
    padding: 3px 7px;
    font: bold 11px var(--rx-font);
    color: #fff;
    background: linear-gradient(var(--rx-sky), var(--rx-blue));
    border-bottom: 1px solid var(--rx-navy);
}

html:root .pf-v5-c-jump-links__main {
    padding: 4px 0;
}

html:root .pf-v5-c-jump-links__list {
    padding: 0;
}

html:root .pf-v5-c-jump-links__link {
    padding: 2px 8px 2px 14px;
    font-size: 11px;
    color: var(--rx-link);
}

/* Once the form fills the column the jump links stack above it; drop them. */
@media (max-width: 1100px) {
    html:root .pf-v5-l-grid__item:has(> .pf-v5-c-page__main-section > .pf-v5-c-jump-links) {
        display: none;
    }
}

html:root .pf-v5-c-card,
html:root .pf-v5-c-data-list,
html:root .pf-v5-c-panel,
html:root .pf-v5-c-table {
    --pf-v5-c-card--BackgroundColor: #fff;
    --pf-v5-c-data-list__item--BackgroundColor: #fff;
    --pf-v5-c-table--BackgroundColor: #fff;
    background: #fff;
    border: 1px solid var(--rx-line);
    border-radius: 0;
    box-shadow: none;
}

html:root .pf-v5-c-card__title,
html:root .pf-v5-c-card__header {
    padding: 3px 7px;
    font: bold 11px var(--rx-font);
    color: #fff;
    background: linear-gradient(var(--rx-sky), var(--rx-blue));
    border-bottom: 1px solid var(--rx-navy);
}

html:root .pf-v5-c-card__title-text,
html:root .pf-v5-c-card__header .pf-v5-c-title {
    margin: 0;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
}

html:root .pf-v5-c-data-list__item {
    background: #fff;
    border-bottom: 1px solid #c3cede;
}

html:root .pf-v5-c-data-list__item:nth-child(even) {
    background: #f3f6fb;
}

html:root .pf-v5-c-data-list__item-row {
    padding: 0 10px;
}

html:root .pf-v5-c-data-list__cell,
html:root .pf-v5-c-data-list__item-action {
    padding-top: 6px;
    padding-bottom: 6px;
}

html:root .pf-v5-c-title.pf-m-md {
    font: bold 12px var(--rx-head);
    color: var(--rx-navy);
}

html:root .pf-v5-c-data-list__cell,
html:root .pf-v5-c-table td,
html:root .pf-v5-c-table th {
    font-size: 11px;
    color: #000;
}

html:root .pf-v5-c-table thead th,
html:root .pf-v5-c-table thead td {
    color: var(--rx-navy);
    background: var(--rx-pale);
    font-weight: bold;
}

html:root .pf-v5-c-table tbody tr:nth-child(even) td {
    background: #f3f6fb;
}

html:root .pf-v5-c-table tbody tr:hover td {
    background: #ffffe1;
}

html:root .pf-v5-c-expandable-section__toggle,
html:root .pf-v5-c-expandable-section__toggle-text {
    color: var(--rx-link);
}

/* ---- menus, alerts, modals and labels ------------------------------------- */

html:root .pf-v5-c-menu {
    --pf-v5-c-menu--BackgroundColor: #fff;
    background: #fff;
    border: 1px solid var(--rx-navy);
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
}

html:root .pf-v5-c-menu__item {
    font-size: 11px;
    color: #000;
}

html:root .pf-v5-c-menu__item:hover,
html:root .pf-v5-c-menu__list-item:hover > .pf-v5-c-menu__item {
    color: #fff;
    background: #0a246a;
}

html:root .pf-v5-c-alert {
    --pf-v5-c-alert--BackgroundColor: #ffffcc;
    color: #000;
    background: #ffffcc;
    border: 1px solid #d9b400;
    border-radius: 0;
    box-shadow: none;
}

html:root .pf-v5-c-alert.pf-m-success { background: #f0faec; border-color: var(--rx-green); }
html:root .pf-v5-c-alert.pf-m-danger { background: #fff0f0; border-color: var(--rx-red); }

html:root .pf-v5-c-alert__title,
html:root .pf-v5-c-alert__description {
    font-size: 11px;
    color: #000;
}

html:root .pf-v5-c-modal-box {
    --pf-v5-c-modal-box--BackgroundColor: #f4f6f9;
    background: #f4f6f9;
    border: 1px solid var(--rx-navy);
    border-radius: 0;
    box-shadow: 2px 2px 0 #c3cede;
}

html:root .pf-v5-c-modal-box__header {
    padding: 3px 6px;
    background: linear-gradient(90deg, #0a246a, #a6caf0);
}

html:root .pf-v5-c-modal-box__title,
html:root .pf-v5-c-modal-box__title-text {
    font: bold 11px var(--rx-font);
    color: #fff;
    text-shadow: 1px 1px 0 #0a246a;
}

html:root .pf-v5-c-modal-box__close .pf-v5-c-button {
    color: #fff;
}

html:root .pf-v5-c-modal-box__body,
html:root .pf-v5-c-modal-box__footer {
    padding: 12px 16px;
}

html:root .pf-v5-c-label {
    --pf-v5-c-label--BorderRadius: 0;
    font-size: 10px;
}

html:root .pf-v5-c-empty-state {
    color: var(--rx-muted);
}