/*
 * Colour-only rebrand of the admin and account consoles; layout, typography
 * and sizes stay stock. Shared by both themes: keep the two copies identical.
 *
 * Rules are anchored on html:root: that outranks PatternFly's :root defaults
 * and its :where(.pf-v5-theme-dark) palette regardless of load order, and it
 * already applies to the loading screen before force-dark.js has run.
 */
html:root {
    --idx-off-white: #f2f0ef;
    --idx-off-black: #070b09;
    --idx-surface: #0d1410;
    --idx-secondary: #46d160;
    --idx-accent-strong: #7ee36a;
    --idx-accent-deep: #2fae4a;
    --idx-muted: #9fb0a6;
    --idx-hairline: #24452d;
    --idx-hairline-strong: #3b7a4a;
    --idx-error: #ff7b6b;

    color-scheme: dark;

    --pf-v5-global--Color--100: var(--idx-off-white);
    --pf-v5-global--Color--200: var(--idx-muted);
    --pf-v5-global--BackgroundColor--100: var(--idx-surface);
    --pf-v5-global--BackgroundColor--150: #101913;
    --pf-v5-global--BackgroundColor--200: var(--idx-off-black);
    --pf-v5-global--BackgroundColor--300: #13241a;
    --pf-v5-global--BackgroundColor--400: #121c16;
    --pf-v5-global--BackgroundColor--dark-100: var(--idx-off-black);
    --pf-v5-global--BackgroundColor--dark-200: var(--idx-off-black);
    --pf-v5-global--BackgroundColor--dark-300: var(--idx-off-black);
    --pf-v5-global--BackgroundColor--dark-400: #13241a;
    --pf-v5-global--BorderColor--100: var(--idx-hairline);
    --pf-v5-global--BorderColor--200: var(--idx-hairline-strong);
    --pf-v5-global--BorderColor--300: var(--idx-hairline);
    --pf-v5-global--BorderColor--400: var(--idx-hairline-strong);
    --pf-v5-global--primary-color--100: var(--idx-secondary);
    --pf-v5-global--primary-color--200: var(--idx-accent-strong);
    --pf-v5-global--primary-color--dark-100: var(--idx-secondary);
    --pf-v5-global--primary-color--light-100: var(--idx-secondary);
    --pf-v5-global--active-color--100: var(--idx-secondary);
    --pf-v5-global--active-color--300: var(--idx-secondary);
    --pf-v5-global--active-color--400: var(--idx-secondary);
    --pf-v5-global--link--Color: var(--idx-secondary);
    --pf-v5-global--link--Color--hover: var(--idx-accent-strong);
    --pf-v5-global--link--Color--visited: var(--idx-secondary);
    --pf-v5-global--link--Color--light: var(--idx-secondary);
    --pf-v5-global--link--Color--light--hover: var(--idx-accent-strong);
    --pf-v5-global--link--Color--dark: var(--idx-secondary);
    --pf-v5-global--link--Color--dark--hover: var(--idx-accent-strong);
    --pf-v5-global--danger-color--100: var(--idx-error);
    --pf-v5-global--danger-color--200: var(--idx-error);
    --pf-v5-global--success-color--100: var(--idx-secondary);
    --pf-v5-global--info-color--100: var(--idx-secondary);
}

html:root ::selection {
    background: rgb(70 209 96 / 35%);
}

html:root body {
    background: radial-gradient(1200px 800px at 60% 20%, #0f1d14 0%, #070b09 60%, #040705 100%) fixed;
}

/* index.ftl paints its loading screen white until the app mounts. */
html:root .keycloak__loading-container {
    color: var(--idx-muted);
    background-color: var(--idx-off-black);
}

html:root .pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: transparent;
}

html:root .pf-v5-c-page__main-section {
    --pf-v5-c-page__main-section--BackgroundColor: transparent;
}

html:root .pf-v5-c-page__main-section.pf-m-light {
    --pf-v5-c-page__main-section--BackgroundColor: rgb(255 255 255 / 3%);
}

html:root .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--idx-off-black);
    --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--idx-off-black);
}

