/* MODELIO LOGIN THEME (Keycloak 26 / keycloak.v2 / PatternFly v5)
 *
 * This theme is CSS-only: it deliberately overrides no .ftl template, so
 * Keycloak upgrades do not require re-porting FreeMarker code. The Modelio
 * brand images are therefore drawn as pseudo-elements.
 */

/* ------------------------------------------------------------------ *
 * Palette & typography
 * ------------------------------------------------------------------ */

:root {
    --modelio-blue: #0000ff;
    --modelio-blue-dark: #004080;
    --modelio-ultramarine: #00008c;
    --modelio-lynch: #666d92;
    --modelio-border: #dadce5;

    --pf-v5-global--active-color--100: var(--modelio-blue);
    --pf-v5-global--primary-color--100: var(--modelio-blue);
    --pf-v5-global--primary-color--200: var(--modelio-blue-dark);
    --pf-v5-global--primary-color--dark-100: var(--modelio-blue);
    --pf-v5-global--secondary-color--100: var(--modelio-lynch);
    --pf-v5-global--disabled-color--100: var(--modelio-lynch);
    --pf-v5-global--disabled-color--200: #caccce;
    --pf-v5-global--disabled-color--300: #e4e6e7;

    --pf-v5-global--link--Color: var(--modelio-blue);
    --pf-v5-global--link--Color--hover: var(--modelio-blue-dark);
    --pf-v5-global--link--Color--dark: var(--modelio-blue);
    --pf-v5-global--link--Color--dark--hover: var(--modelio-blue-dark);

    --pf-v5-global--FontFamily--text: barlow, helvetica, arial, sans-serif;
    --pf-v5-global--FontFamily--heading: montserrat, helvetica, arial, sans-serif;
    --pf-v5-global--FontFamily--text--vf: barlow, helvetica, arial, sans-serif;
    --pf-v5-global--FontFamily--heading--vf: montserrat, helvetica, arial, sans-serif;

    /* Consumed by the keycloak.v2 stylesheet for the page background. */
    --keycloak-bg-logo-url: url("../img/modelio-bg.jpg");
    --keycloak-card-top-color: transparent;


    --modelio-button-radius: 10px;
    --modelio-field-radius: 10px;

    --pf-v5-global--BorderRadius--sm: var(--modelio-button-radius);

    /*--pf-v5-c-button--BorderRadius: var(--modelio-button-radius);
    --pf-v5-c-button--after--BorderRadius: var(--modelio-button-radius);*/

}

/* ------------------------------------------------------------------ *
 * Page background and Docaposte watermark
 * ------------------------------------------------------------------ */

.login-pf body {
    background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

/* Docaposte bottom right watermark.

   The previous PNG baked its own white rounded frame; the SVG
   logo has no background, so the frame is reproduced here instead. */
.login-pf body::after {
    content: "";
    position: fixed;
    right: 47px;
    bottom: 47px;
    z-index: 0;
    width: 292px; /* = background-width - border-radius */
    height: 125px;
    background-color: #fff;
    border-radius: 10px;
    background-image: url("../img/logo_Docaposte.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 302px auto;
    pointer-events: none;
}

@media (max-width: 767px), (max-height: 670px) {
    .login-pf body::after {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * Login card layout
 *
 * The realm banner (#kc-header) and the login box (.pf-v5-c-login__main) are
 * two separate grid rows of .pf-v5-c-login__container. The card frame is drawn
 * on the container so both rows read as a single sheet of paper.
 * ------------------------------------------------------------------ */

.pf-v5-c-login__container {
    position: relative;
    /* Above the Docaposte watermark drawn on body::after. */
    z-index: 1;
    width: min(500px, 100%);
    grid-template-columns: 100%;
    grid-template-areas:
        "header"
        "main";
    row-gap: 0;
    /* PatternFly reserves a wide inline padding here; the card supplies its own. */
    padding-inline: 0;
    /* Offset to the right so the background illustration stays visible. */
    margin-right: 185px;
    margin-left: auto;
    background: #fff;
    border-radius: var(--pf-v5-global--BorderRadius--sm) ;
    box-shadow:    var(--pf-v5-global--BoxShadow--lg);
}

.pf-v5-c-login__header {
    --pf-v5-c-login__header--xl--MarginTop: 0.5rem;
}

@media (max-width: 1400px) {
    .pf-v5-c-login__container {
        margin-right: auto;
    }
}

#kc-header {
    box-sizing: border-box;
    padding: 20px 32px 0;
}

/* ------------------------------------------------------------------ *
 * Modelio logo, above the realm name.
 * ------------------------------------------------------------------ */
#kc-header::before {
    content: "";
    display: block;
    width: 288px;
    max-width: 100%;
    height: 64px;
    margin-top: 0;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: 6em; /* Keep room for language combo */

    background: url("../img/modelio-logo-360x80.png") no-repeat right center;
    background-size: contain;
}

/* Realm name styling */
#kc-header-wrapper {
    padding: 0;
    font-family: var(--pf-v5-global--FontFamily--heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.18em;
    letter-spacing: 1.2px;
    color: var(--modelio-blue) !important;
    text-align: center;
    text-transform: none;
}

.pf-v5-c-login__main {
    --pf-v5-c-login__main--BackgroundColor: transparent;
    box-shadow: none;
}

/* Align the form with the logo above it and tighten the card. */
.pf-v5-c-login__main-body {
    padding: 0 32px 24px;
}

.pf-v5-c-login__main-body form {
    row-gap: var(--pf-v5-global--spacer--md);
}

/* The realm name in #kc-header acts as the page heading, so the login box
   header is reduced to the locale picker, floated over the top-right corner. */
#kc-page-title {
    display: none;
}

.pf-v5-c-login__main-header {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    display: block;
    width: auto;
    padding: 0;
    border-top: none;
}

.pf-v5-c-login__main-header-utilities {
    padding: 0;
}

/* Render the locale picker as a discreet text control rather than a full input. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
    background: transparent;
    font-size: var(--pf-v5-global--FontSize--sm);
    color: var(--modelio-lynch);
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control::after {
    border: none;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control select {
    padding-right: var(--pf-v5-global--spacer--md);
    color: var(--modelio-lynch);
    cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Form controls
 *
 * In PatternFly v5 .pf-v5-c-form-control is a wrapper element around the real
 * <input>, and its border is painted by an absolutely positioned ::after that
 * carries a bottom border only. Modelio wants a fully boxed, rounded field, so
 * the remaining three edges are added here.
 * ------------------------------------------------------------------ */

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--modelio-ultramarine);
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--after--BorderBottomColor: var(--modelio-border);
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--modelio-blue);
    --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--modelio-blue);
    min-height: 36px;
    border-radius: var(--modelio-field-radius);
}

