/* iohub / Lesy ČR branding, layered on top of keycloak.v2's base
 * css/styles.css (loaded first — see theme.properties). Only touches
 * layout/branding, not form behavior. */

:root {
    --iohub-bg: #f2f3f5;
    --iohub-card-bg: #ffffff;
    --iohub-text: #1c2226;
    --iohub-text-muted: #6a7178;
    --iohub-border: #e2e5e8;
}

/* Plain light-gray page background — no background image, no colored
 * accent border on the card (both present in the base theme, designed
 * for its own dark/branded look).
 * Selector matches the base rule's shape (`.login-pf body`, i.e. `login-pf`
 * is a class on <html>, not <body> — `body.login-pf` matches nothing and
 * silently loses the cascade, which is exactly what happened at first). */
.login-pf body {
    background: var(--iohub-bg) !important;
    height: 100%;
}

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

/* --- Merge the brand header and the form card into one continuous
   white card (the base theme keeps them visually separate — a header
   above a card). Both cells already sit in the same CSS Grid
   (.pf-v5-c-login__container), so this is just background/radius/shadow
   moved onto the shared container instead of each piece individually. */
.pf-v5-c-login__container {
    background: var(--iohub-card-bg);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 24px rgba(16, 24, 32, 0.10);
    overflow: hidden;
    padding: 2.5rem 2rem 2rem;
}

#kc-header,
.pf-v5-c-login__main {
    background: transparent;
    box-shadow: none;
}

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

/* --- Brand block: Lesy ČR logo + Attis partner logo + IOHub title —
   replaces the base theme's uppercase realm-name text (see template.ftl). */
.iohub-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--iohub-text);
    text-transform: none;
    letter-spacing: normal;
    font-size: initial;
}

.iohub-brand-logo {
    /* The logo file already includes the required clear space. */
    height: 150px;
    width: auto;
}

/* Partner logo (Attis). */
.iohub-brand-partner {
    height: 28px;
    width: auto;
}

.iohub-brand-title {
    /* Explicit color: #kc-header-wrapper in the base theme sets a white
     * color with !important, which would otherwise be inherited. */
    color: var(--iohub-text);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Per-page dynamic title ("Sign in to your account", "Forgot Your
 * Password?", etc.) — kept for clarity (matters most on the reset-
 * password page), styled as a secondary line under the IOHub title
 * rather than a competing headline. */
#kc-page-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--iohub-text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

.pf-v5-c-login__main-header {
    text-align: center;
}

/* --- Form controls: match the mockup's plain/minimal look rather than
   PatternFly's default blue-accented inputs. */
.pf-v5-c-form-control {
    border-radius: 8px;
    border-color: var(--iohub-border);
}

/* Login button: flat light gray, not the branded blue primary button —
 * a deliberate stylistic choice from the reference design, not a
 * necessity. */
.pf-v5-c-button.pf-m-primary {
    background-color: #e7e9ec;
    color: var(--iohub-text);
    border-radius: 8px;
    border: 1px solid var(--iohub-border);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
    background-color: #dcdfe3;
    color: var(--iohub-text);
}

/* --- Dark mode: keep it legible rather than pixel-matching the (light)
   reference design — inverted surfaces, same layout. */
@media (prefers-color-scheme: dark) {
    :root {
        --iohub-bg: #1c2226;
        --iohub-card-bg: #262c31;
        --iohub-text: #f2f3f5;
        --iohub-text-muted: #9aa3ab;
        --iohub-border: #3a4147;
    }

    .pf-v5-c-form-control {
        background-color: #1c2226;
        color: var(--iohub-text);
    }

    /* The button stays light gray in dark mode, so keep its label dark. */
    .pf-v5-c-button.pf-m-primary,
    .pf-v5-c-button.pf-m-primary:hover,
    .pf-v5-c-button.pf-m-primary:focus {
        color: #1c2226;
    }

    /* The Attis logo has black lettering: render it white on the dark card. */
    .iohub-brand-partner {
        filter: brightness(0) invert(1);
    }
}