/*
 * Minimal PatternFly 4 shim for Keycloak 26.
 * Keycloak 18 served PF4 (react-core base/app css) via common/keycloak; Keycloak 26 does not.
 * login.css / tile.css / custom.css rely on its CSS variables and on base rules for
 * pf-c-form-control, pf-c-button and pf-c-alert. Values below are the PF4 defaults.
 */
:root {
    --pf-global--spacer--xs: 0.25rem;
    --pf-global--spacer--sm: 0.5rem;
    --pf-global--spacer--md: 1rem;
    --pf-global--spacer--lg: 1.5rem;
    --pf-global--spacer--form-element: 0.375rem;

    --pf-global--FontSize--xs: 0.75rem;
    --pf-global--FontSize--sm: 0.875rem;
    --pf-global--FontSize--md: 1rem;
    --pf-global--icon--FontSize--md: 1.125rem;
    --pf-global--icon--FontSize--lg: 1.5rem;
    --pf-global--icon--FontSize--xl: 3.375rem;

    --pf-global--BackgroundColor--100: #fff;
    --pf-global--BorderColor--100: #d2d2d2;
    --pf-global--BorderColor--200: #8a8d90;
    --pf-global--BorderColor--300: #ededed;
    --pf-global--BorderRadius--sm: 3px;
    --pf-global--BorderWidth--sm: 1px;
    --pf-global--BorderWidth--md: 2px;
    --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
    --pf-global--Color--100: #151515;
    --pf-global--Color--200: #6a6e73;
    --pf-global--palette--black-200: #f0f0f0;
    --pf-global--primary-color--100: #06c;
    --pf-global--primary-color--200: #004080;
    --pf-global--danger-color--100: #c9190b;
    --pf-global--danger-color--200: #a30000;
    --pf-global--success-color--100: #3e8635;
    --pf-global--success-color--200: #1e4f18;
    --pf-global--warning-color--100: #f0ab00;
    --pf-global--warning-color--200: #795600;
    --pf-global--disabled-color--100: #6a6e73;
    --pf-global--disabled-color--300: #d2d2d2;

    --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
    --pf-c-form-control--LineHeight: 1.5;
    --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
    --pf-c-form-control--PaddingTop: var(--pf-global--spacer--form-element);
    --pf-c-form-control--PaddingBottom: var(--pf-global--spacer--form-element);
    --pf-c-form-control--PaddingLeft: var(--pf-global--spacer--sm);
    --pf-c-form-control--PaddingRight: var(--pf-global--spacer--sm);

    --pf-c-button--m-primary--Color: #fff;
    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);

    --pf-c-alert--grid-template-columns: max-content 1fr max-content;
    --pf-c-alert--grid-template-rows: 1fr auto;
    --pf-c-alert--m-inline--BorderTopWidth: 1px;
    --pf-c-alert--m-inline--BorderRightWidth: 1px;
    --pf-c-alert--m-inline--BorderBottomWidth: 1px;
    --pf-c-alert--m-inline--BorderLeftWidth: 0;
    --pf-c-alert--m-inline--before--Top: 0;
    --pf-c-alert--m-inline--before--Bottom: 0;
    --pf-c-alert--m-inline--before--Width: 3px;
    --pf-c-alert--m-inline__icon--FontSize: var(--pf-global--icon--FontSize--md);
    --pf-c-alert--m-inline__icon--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-alert--m-inline__icon--PaddingRight: var(--pf-global--spacer--sm);
    --pf-c-alert--m-inline__icon--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-alert--m-inline__icon--PaddingLeft: var(--pf-global--spacer--md);
    --pf-c-alert__title--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-alert__title--PaddingRight: var(--pf-global--spacer--md);
    --pf-c-alert__title--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-alert__title--PaddingLeft: 0;

    --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
    --pf-c-tile--PaddingTop: var(--pf-global--spacer--md);
    --pf-c-tile--PaddingRight: var(--pf-global--spacer--md);
    --pf-c-tile--PaddingBottom: var(--pf-global--spacer--md);
    --pf-c-tile--PaddingLeft: var(--pf-global--spacer--md);
    --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
    --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
    --pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm);
    --pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100);
    --pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
    --pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
    --pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
    --pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md);
    --pf-c-tile__title--Color: var(--pf-global--Color--100);
    --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
    --pf-c-tile__body--Color: var(--pf-global--Color--200);
    --pf-c-tile__body--FontSize: var(--pf-global--FontSize--sm);
    --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
    --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--palette--black-200);
    --pf-c-tile__icon--Color: var(--pf-global--Color--200);
    --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
    --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
    --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--lg);
    --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
    --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
    --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--sm);
    --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
}

/* PF3 (bootstrap) sets html font-size to 10px; PF4 variables are rem based and expect 16px */
html {
    font-size: 16px;
}

/* form control: full width, bordered box (PF4 base) */
.pf-c-form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    color: var(--pf-global--Color--100);
    border-style: solid;
    border-radius: 0;
}

.pf-c-form__label,
.pf-c-form__label-text {
    display: inline-block;
    font-weight: 600;
    color: var(--pf-global--Color--100);
}

/* button (PF4 base) */
.pf-c-button {
    display: inline-block;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--pf-global--FontSize--md);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    border-radius: var(--pf-global--BorderRadius--sm);
}

.pf-c-button.pf-m-block {
    display: block;
    width: 100%;
}

.pf-c-button.pf-m-primary {
    color: var(--pf-c-button--m-primary--Color);
    background-color: var(--pf-c-button--m-primary--BackgroundColor);
}

/* inline alert (PF4 base) */
.pf-c-alert.pf-m-inline {
    position: relative;
    display: grid;
    box-sizing: border-box;
    background-color: var(--pf-global--BackgroundColor--100);
    border-style: solid;
    border-color: var(--pf-global--BorderColor--100);
}

.pf-c-alert.pf-m-inline::before {
    content: "";
    position: absolute;
    left: 0;
}