html:root .pf-v5-c-masthead .pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: var(--idx-off-black);
}

html:root .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #0a110d;
}

html:root .pf-v5-c-nav {
    --pf-v5-c-nav--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--Color: var(--idx-accent-strong);
    --pf-v5-c-nav__link--m-current--Color: var(--idx-accent-strong);
    --pf-v5-c-nav__link--hover--BackgroundColor: #0f1c14;
    --pf-v5-c-nav__link--m-current--BackgroundColor: #13241a;
    --pf-v5-c-nav__link--active--BackgroundColor: #13241a;
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--idx-secondary);
    --pf-v5-c-nav__section-title--Color: var(--idx-secondary);
    --pf-v5-c-nav__section-title--BorderBottomColor: var(--idx-hairline);
}

html:root .pf-v5-c-tabs {
    --pf-v5-c-tabs__link--hover--Color: var(--idx-accent-strong);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--idx-accent-strong);
    --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--idx-secondary);
}

html:root .pf-v5-c-card,
html:root .pf-v5-c-table,
html:root .pf-v5-c-toolbar,
html:root .pf-v5-c-pagination {
    --pf-v5-c-card--BackgroundColor: var(--idx-surface);
    --pf-v5-c-table--BackgroundColor: transparent;
    --pf-v5-c-toolbar--BackgroundColor: transparent;
    --pf-v5-c-pagination--m-bottom--BackgroundColor: transparent;
}

html:root .pf-v5-c-form-control,
html:root .pf-v5-c-text-input-group,
html:root .pf-v5-c-menu-toggle {
    --pf-v5-c-form-control--BackgroundColor: #17241c;
    --pf-v5-c-form-control--m-readonly--BackgroundColor: #1e2c23;
    --pf-v5-c-form-control--m-disabled--BackgroundColor: #1e2c23;
    --pf-v5-c-form-control--m-disabled--Color: var(--idx-muted);
    --pf-v5-c-text-input-group--BackgroundColor: #17241c;
    --pf-v5-c-menu-toggle--BackgroundColor: #17241c;
}

html:root .pf-v5-c-switch {
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--idx-accent-deep);
}

html:root .pf-v5-c-check__input,
html:root .pf-v5-c-radio__input {
    accent-color: var(--idx-secondary);
}

html:root :focus-visible {
    outline-color: var(--idx-secondary);
}

/* The site's buttons are green pills. */
html:root .pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--Color: #06130a;
    --pf-v5-c-button--m-primary--hover--Color: #06130a;
    --pf-v5-c-button--m-primary--focus--Color: #06130a;
    --pf-v5-c-button--m-primary--active--Color: #06130a;
    --pf-v5-c-button--m-primary--BackgroundColor: var(--idx-secondary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--idx-accent-strong);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--idx-accent-strong);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--idx-accent-deep);
    border-radius: 999px;
}

html:root .pf-v5-c-button.pf-m-primary::after {
    border-radius: 999px;
}

html:root .pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--idx-secondary);
    --pf-v5-c-button--m-secondary--hover--Color: var(--idx-accent-strong);
    --pf-v5-c-button--m-secondary--focus--Color: var(--idx-accent-strong);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--idx-secondary);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--idx-accent-strong);
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--idx-accent-strong);
}

html:root .pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--idx-secondary);
    --pf-v5-c-button--m-link--hover--Color: var(--idx-accent-strong);
}

html:root .pf-v5-c-menu,
html:root .pf-v5-c-modal-box,
html:root .pf-v5-c-popover__content,
html:root .pf-v5-c-alert {
    --pf-v5-c-menu--BackgroundColor: #0d1410;
    --pf-v5-c-modal-box--BackgroundColor: #0d1410;
    --pf-v5-c-popover__content--BackgroundColor: #0d1410;
    --pf-v5-c-alert--BackgroundColor: #0d1410;
}

html:root .pf-v5-c-jump-links {
    --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--idx-secondary);
    --pf-v5-c-jump-links__item--m-current__link--Color: var(--idx-accent-strong);
}