/* de.lhit.ro login skin — the Dore "auth-card" the dashboards are built from.
 *
 * The numbers below are not invented: they are lifted from
 * web/static/css/dore.light.bluenavy.min.css, the sheet every dashboard loads.
 *   .auth-card       flex row, 40% photo / 60% form, shadow, .75rem radius
 *   .auth-card .form-side   padding 80px
 *   .logo-single     110x35, logos/black.svg
 *   .btn             radius 50px, font-size .8rem, padding .5rem 1.25rem
 *   .form-control    radius .1rem, 1px #d7d7d7, font-size .8rem
 *   --theme-color-1  #00365a          body  #f8f8f8 / text #3a3a3a
 * Keep them in step if the dashboard theme is ever re-picked.
 *
 * PatternFly v5 (which keycloak.v2 is built on) is driven almost entirely by
 * CSS custom properties, so most of this file just repaints variables. That is
 * deliberate: components this file never names — alerts, checkboxes, selects,
 * the OTP screens — follow the same globals and come out matching for free.
 */

@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700");

:root {
    --de-navy: #00365a;
    --de-navy-dark: #002540;
    --de-ink: #3a3a3a;
    --de-line: #d7d7d7;
    --de-page: #f8f8f8;
    --de-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* PatternFly globals — one edit each, inherited by every component. */
    --pf-v5-global--FontFamily--text: var(--de-font);
    --pf-v5-global--FontFamily--text--vf: var(--de-font);
    --pf-v5-global--FontFamily--heading: var(--de-font);
    --pf-v5-global--FontFamily--heading--vf: var(--de-font);

    --pf-v5-global--primary-color--100: var(--de-navy);
    --pf-v5-global--primary-color--200: var(--de-navy-dark);
    --pf-v5-global--primary-color--dark-100: var(--de-navy);
    --pf-v5-global--active-color--100: var(--de-navy);
    --pf-v5-global--link--Color: var(--de-navy);
    --pf-v5-global--link--Color--hover: var(--de-navy-dark);

    --pf-v5-global--Color--100: var(--de-ink);
    --pf-v5-global--BorderColor--100: var(--de-line);
    --pf-v5-global--BorderColor--200: var(--de-line);
    --pf-v5-global--BorderColor--300: var(--de-line);
}

/* ── page ─────────────────────────────────────────────────────────────────
 * keycloak.v2 paints its own background image on the body; replace it with the
 * dashboards' flat #f8f8f8 and centre the card in the viewport.
 */
.login-pf body {
    background: var(--de-page);
    font-family: var(--de-font);
    color: var(--de-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.pf-v5-c-login {
    width: 100%;
    --pf-v5-c-login__container--MaxWidth: 58rem;
    --pf-v5-c-login__container--xl--MaxWidth: 58rem;
    --pf-v5-c-login__container--PaddingLeft: 1rem;
    --pf-v5-c-login__container--PaddingRight: 1rem;
}

/* The container is a grid sized for a single narrow column upstream; the card
 * here is wide and holds both sides itself. */
.pf-v5-c-login__container {
    grid-template-columns: 100%;
}

/* The realm-name banner above the card. The logo lives inside the card
 * instead, exactly where Dore puts it. */
#kc-header {
    display: none;
}

/* ── the card ─────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
    --pf-v5-c-login__main--BoxShadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    /* Room for the photo panel, which is positioned rather than flowed so the
     * header/body/footer the templates emit need no wrapper of their own. */
    padding-left: 40%;
}

.pf-v5-c-login__main::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: url("../img/balloon.jpg") no-repeat center top;
    background-size: cover;
}

/* ── the form side ────────────────────────────────────────────────────── */
.pf-v5-c-login__main-header {
    display: block;
    border-top: 0; /* keycloak.v2 draws a blue rule here */
    padding: 4.5rem 4.5rem 0;
}

/* Dore's .logo-single */
.pf-v5-c-login__main-header::before {
    content: "";
    display: block;
    width: 110px;
    height: 35px;
    margin-bottom: 2.5rem;
    background: url("../img/logo.svg") no-repeat center center;
    background-size: contain;
}

#kc-page-title {
    font-family: var(--de-font);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--de-ink);
    margin: 0;
}

.pf-v5-c-login__main-body {
    padding: 1.75rem 4.5rem 0;
}

/* Only the card's own footer — the templates nest a second one inside the
 * body for the "info" band, and that one keeps the body's padding. */
.pf-v5-c-login__main > .pf-v5-c-login__main-footer {
    padding: 1.5rem 4.5rem 4.5rem;
}

/* ── fields ───────────────────────────────────────────────────────────── */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--FontSize: .8rem;
    --pf-v5-c-form-control--PaddingTop: .5rem;
    --pf-v5-c-form-control--PaddingBottom: .5rem;
    --pf-v5-c-form-control--PaddingLeft: .75rem;
    --pf-v5-c-form-control--PaddingRight: .75rem;
    /* PatternFly draws three borders on ::before and the underline on ::after.
     * Dore wants a plain 1px box, so close the bottom border and keep ::after
     * for the focus accent only. */
    --pf-v5-c-form-control--before--BorderTopColor: var(--de-line);
    --pf-v5-c-form-control--before--BorderRightColor: var(--de-line);
    --pf-v5-c-form-control--before--BorderLeftColor: var(--de-line);
    --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
    --pf-v5-c-form-control--before--BorderBottomColor: var(--de-line);
    --pf-v5-c-form-control--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--de-navy);
    --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--de-navy);
    border-radius: .1rem;
}

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

.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
    font-family: var(--de-font);
    font-size: .8rem;
    color: var(--de-ink);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 50px;
    --pf-v5-c-button--FontSize: .8rem;
    --pf-v5-c-button--FontWeight: 700;
    --pf-v5-c-button--PaddingTop: .5rem;
    --pf-v5-c-button--PaddingBottom: .5rem;
    --pf-v5-c-button--PaddingLeft: 1.25rem;
    --pf-v5-c-button--PaddingRight: 1.25rem;
    font-family: var(--de-font);
}

/* The password-visibility eye and the input-group controls are square by
 * design; a pill there would float away from the field it belongs to. */
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--BorderRadius: .1rem;
}

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .pf-v5-c-login__main {
        padding-left: 0;
        padding-top: 9rem;
    }

    .pf-v5-c-login__main::before {
        width: auto;
        right: 0;
        bottom: auto;
        height: 9rem;
    }

    .pf-v5-c-login__main-header {
        padding: 2.5rem 2rem 0;
    }

    .pf-v5-c-login__main-header::before {
        margin-bottom: 1.5rem;
    }

    .pf-v5-c-login__main-body {
        padding: 1.25rem 2rem 0;
    }

    .pf-v5-c-login__main > .pf-v5-c-login__main-footer {
        padding: 1rem 2rem 2.5rem;
    }
}