/* ============================================================
   Swissdec KeyCloak login theme
   ------------------------------------------------------------
   Extends keycloak.v2 (Patternfly v5). CSS-only — no FreeMarker
   template overrides. The Swissdec logo is injected into the
   login card via a ::before on the PF v5 login-main header.
   Tokens mirror frontend/core/.../theme-default.css so the KC
   screens visually match the portal shell.
   ============================================================ */

:root {
    --sd-red:           #c8102e;
    --sd-red-dark:      #9e0d24;
    --sd-red-light:     #e94b5c;
    --sd-red-tint:      #fde8ea;

    --sd-fg-1:          #212529;
    --sd-fg-2:          #495057;
    --sd-fg-3:          #6c757d;

    --sd-bg-page:       #fafafa;
    --sd-border:        #dee2e6;

    --sd-radius-sm:     0.375rem;
    --sd-radius-md:     0.5rem;

    --sd-shadow-1:      0 2px 6px rgba(0, 0, 0, 0.05);
    --sd-shadow-focus:  0 0 0 0.15rem rgba(200, 16, 46, 0.15);

    --sd-success:       #198754;
    --sd-success-tint:  #d1f2dd;
    --sd-info:          #2563eb;
    --sd-info-tint:     #e0eaff;
    --sd-warning-bg:    #fff3cd;
    --sd-warning-border:#ffe69c;
    --sd-warning-fg:    #664d03;

    --sd-font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
}

/* ─── Base ─────────────────────────────────────────────────── */
html, body {
    color-scheme: light;
    background: var(--sd-bg-page);
    color: var(--sd-fg-1);
    font-family: var(--sd-font-sans);
    margin: 0;
    padding: 0;
}

/* The parent theme renders a brand strip at the top of the page; we
   move the logo onto the card itself, so hide that. */
.pf-v5-c-login__header,
.pf-v5-c-login__header .pf-v5-c-brand {
    display: none;
}

/* ─── Login card ───────────────────────────────────────────────
   Centred via absolute positioning (the parent theme's flex layout
   doesn't reliably centre the card vertically — its outer wrapper
   uses min-height: 100vh which neutralises body-level flex). Logo
   is a background-image on the card, layout-independent of the
   PF v5 flex header inside it.                                   */
.pf-v5-c-login__main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    background-image: url('../img/swissdec.png');
    background-repeat: no-repeat;
    background-position: center 1.75rem;
    background-size: auto 42px;
    color: var(--sd-fg-1);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-md);
    box-shadow: var(--sd-shadow-1);
    width: min(560px, calc(100% - 2rem));
    padding: 5rem 2.5rem 2.5rem;
}

/* Force the main-header to stack its children (locale dropdown above
   the title) rather than the parent theme's flex-row layout that puts
   the locale beside the title. */
.pf-v5-c-login__main-header {
    display: block;
    text-align: center;
    padding: 0 0 0.5rem;
}

#kc-header-wrapper,
.header-wrapper {
    font-weight: 600;
}

/* Subtle, right-aligned locale dropdown that sits in its own row above
   the title. IDs covered for both classic (kc-locale-wrapper) and PF v5
   (kc-locale) variants of the keycloak.v2 template. */
#kc-locale,
#kc-locale-wrapper,
.pf-v5-c-login__main-header__desc {
    display: block;
    text-align: right;
    margin: 0 0 0.75rem;
}

#kc-locale select,
#kc-locale-wrapper select,
.pf-v5-c-login__main-header select {
    font-size: 0.8125rem;
    padding: 0.25rem 1.75rem 0.25rem 0.625rem;
    height: auto;
    width: auto;
    display: inline-block;
    background-color: var(--sd-bg-page);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-fg-2);
}

.pf-v5-c-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sd-red);
    margin: 0 0 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--sd-border);
    padding-bottom: 0.875rem;
}

