/* --- Global Layout Adjustments --- */

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex-grow: 1;
}

/* Adjust logo size and add space below it */
#kc-header-wrapper img {
    height: 100px; /* Slightly smaller than 120px */
    margin-bottom: 40px; /* More space below the logo */
}

/* Adjust the main form container (the white card) */
/* This targets both .card-pf and the Keycloak generated class for robustness */
.${properties.kcFormCardClass!}, .card-pf {
    max-width: 550px; /* Make the form wider, adjust as desired (e.g., 600px) */
    padding: 35px 50px; /* Increase padding for more breathing room inside the card */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Softer, more modern shadow */
    border-radius: 8px; /* Slightly rounded corners for a modern feel */
}

/* Ensure the top border color is correct (from your previous finding) */
.card-pf {
    border-color: #04937c !important;
}


/* --- Inside Form Adjustments --- */

/* Style for the "Sign in to your account" title */
#kc-page-title {
    font-size: 1.8em; /* Make title slightly larger for prominence */
    font-weight: 600; /* Make it a bit bolder */
    color: #333; /* Darker text for better contrast */
    margin-bottom: 30px; /* More space below the title */
    text-align: center; /* Ensure title is centered */
}

/* Adjust spacing between form groups (labels + inputs) */
.${properties.kcFormGroupClass!} {
    margin-bottom: 20px; /* More space between username, password fields */
}

/* Adjust spacing for the "Remember me" / "Forgot Password?" section */
.${properties.kcFormSettingClass!} {
    margin-top: 15px; /* Space above this section */
    margin-bottom: 30px; /* More space below this section, before the button */
}

/* --- Input Field & Button Styles (from previous steps, included for completeness) --- */

/* For the border/outline of input fields when they are focused or active */
.form-control:focus,
.kc-input:focus,
#kc-form-login input[type="text"]:focus,
#kc-form-login input[type="password"]:focus,
#kc-form-login input[type="email"]:focus {
    border-color: #04937c !important;
    box-shadow: 0 0 0 0.2rem rgba(4, 147, 124, 0.25) !important;
    outline: none !important;
}

/* For the default border of input fields when not focused */
.form-control,
.kc-input,
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-form-login input[type="email"] {
    border-color: #ced4da; /* A neutral default border color (light grey) */
    border-radius: 4px; /* Slightly rounded input corners */
}

/* General primary button styles applied across many Keycloak theme types */
/* This covers most "submit" or "action" buttons */
.kcButtonPrimaryClass, /* This is the FreeMarker variable, resolves to a class like 'kc-button-primary' */
.kc-button-primary,    /* Common class name directly on the button */
.pf-m-primary,         /* PatternFly primary button class, common in account theme */
.kcButtonClass.kcButtonPrimaryClass /* More specific combination if needed */
{
    background-color: #04937c !important;
    border-color: #04937c !important;
    color: #ffffff !important; /* Ensure text color is white for contrast */
    border-radius: 5px; /* Slightly rounded button corners */
    padding: 12px 25px; /* More padding for a larger button */
    font-size: 1.1em; /* Slightly larger text */
    text-shadow: none; /* Remove any default text shadow if present */
    box-shadow: none; /* Remove any default box shadow if present */
}

/* Hover and Focus states for primary buttons */
.kcButtonPrimaryClass:hover,
.kcButtonPrimaryClass:focus,
.kc-button-primary:hover,
.kc-button-primary:focus,
.pf-m-primary:hover,
.pf-m-primary:focus,
.kcButtonClass.kcButtonPrimaryClass:hover,
.kcButtonClass.kcButtonPrimaryClass:focus
{
    background-color: #037c68 !important; /* Slightly darker for hover */
    border-color: #037c68 !important;
    text-decoration: none; /* Ensure no underline on hover */
}

/* Styles for secondary/default buttons (e.g., "Cancel", "Back") */
.kcButtonDefaultClass, /* FreeMarker variable */
.kc-button-default,    /* Common class name directly on the button */
.pf-m-secondary        /* PatternFly secondary button class */
{
    background-color: #e0e0e0 !important; /* A light grey */
    border-color: #ccc !important;
    color: #333333 !important; /* Dark text for contrast */
    border-radius: 5px;
    padding: 12px 25px;
    font-size: 1.1em;
    text-shadow: none;
    box-shadow: none;
}

.kcButtonDefaultClass:hover,
.kcButtonDefaultClass:focus,
.kc-button-default:hover,
.kc-button-default:focus,
.pf-m-secondary:hover,
.pf-m-secondary:focus
{
    background-color: #d0d0d0 !important; /* Slightly darker grey for hover */
    border-color: #bbb !important;
    text-decoration: none;
}

#footer {
    background-color: #f0f0f0; /* Light gray background */
    color: #3b404a;             /* white text */
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 20px 0;         /* Vertical padding, no horizontal padding here as container handles width */
    border-top: 1px solid #eee; /* Subtle top border */
    text-align: center;      /* Centers the content within the footer */
}

#footer .footer-container {
    max-width: 1200px; /* Adjust this to your site's max width for content */
    margin: 0 auto;    /* Centers the container horizontally */
    padding: 0 15px;   /* Add some horizontal padding inside the container */
}

#footer ul {
    list-style: none; /* Removes bullet points */
    margin: 0;        /* Remove default list margins */
    padding: 0;       /* Remove default list padding */
    display: flex;    /* Make the list items align horizontally */
    flex-wrap: wrap;  /* Allow items to wrap to the next line on smaller screens */
    justify-content: center; /* Center the list items if they don't fill the space */
    gap: 15px 30px;   /* Vertical and horizontal spacing between list items (li) */
}

#footer li {
    /* No specific styling needed here unless you want individual list item properties */
}

#footer a,
#footer a:visited {
    color: #04937c;        /* Your brand green color for links */
    text-decoration: none; /* Remove underline */
    white-space: nowrap;   /* Prevent links from breaking onto multiple lines */
}

#footer a:hover,
#footer a:focus {
    text-decoration: underline; /* Underline on hover/focus */
}

#footer a,
#footer a:visited {
    color: #04937c;
    text-decoration: none;
    white-space: nowrap;
    /* line-height: 1; You can try setting line-height to 1 to reduce vertical space around text */
}

#footer a:hover,
#footer a:focus {
    text-decoration: underline;
}