/* 1. THE STAGE: Force the outermost container to be a Flexbox center */
.pf-v5-c-login {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* Horizontal Center */
    justify-content: center !important;     /* Vertical Center */
    
    /* Kill the Grid entirely so it stops fighting */
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    
    min-height: 100vh !important;
    width: 100% !important;
    background-color: var(--bg-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. THE WRAPPER: Ensure the inner wrapper doesn't float left */
.pf-v5-c-login__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex-grow: 1 !important;
}

/* 3. THE CARD: The actual Login Box */
.pf-v5-c-login__main {
    /* Reset all positioning */
    grid-area: auto !important;
    position: relative !important;
    
    /* Force centering regardless of screen size */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Ensure it doesn't try to fill the whole screen or float */
    width: 100% !important;
    max-width: 450px !important;
    flex-basis: auto !important;
    
    background-color: var(--card-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
}

/* 4. THE HEADER: Center the logo area above the card */
.pf-v5-c-login__header {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto 2rem auto !important;
}

/* Hide the stubborn 'keycloak' text */
.pf-v5-c-brand, .pf-v5-c-login__header-brand {
    display: none !important;
}

/* 5. THE FOOTER: Center links/language picker */
.pf-v5-c-login__footer {
    margin: 2rem auto 0 auto !important;
    text-align: center !important;
}