/*
 * CLS DAFA look for the Keycloak login page, on top of keycloak.v2.
 * Like cls-dafa.de: white page, colour only in the logo (red #DF0615 -> orange #F29354),
 * black buttons. Links stay dark so they are never mistaken for the red error messages.
 * Logo and favicon are copied in by deploy/brand/sync.sh. Bump ?v= in theme.properties after edits.
 */
:root {
    --cls-red: #df0615;
    --cls-orange: #f29354;
    --cls-ink: #1f2328;
    --cls-wordmark: #383635;
    --cls-page: #f5f5f4;

    /* keycloak.v2 variables */
    --keycloak-logo-url: url("../img/logo.png");
    --keycloak-logo-height: 48px;
    --keycloak-logo-width: 226px;
    --keycloak-bg-logo-url: none;

    /* PatternFly tokens */
    --pf-v5-global--primary-color--100: var(--cls-ink);
    --pf-v5-global--primary-color--200: #000;
    --pf-v5-global--link--Color: var(--cls-wordmark);
    --pf-v5-global--link--Color--hover: #000;
    --pf-v5-global--FontFamily--text: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "PingFang SC", "Microsoft YaHei", sans-serif;
    --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
}

.login-pf body {
    background: var(--cls-page) none;
}

/* Logo above the card */
#kc-header {
    margin-bottom: 8px;
}

/* Card: rounded, soft shadow, the logo's gradient as a thin top bar */
.pf-v5-c-login__main {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.pf-v5-c-login__main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cls-red), var(--cls-orange));
}

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

.pf-v5-c-login__main-header .pf-v5-c-title {
    color: var(--cls-ink);
    font-weight: 600;
}

/* Black primary button, like the shop */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--cls-ink);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: #000;
    --pf-v5-c-button--m-primary--focus--BackgroundColor: #000;
    --pf-v5-c-button--m-primary--active--BackgroundColor: #000;
    border-radius: 8px;
}

.pf-v5-c-form-control {
    border-radius: 6px;
}

a,
.pf-v5-c-button.pf-m-link {
    text-underline-offset: 2px;
}