/* ─── Form ─────────────────────────────────────────────────── */
.pf-v5-c-form-control > :is(input, select, textarea) {
    background: #ffffff;
    color: var(--sd-fg-1);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
}
.pf-v5-c-form-control > :is(input, select, textarea):focus {
    border-color: var(--sd-red);
    outline: none;
    box-shadow: var(--sd-shadow-focus);
}

.pf-v5-c-form__label,
label.pf-v5-c-form__label,
.pf-v5-c-check__label,
label.pf-v5-c-check {
    color: var(--sd-fg-2);
    font-size: 0.8125rem;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary {
    background: var(--sd-red);
    border-color: var(--sd-red-dark);
    color: #ffffff;
    font-weight: 500;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-v6-c-button.pf-m-primary:hover,
.pf-v6-c-button.pf-m-primary:focus {
    background: var(--sd-red-dark);
    border-color: var(--sd-red-dark);
    color: #ffffff;
}

.pf-v5-c-button.pf-m-control,
.pf-v6-c-button.pf-m-control {
    background: var(--sd-red);
    color: #ffffff;
}

.pf-v5-c-button.pf-m-link {
    color: var(--sd-red);
}
.pf-v5-c-button.pf-m-link:hover {
    color: var(--sd-red-dark);
}

/* ─── Links inside the login flow ──────────────────────────── */
.pf-v5-c-login__main a,
.pf-v5-c-login__main-footer a {
    color: var(--sd-red);
    text-decoration: none;
    font-weight: 500;
}
.pf-v5-c-login__main a:hover,
.pf-v5-c-login__main-footer a:hover {
    color: var(--sd-red-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "Forgot password" + similar secondary links — render them as a
   subtle block rather than a tiny inline link. */
#kc-form-options,
#kc-form-buttons + div,
.pf-v5-c-login__main-footer {
    margin-top: 1rem;
}

/* ─── Alerts — restore semantic colours ────────────────────── */
.pf-v5-c-alert__title {
    color: var(--sd-fg-1);
    font-weight: 600;
}

.pf-v5-c-alert.pf-m-success {
    --pf-v5-c-alert--BorderTopColor: var(--sd-success);
    --pf-v5-c-alert--m-inline--BackgroundColor: var(--sd-success-tint);
}

.pf-v5-c-alert.pf-m-danger {
    --pf-v5-c-alert--BorderTopColor: var(--sd-red);
    --pf-v5-c-alert--m-inline--BackgroundColor: var(--sd-red-tint);
}

.pf-v5-c-alert.pf-m-warning {
    --pf-v5-c-alert--BorderTopColor: var(--sd-warning-border);
    --pf-v5-c-alert--m-inline--BackgroundColor: var(--sd-warning-bg);
}

.pf-v5-c-alert.pf-m-info,
.pf-v5-c-alert.pf-m-custom {
    --pf-v5-c-alert--BorderTopColor: var(--sd-info);
    --pf-v5-c-alert--m-inline--BackgroundColor: var(--sd-info-tint);
}

/* ─── Help-link footer (injected by template.ftl override) ────
   Subtle, centered "Hilfe zur Anmeldung" link below the form,
   separated by a thin divider. Links back to the portal's help
   page at /help/login-update.xhtml (same-origin reverse proxy). */
#swissdec-help-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sd-border);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--sd-fg-3);
}
#swissdec-help-footer i {
    color: var(--sd-fg-3);
    margin-right: 0.375rem;
}
#swissdec-help-footer a {
    color: var(--sd-red);
    text-decoration: none;
    font-weight: 500;
}
#swissdec-help-footer a:hover {
    color: var(--sd-red-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Password-policy hint list ────────────────────────────── */
/* KC renders the password policy as a list inside the form on the
   update-password screen. Style it as a soft info panel rather than
   a default bullet list. */
.pf-v5-c-login__main-body ul.kc-feedback-text,
.pf-v5-c-login__main-body .instruction,
#password-policy {
    background: var(--sd-bg-page);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    padding: 0.625rem 0.875rem;
    margin: 0.75rem 0;
    font-size: 0.8125rem;
    color: var(--sd-fg-3);
}