/* GASA account theme for Keycloak 26.5.5 / PatternFly 5.
 * Keep the stock templates, React app, responsive layout and status colours.
 */

@font-face {
    font-family: 'Roobert';
    src: url('../img/Roobert-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../img/Roobert-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('../img/Roobert-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html:root {
    color-scheme: light;
    --gasa-purple-dark: #340649;
    --gasa-purple: #62357E;
    --gasa-purple-subtle: #EFE2FF;
    --gasa-orange: #FE4F20;
    --gasa-sand: #EFECE1;
    --gasa-grey: #F4F4F4;
    --gasa-grey-dark: #6F6F6F;
    --gasa-font: 'Roobert', Arial, sans-serif;

    --pf-v5-global--FontFamily--text: var(--gasa-font);
    --pf-v5-global--FontFamily--text--vf: var(--gasa-font);
    --pf-v5-global--FontFamily--heading: var(--gasa-font);
    --pf-v5-global--FontFamily--heading--vf: var(--gasa-font);
    --pf-v5-global--Color--100: var(--gasa-purple-dark);
    --pf-v5-global--Color--200: var(--gasa-grey-dark);
    --pf-v5-global--Color--dark-100: var(--gasa-purple-dark);
    --pf-v5-global--Color--dark-200: var(--gasa-grey-dark);

    /* PF components reset these through their light/dark aliases. */
    --pf-v5-global--primary-color--100: var(--gasa-purple-dark);
    --pf-v5-global--primary-color--200: var(--gasa-purple);
    --pf-v5-global--primary-color--dark-100: var(--gasa-purple-dark);
    --pf-v5-global--primary-color--light-100: var(--gasa-purple-subtle);
    --pf-v5-global--active-color--100: var(--gasa-purple);
    --pf-v5-global--active-color--200: var(--gasa-purple-subtle);
    --pf-v5-global--active-color--400: var(--gasa-orange);
    --pf-v5-global--link--Color: var(--gasa-purple);
    --pf-v5-global--link--Color--hover: var(--gasa-purple-dark);
    --pf-v5-global--link--Color--dark: var(--gasa-purple);
    --pf-v5-global--link--Color--dark--hover: var(--gasa-purple-dark);
    --pf-v5-global--link--Color--light: var(--gasa-purple-subtle);

    --pf-v5-global--BackgroundColor--100: #FFFFFF;
    --pf-v5-global--BackgroundColor--200: var(--gasa-grey);
    --pf-v5-global--BackgroundColor--light-100: #FFFFFF;
    --pf-v5-global--BackgroundColor--light-200: var(--gasa-grey);
    --pf-v5-global--BackgroundColor--light-300: var(--gasa-sand);
    --pf-v5-global--BackgroundColor--dark-100: var(--gasa-purple-dark);
    --pf-v5-global--BackgroundColor--dark-200: var(--gasa-purple);
    --pf-v5-global--BackgroundColor--dark-300: var(--gasa-purple-dark);
    --pf-v5-global--BackgroundColor--dark-400: var(--gasa-purple);
}

body {
    font-family: var(--gasa-font);
    color: var(--gasa-purple-dark);
    background: var(--gasa-sand);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The existing white GASA logo sits on the login theme's purple artwork. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--gasa-purple-dark);
    --pf-v5-c-masthead__main--before--BorderBottomColor: var(--gasa-purple);
    background-image: url('../img/gasa-bg.svg');
    background-position: center;
    background-size: cover;
    border-bottom: 3px solid var(--gasa-orange);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: transparent;
}

.pf-v5-c-masthead__brand img {
    width: 137px;
    height: auto;
    max-width: 100%;
}

/* Use the public PF selectors, never Keycloak's generated CSS module names. */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #FFFFFF;
    --pf-v5-c-page__sidebar--m-light--BackgroundColor: #FFFFFF;
    --pf-v5-global--Color--100: var(--gasa-purple-dark);
    --pf-v5-global--Color--200: var(--gasa-grey-dark);
    --pf-v5-global--BackgroundColor--100: #FFFFFF;
    color: var(--gasa-purple-dark);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: var(--gasa-purple-dark);
    --pf-v5-c-nav__link--hover--Color: var(--gasa-purple-dark);
    --pf-v5-c-nav__link--focus--Color: var(--gasa-purple-dark);
    --pf-v5-c-nav__link--active--Color: var(--gasa-purple-dark);
    --pf-v5-c-nav__link--m-current--Color: var(--gasa-purple-dark);
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--gasa-grey);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--gasa-grey);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--gasa-purple-subtle);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--gasa-purple-subtle);
    --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--gasa-purple-subtle);
    --pf-v5-c-nav__item--before--BorderColor: var(--gasa-grey);
    --pf-v5-c-nav__link--before--BorderColor: var(--gasa-grey);
    --pf-v5-c-nav__section-title--Color: var(--gasa-grey-dark);
    --pf-v5-c-nav__section-title--BorderBottomColor: var(--gasa-grey);
    --pf-v5-c-nav--c-divider--BackgroundColor: var(--gasa-grey);
}

.pf-v5-c-page__main {
    background-color: var(--gasa-sand);
}

/* Match the rounded login controls without overriding disabled/danger states. */
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
    --pf-v5-c-button--BorderRadius: 999px;
    --pf-v5-c-button--after--BorderRadius: 999px;
    --pf-v5-c-button--FontWeight: 700;
    --pf-v5-c-button--PaddingLeft: 1.25rem;
    --pf-v5-c-button--PaddingRight: 1.25rem;
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--gasa-grey);
    border-radius: 12px;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    border-radius: inherit;
}

.pf-v5-c-card,
.pf-v5-c-modal-box {
    border-radius: 16px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--gasa-orange);
    outline-offset: 3px;
}

/* Preserve the stock referrer URL and text; allow longer client names to wrap. */
[data-testid='referrer-link'] {
    white-space: normal;
    text-align: start;
}

.keycloak__loading-container {
    font-family: var(--gasa-font);
    color: var(--gasa-purple-dark);
    background-color: var(--gasa-sand);
}

@media (max-width: 767px) {
    .pf-v5-c-masthead__brand img {
        width: 121px;
    }

    .pf-v5-c-page__main-section {
        padding-inline: 1rem;
    }
}