/*
 * CheckPlease login theme — based on keycloak.v2 + PatternFly 5.
 *
 * NOTE: KC's `styles=` theme.properties directive does NOT inherit from parent
 * themes (only PatternFly's stylesCommon does). So this file embeds the keycloak.v2
 * base rules first, then layers CheckPlease overrides at the end. If you ever need
 * the latest keycloak.v2 base (e.g. on a future KC upgrade), diff against
 * /opt/keycloak/lib/lib/main/org.keycloak.keycloak-themes-*.jar
 *   :: theme/keycloak.v2/login/resources/css/styles.css
 */

/* ============================================================================
 * BASE: keycloak.v2 styles (verbatim from KC 26.6.1, with our :root overrides)
 * ========================================================================== */

:root {
    /* CheckPlease logo (replaces the default Keycloak SVG) */
    --keycloak-logo-url: url('../img/cp-logo.png');
    --keycloak-logo-height: 56px;
    --keycloak-logo-width: 280px;

    /* Drop the 4px coloured stripe — flat modern look */
    --keycloak-card-top-color: transparent;

    /* Brand green — drives PatternFly primary buttons / focus / links */
    --pf-v5-global--primary-color--100: #4CAF50;
    --pf-v5-global--primary-color--200: #43A047;
    --pf-v5-global--primary-color--300: #2E7D32;
    --pf-v5-global--link--Color: #2E7D32;
    --pf-v5-global--link--Color--hover: #1B5E20;
    --pf-v5-global--active-color--100: #4CAF50;
    --pf-v5-global--active-color--400: #43A047;
    --pf-v5-c-button--m-primary--BackgroundColor: #4CAF50;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: #43A047;
    --pf-v5-c-button--m-primary--active--BackgroundColor: #2E7D32;
    --pf-v5-c-button--m-primary--focus--BackgroundColor: #43A047;
}

.pf-v5-c-login__container {
    /* Single-column layout always — overrides PatternFly's two-column xl
       variant. Column is flexible (1fr) so it shrinks to viewport on
       narrow devices; max-width caps at 34rem on mobile/medium, widens
       to 40rem on desktop (see media query below). */
    grid-template-columns: 1fr;
    grid-template-areas: "header"
                         "main";
    max-width: 34rem;
}

/* Desktop (>= lg breakpoint): widen the form a bit. 34rem feels cramped
   on a 1080p+ display where there's plenty of horizontal room. */
@media (min-width: 992px) {
    .pf-v5-c-login__container {
        max-width: 40rem;
    }
}

.pf-v5-c-login__main-header {
    border-top: 4px solid var(--keycloak-card-top-color);
}

/* Info section spacing */
.pf-v5-c-login__main-footer-band:first-child {
    margin-block-start: var(--pf-v5-global--spacer--lg);
}

.pf-v5-c-login__main-footer-band:last-child {
    padding-bottom: 0;
}

/* The logo-swap mechanism: the brand wrapper (a div with class "kc-logo-text"
   coming from our messages_en.properties loginTitleHtml override) renders our
   logo as a background-image; the inner span (the realm display name) is hidden
   for accessibility/SEO but invisible visually. */
div.kc-logo-text {
    background-image: var(--keycloak-logo-url);
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

/* ============================================================================
 * CHECKPLEASE OVERRIDES
 * ========================================================================== */

/* White page background — no card framing needed since the login page IS the whole viewport */
.login-pf body {
    background: #ffffff;
    background-image: none;
    height: 100%;
}

/* Card disappears visually against white — no border, no shadow. Form just sits on white. */
.pf-v5-c-login__main {
    border-radius: 0;
    box-shadow: none;
}

/* Page-specific title (e.g. "Sign in to your account", "Create an account") — tighten */
#kc-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c2c2c;
    text-align: center;
}

/* Force the main-header to a single column. PatternFly's stock rule sets
   `grid-template-columns: 1fr auto` at >= 768px to leave room for a
   "utilities" panel on the right (account dropdowns etc.). KC's login
   page leaves that panel empty, but the column-gap between the title
   track and the empty utilities track still creates ~16px of dead space
   on the right of the title — so the centered title rendered slightly
   left of true centre. Collapse to a single column to fix. */
.pf-v5-c-login__main-header {
    grid-template-columns: 1fr;
}

/* Tighten vertical gap between logo header and the form's main-header — applies
   to login + register + reset-password + all login-theme pages since they share
   the same template. */
.pf-v5-c-login__container {
    gap: 0;
    row-gap: 0;
}

