/* Remove unwanted background */
body.login-pf {
    background-color: #ffffff !important;
    background-image: none !important; /* Overrides PatternFly */
}

/* Ensure login page has a clean background */
.login-pf-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Center login box */
.card-pf {
    background: #ffffff !important;
    max-width: 400px; /* Adjust width */
    margin: auto;
    padding: 20px;
}

/* Ensure logo is above the login box */
.header-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px; /* Space before form */
}

/* Adjust logo size */
.header-logo {
    max-height: 80px;
    width: auto;
}

/* Ensure login box is centered and has proper spacing */
#kc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Reduce form width */
.login-box {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

/* Style form inputs */
.login-box input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

/* Style login button */
.login-box button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Remove unwanted background */
body.login-pf {
    background-color: #ffffff !important;
    background-image: none !important; /* Overrides PatternFly */
}

/* Ensure login page has a clean background */
.login-pf-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Change login form to black */
.card-pf {
    background: #ffffff !important; /* Makes the form box black */
    color: #ffffff !important; /* Ensures text remains readable */
    max-width: 400px; /* Adjust width */
    margin: auto;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1); /* Subtle glow effect */
    border-radius: 8px;
    border: 1px solid #333; /* Optional subtle border */
}

/* Ensure logo is centered */
.header-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px; /* Space before form */
}

/* Adjust logo size */
.header-logo {
    max-height: 80px;
    width: auto;
}

/* Ensure login box is centered */
#kc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Reduce form width */
.login-box {
    width: 100%;
    max-width: 300px;
    text-align: center;
}

/* Style form inputs */
.login-box input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #222 !important; /* Dark input fields */
    color: #ffffff !important; /* White text */
    border: 1px solid #555 !important; /* Slightly visible border */
    border-radius: 4px;
    box-sizing: border-box;
}

/* Style login button */
.login-box button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-box button:hover {
    background-color: #0056b3;
}

/* Remove any background image */
body.login-pf {
    background-color: #ffffff !important;
    background-image: none !important; /* Force override */
}

/* Ensure no inherited background styles */
.login-pf-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Prevent background override from PatternFly */
.login-pf body {
    background: #ffffff !important; /* Ensures full black */
    background-image: none !important;
    background-size: auto !important;
}

/* Ensure login box and inputs remain visible */
.card-pf {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.login-box input {
    background-color: #222 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

#kc-header-wrapper {
    display: none !important;
}

/* Moves the login box lower on the page */
#kc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Keeps it aligned at the top initially */
    min-height: 80vh; /* Adjusts height dynamically */
    padding-top: 20px; /* Pushes form lower */
}

/* Adjusts the spacing between the logo and the form */
.header-logo-container {
    margin-bottom: 40px; /* Increases space between logo and form */
}

/* Ensures the login form itself isn't too high */
.card-pf {
    padding: 30px;
    margin-top: 30px; /* Moves it down */
}