/*
 * NAHU login theme on top of the Keycloak 26 "keycloak.v2" (PatternFly 5) login theme.
 * Colors come from nahu_base.css (--lumo-* / --eva-* variables, shared with the NAHU app),
 * here they are mapped onto the PatternFly 5 variables and the KC 26 page structure.
 */

/* ---- PatternFly 5 variable mapping ---------------------------------------------------- */
:root {
    --pf-v5-global--FontFamily--text: var(--primary-font-family);
    --pf-v5-global--FontFamily--heading: var(--primary-font-family);

    --pf-v5-global--primary-color--100: var(--lumo-primary-color);
    --pf-v5-global--primary-color--200: var(--lumo-primary-color-75pct);
    --pf-v5-global--link--Color: var(--lumo-primary-color-75pct);
    --pf-v5-global--link--Color--hover: var(--lumo-primary-color);
    --pf-v5-global--active-color--100: var(--lumo-primary-color);

    --pf-v5-c-button--m-primary--BackgroundColor: var(--lumo-primary-color);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--lumo-primary-color-75pct);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--lumo-primary-color-75pct);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--lumo-primary-color-75pct);
    --pf-v5-c-button--BorderRadius: var(--lumo-border-radius);

    --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--lumo-primary-color);

    /* keycloak.v2 styles.css variables */
    --keycloak-logo-url: url("../img/header_logo.png");
    --keycloak-card-top-color: transparent;

    --nahu-header-height: 58px;
    --nahu-logo-width: 82px;
    --nahu-logo-height: 50px;
}

/* ---- Page background ------------------------------------------------------------------ */
.login-pf body {
    color: var(--lumo-primary-color);
    font-family: var(--primary-font-family);
    background: var(--lumo-primary-contrast-color) url("../img/home_page_logo.webp") no-repeat center center fixed;
    background-size: auto 90%;
    overflow: auto;
}

/* ---- Fixed full-width header bar: NAHU logo + realm "HTML Display name" ------------------
 * The text is the realm's HTML Display name (Realm settings -> General), so every environment
 * sets its own, e.g. "NAHU 2014-2020 és 2021-2027 DEV realm". Plain text is enough - the logo
 * is added by this CSS. The old KC 9 markup <div class="kc-logo-text"><span>...</span></div>
 * keeps working too (then the logo comes from that div and the ::before logo is suppressed).
 */
.pf-v5-c-login__header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
}

#kc-header-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--eva-header-background);
    color: var(--eva-header-page-title-color) !important;
    text-align: left;
    padding: 4px 45px;
    min-height: var(--nahu-header-height);
    box-sizing: border-box;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#kc-header-wrapper::before,
div.kc-logo-text::before {
    content: "";
    flex: none;
    width: var(--nahu-logo-width);
    height: var(--nahu-logo-height);
    background: var(--keycloak-logo-url) no-repeat left center / contain;
}

#kc-header-wrapper:has(.kc-logo-text)::before {
    display: none;
}

div.kc-logo-text {
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    height: auto;
    width: auto;
    margin: 0;
}

div.kc-logo-text span {
    display: inline;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* ---- Login card: left aligned under the header, like the KC 9 theme ------------------- */
.pf-v5-c-login {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: calc(var(--nahu-header-height) + 45px);
    padding-left: 45px;
}

.pf-v5-c-login__container {
    grid-template-columns: minmax(auto, 30rem);
    justify-content: start;
    margin: 0;
    padding: 0;
}

.pf-v5-c-login__main {
    border: var(--eva-panel-border);
    border-radius: var(--eva-panel-border-radius);
    background-color: rgba(252, 252, 252, 0.95);
}

.pf-v5-c-login__main-header {
    border-top: none;
}

#kc-page-title {
    color: var(--lumo-primary-color);
    font-weight: bold;
}

/* ---- Form controls ---------------------------------------------------------------------- */
.pf-v5-c-form__label-text {
    color: var(--lumo-shade-80pct);
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderRadius: var(--lumo-border-radius);
}

.login-pf a {
    color: var(--lumo-primary-color-75pct);
    font-weight: bold;
}

.login-pf a:hover,
.login-pf a:focus {
    color: var(--lumo-primary-color);
}

.login-pf a.pf-v5-c-button.pf-m-primary,
.login-pf a.pf-v5-c-button.pf-m-primary:hover,
.login-pf a.pf-v5-c-button.pf-m-primary:focus {
    color: var(--lumo-primary-contrast-color);
}

#nahu-policy-link {
    margin-inline-end: auto;
}

#kc-info-wrapper {
    border-radius: 0 0 var(--lumo-border-radius) var(--lumo-border-radius);
}

/* ---- Small screens: drop the side offset ------------------------------------------------ */
@media (max-width: 575px) {
    :root {
        --nahu-logo-width: 56px;
        --nahu-logo-height: 34px;
    }

    #kc-header-wrapper {
        padding: 4px 16px;
        font-size: 16px;
        letter-spacing: 1px;
        white-space: normal;
    }

    .pf-v5-c-login {
        padding-left: 0;
    }

    .pf-v5-c-login__container {
        grid-template-columns: 100%;
    }
}