/* Reduce top whitespace — the registration form is tall, without this it
   sits below the viewport fold on standard laptop heights. The actual
   "pull content up" fix is zeroing --pf-v5-c-login__header--xl--MarginTop
   (handled below in the .pf-v5-c-login__header rule); this padding-block-
   start adjustment just trims the .pf-v5-c-login wrapper's top spacer.
   We deliberately leave PatternFly's justify-content: center alone — flex
   parent uses default flex-direction: row, so justify-content controls
   HORIZONTAL alignment. Setting it to flex-start would push the form left. */
.pf-v5-c-login {
    padding-block-start: var(--pf-v5-global--spacer--md) !important;
}

.pf-v5-c-login__header {
    padding-top: 0;
    padding-bottom: 0;
    /* PatternFly adds margin-block-start: spacer-3xl (~64px) at >=1200px
       viewport via a media query — zero it out so the logo sits near the
       top of the page. !important needed because the media-query rule
       wins specificity-wise otherwise. */
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* PatternFly puts spacer-2xl (~48px at xl viewport) of margin under the
   brand block (the logo). Way too much for our tight layout. */
.pf-v5-c-login__header .pf-v5-c-brand {
    margin-block-end: 0 !important;
}

/* The "Or register with" / Google button block sits inside a footer-band
   with PatternFly defaults of spacer-lg (24px) padding top + bottom, plus
   a top border. Tighten so the section feels integrated, not isolated. */
.pf-v5-c-login__main-footer-band {
    padding-block-start: var(--pf-v5-global--spacer--sm) !important;
    padding-block-end: var(--pf-v5-global--spacer--sm) !important;
}

/* Reduce vertical gap between form fields. Default --pf-v5-c-form--GridGap
   is gutter-md (16px); on tall forms (registration with email + 2 password
   fields + first/last name) that pushes the social block off-screen on
   mobile. sm = 8px gives enough breathing room without scrolling. */
.pf-v5-c-form {
    --pf-v5-c-form--GridGap: var(--pf-v5-global--spacer--sm);
}

.pf-v5-c-login__main-header {
    padding-top: 16px;
    padding-bottom: 8px;
}

/* The brand wrapper is by default styled for PLAIN-TEXT realm name (uppercase, big,
   light-coloured). With our logo it doesn't need any of that. */
#kc-header-wrapper {
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: inherit !important;
    padding: 0;
    text-align: center;
}

/* Hide the "* Required fields" hint that template.ftl renders above forms
   whenever displayRequiredFields=true. The red asterisk on each label is
   self-explanatory, and screen readers still announce required state via
   pf-v5-c-form__label-required. The hardcoded "subtitle" class is a stable
   anchor — it's literal in the upstream template, not generated. Hiding it
   here covers register, idp-review-user-profile, login-update-profile, and
   update-email pages in one shot. */
.pf-v5-c-login__main-body .subtitle {
    display: none;
}

/* Read-only inputs (e.g. the email field on registration when CheckPlease has
   pre-filled it from a signed login_hint JWT) — visually distinguish so the
   user understands the field can't be changed. Browsers don't grey readonly
   fields by default, only disabled ones, but readonly is what we need so the
   value still gets POSTed with the form. */
input[readonly] {
    background-color: #f1f1f1;
    color: #707070;
    cursor: not-allowed;
}

/* Constrain social-provider icons (Google etc.) to a sane height. Lifted
   verbatim from upstream keycloak.v2/login/resources/css/styles.css — without
   this rule the SVG renders at its natural size (huge). The :not(.google)
   filter recolors the monochrome provider icons to PatternFly link blue;
   Google's multi-colour mark is kept untouched. */
#kc-social-providers svg {
    height: var(--pf-v5-global--FontSize--xl);
}

#kc-social-providers svg:not(.google) {
    filter: invert(47%) sepia(88%) saturate(7486%) hue-rotate(199deg) brightness(91%) contrast(101%);
}

@media (prefers-color-scheme: dark) {
    #kc-social-providers svg:not(.google) {
        filter: invert(54%) sepia(96%) saturate(2028%) hue-rotate(174deg) brightness(99%) contrast(97%);
    }
}

/* On the checkplease realm login page (business signup), the register
   link gets promoted to a full-width outlined button to make "Create
   new account" a primary call-to-action. cp.js adds .cp-emphasize-register
   to #kc-registration-container only on that realm. */
.cp-emphasize-register {
    margin-top: var(--pf-v5-global--spacer--md);
    text-align: center;
}

.cp-emphasize-register span {
    display: block;
}

.cp-emphasize-register .cp-register-caption {
    margin-bottom: var(--pf-v5-global--spacer--xs);
    color: var(--pf-v5-global--Color--200);
    font-size: var(--pf-v5-global--FontSize--sm);
    font-weight: 400;
}

.cp-emphasize-register a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    color: #4CAF50;
    background: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.cp-emphasize-register a:hover,
.cp-emphasize-register a:focus {
    background: #4CAF50;
    color: #ffffff;
    text-decoration: none;
}