.pf-v5-c-form-control::after {
    border-block-start: 1px solid var(--modelio-border);
    border-inline-start: 1px solid var(--modelio-border);
    border-inline-end: 1px solid var(--modelio-border);
    border-radius: var(--modelio-field-radius);
}

/* PatternFly paints a square-cornered inner highlight here; the full border is
   drawn on ::after instead, so this one only shows as a stray grey line. */
.pf-v5-c-form-control::before {
    border: none;
}

/* The rounding lives on the wrapper, so the inner control must repeat it or the
   browser focus ring is drawn with square corners. */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
    border-radius: inherit;
}

.pf-v5-c-form-control:hover::after,
.pf-v5-c-form-control:focus-within::after {
    border-block-start-color: var(--modelio-blue);
    border-inline-start-color: var(--modelio-blue);
    border-inline-end-color: var(--modelio-blue);
}

/* PatternFly keeps the native focus ring on the inner control and pulls it 2px
   inwards (--pf-v5-c-form-control--OutlineOffset). Against its own 1px bottom
   border that reads as an underline, but against the full rounded box below it
   becomes a second rectangle whose stroke width also shifts with the zoom
   level. The wrapper border is the focus indicator instead. */
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
    outline: none;
}

.pf-v5-c-form-control:focus-within::after {
    border-width: 2px;
}

@media (forced-colors: active) {
    .pf-v5-c-form-control > input:focus,
    .pf-v5-c-form-control > select:focus,
    .pf-v5-c-form-control > textarea:focus {
        outline: revert;
    }
}

/* PatternFly only recolours the bottom edge on validation states. */
.pf-v5-c-form-control.pf-m-error::after {
    border-block-start-color: var(--pf-v5-global--danger-color--100);
    border-inline-start-color: var(--pf-v5-global--danger-color--100);
    border-inline-end-color: var(--pf-v5-global--danger-color--100);
}

.pf-v5-c-form-control.pf-m-success::after {
    border-block-start-color: var(--pf-v5-global--success-color--100);
    border-inline-start-color: var(--pf-v5-global--success-color--100);
    border-inline-end-color: var(--pf-v5-global--success-color--100);
}

/* The password field and its visibility toggle must read as a single control. */
.pf-v5-c-input-group__item:not(:last-child) .pf-v5-c-form-control,
.pf-v5-c-input-group__item:not(:last-child) .pf-v5-c-form-control::after {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: none;
}

.pf-v5-c-input-group__item:not(:first-child) .pf-v5-c-button.pf-m-control,
.pf-v5-c-input-group__item:not(:first-child) .pf-v5-c-button.pf-m-control::after {
    /*border-start-start-radius: 0;
    border-end-start-radius: 0;*/
    border-start-end-radius: var(--modelio-button-radius);
    border-end-end-radius: var(--modelio-button-radius);
}

hr {
    border: 1px dashed #ccccfb;
    margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

/* Secondary and control buttons draw their visible border on ::after, which
   keeps its own radius, so both have to be set. */


.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--modelio-blue);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--modelio-blue-dark);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--modelio-blue-dark);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--modelio-blue-dark);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--modelio-blue);
    --pf-v5-c-button--m-secondary--BorderColor: var(--modelio-blue);
}

/* Password visibility toggle: flush with the input, same border. */
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--after--BorderColor: var(--modelio-border);
    --pf-v5-c-button--m-control--BackgroundColor: #fff;
}

.pf-v5-c-input-group:hover .pf-v5-c-button.pf-m-control,
.pf-v5-c-input-group:focus-within .pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--after--BorderColor: var(--modelio-blue);
}

/* ------------------------------------------------------------------ *
 * Misc.
 * ------------------------------------------------------------------ */


/* #kc-terms-text does not exist anymore since Keycloak 26 or theme V2,
   Best workaround I found is to target the container div directly. */
div.pf-v5-c-login__main-body>div.pf-v5-u-mb-md-on-md {
    margin-bottom: 20px;
    max-height: 40vh;
    overflow: auto;
}


div.pf-v5-c-login__main-body>div.pf-v5-u-mb-md-on-md p,
div.pf-v5-c-login__main-body>div.pf-v5-u-mb-md-on-md ul li {
    margin-bottom: 5px;
    /*font-size: var(--pf-v5-global--FontSize--xs);*/
    font-size: var(--pf-v5-global--FontSize--sm);
}
div.pf-v5-c-login__main-body>div.pf-v5-u-mb-md-on-md li::before {
    content: "- ";
}

/* TODO not sure #kc-registration-terms-text still exists in Keycloak 26 */
#kc-registration-terms-text {
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 5px;
}