/*
 * Fondiro login-page branding.
 *
 * Loaded after the parent (keycloak) theme's css/login.css so
 * these rules win the cascade. We don't ship our own
 * css/login.css — parent's layout stays intact, we only paint
 * over a few specific selectors.
 */

/* Match the Fondiro logo backdrop — sampled from
   fondiro-dark.png so the F-mark in the header tile blends into
   the page rather than sitting on a slightly mismatched navy.
   Keycloak 26 reshuffled the body+container CSS classes, so
   we shotgun-override every plausible background carrier and
   !important to outrank parent styles that load later. */
html, body,
.login-pf body, body.login-pf,
.login-pf-page,
.login-pf-page-main,
.login-pf-page > .container,
.login-pf-page-content,
.kcBodyClass, .pf-c-login {
    background-color: #031024 !important;
    background-image: none !important;
}

/* Center the card. Some Keycloak builds let the .card-pf drift
   to the left when the parent grid loses its centering rules. */
.login-pf-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #031024 !important;
}

.login-pf-page > .container,
.login-pf-page .login-pf-page-main {
    margin-left: auto;
    margin-right: auto;
    background-color: #031024 !important;
}

.login-pf-page .card-pf {
    margin-left: auto;
    margin-right: auto;
}

.login-pf-page .card-pf {
    max-width: 440px;
    width: 100%;
    padding-top: 1.75rem;
}

/* Replace the realm-name text in the header with the Fondiro
   F-mark via a background-image. font-size:0 hides the text and
   avoids layout glitches from text-indent off-screen. */
#kc-header-wrapper {
    font-size: 0;
    color: transparent;
    background-image: url('../img/fondiro-dark.png');
    background-image: image-set(
        url('../img/fondiro-dark.webp') type('image/webp'),
        url('../img/fondiro-dark.png')  type('image/png')
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 220px;
    width: 220px;
    margin: 1.5rem auto 1rem auto;
    border-radius: 18px;
}

#kc-header {
    padding: 0;
}

/* ============================================================
 * Form styling — bring the login card into the Fondiro shell's
 * dark palette. Targets both the legacy PatternFly classes the
 * keycloak parent theme still uses (.card-pf, .form-control,
 * .btn-primary) and the newer PF v5 names (.pf-c-*) so the
 * theme keeps holding together across Keycloak minor releases.
 * ============================================================ */

/* Container around the form. */
.login-pf-page,
.login-pf-page .card-pf,
.pf-c-login__main {
    color: #e6ecf8 !important;
}

/* The form card itself. */
.card-pf,
.pf-c-login__main {
    background-color: #131b34 !important;
    border: 1px solid #1e2a4f !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 50px rgba(0, 0, 0, .35) !important;
    padding: 1.75rem !important;
}

/* Headings + helper text. */
.login-pf-page .login-pf-header h1,
.pf-c-login__main-header-desc,
.kc-form-header h1 {
    color: #e6ecf8 !important;
    font-weight: 300;
    letter-spacing: 0.02em;
}

#kc-page-title {
    color: #e6ecf8 !important;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

/* Labels above each input. */
.login-pf-page label,
.pf-c-form__label,
.pf-c-form__label,
.control-label {
    color: #8a96b3 !important;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Input fields. */
.form-control,
.pf-c-form-control,
.pf-c-form-control > input,
.pf-c-form-control,
input.pf-c-form-control,
input.form-control {
    background-color: #07091a !important;
    color: #e6ecf8 !important;
    border: 1px solid #2a3763 !important;
    border-radius: 8px !important;
    padding: .6rem .75rem !important;
    height: auto !important;
    box-shadow: none !important;
}
.form-control:focus,
.pf-c-form-control:focus-within,
input:focus {
    border-color: #3dc6c5 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(61, 198, 197, .25) !important;
}

/* Buttons. */
.btn-primary,
.pf-c-button.pf-m-primary,
input.btn-primary {
    background-color: #3dc6c5 !important;
    border-color: #3dc6c5 !important;
    color: #07091a !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: .6rem 1rem !important;
}
.btn-primary:hover,
.btn-primary:focus,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus {
    background-color: #5cd5d2 !important;
    border-color: #5cd5d2 !important;
    color: #07091a !important;
}

/* "Forgot password?" and similar text links. */
.login-pf-page a,
.pf-c-login__main a {
    color: #3dc6c5 !important;
}
.login-pf-page a:hover,
.pf-c-login__main a:hover {
    color: #5cd5d2 !important;
}

/* Show password / checkbox toggles. */
.pf-c-check__label,
.checkbox label {
    color: #8a96b3 !important;
}

/* Password field's input-group is what wraps the [input] + [eye
   toggle]. By default it carries a white background and a grey
   eye icon — both showing through around the password input's
   edges. Force transparent so the dark card surface shows
   through, and recolour the eye toggle button + its icon to the
   dim-text palette. */
.pf-c-input-group,
.pf-c-input-group__text,
.pf-c-input-group .pf-c-button {
    background-color: transparent !important;
    border: none !important;
    color: #8a96b3 !important;
}
.pf-c-input-group .pf-c-button:hover,
.pf-c-input-group .pf-c-button:focus {
    color: #e6ecf8 !important;
    background-color: transparent !important;
}
/* The eye SVG inherits currentColor when it's an SVG, but if
   Keycloak ships it as a font icon (.fa-eye / .fa-eye-slash) the
   color: above already paints it. Cover both shapes. */
.pf-c-input-group i,
.pf-c-input-group svg,
.pf-c-input-group .fa,
.pf-c-input-group .fas,
.pf-c-input-group .pf-icon,
.pf-c-input-group .pf-c-button__icon {
    color: #8a96b3 !important;
    fill: currentColor !important;
}
.pf-c-input-group .pf-c-button:hover i,
.pf-c-input-group .pf-c-button:hover svg,
.pf-c-input-group .pf-c-button:hover .pf-icon {
    color: #e6ecf8 !important;
}

/* Error / alert banners. */
.alert-error,
.kc-feedback-text,
.pf-c-alert.pf-m-danger {
    background-color: rgba(255, 90, 95, .12) !important;
    border-left: 3px solid #ff5a5f !important;
    color: #ff8388 !important;
    border-radius: 8px;
    padding: .65rem .85rem;
}