/* Custom Minimalist Form Styling */
/* Fix Input Field Widths and Styling inside the Card */

input[type="text"],
input[type="password"]{
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.3rem !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.2rem !important;
    padding-top:1rem  !important;
    padding-bottom:1rem  !important;
    outline: none !important;
}

select {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.3rem !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.2rem !important;
    padding-top:0.5rem  !important;
    padding-bottom:0.5rem  !important;
    outline: none !important;
}

input[type="button"],
input[type="submit"]{
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.3rem !important;
    padding: 0.6rem 0.75rem !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    outline: none !important;
    background-color: rgba(0, 0, 100, 1) !important;
    font-weight: bold !important;
}

.my-btn {
   width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.3rem !important;
    padding: 0.6rem 0.75rem !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    outline: none !important;
    background-color: rgba(0, 0, 100, 1) !important;
    font-weight: bold !important; 
}

.my-btn-secondary {
   width: 100% !important;
    box-sizing: border-box !important;
    border: solid 1px rgba(0, 0, 100, 0) !important;
    border-radius: 0.3rem !important;
    padding: 0.6rem 0.75rem !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    outline: none !important;
    background-color: rgba(246, 241, 241, ) !important;
    font-weight: bold !important; 
}

.spi-container-m {
    /* padding-top: 1rem !important; */
    /* padding-bottom: 1rem !important; */
    background-color: rgba(240, 240, 240, 1) !important;
    border-radius: 0.6rem !important;
}

.spi-content-m {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    /* background-color: rgba(240, 240, 240, 1) !important; */
    /* border-radius: 0.6rem !important; */
}


.auth-footer-content {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
    padding: 1rem !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 0.3rem !important;
}

.auth-footer-header {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
    padding: 0.3rem !important;
    /* background-color: rgba(255, 255, 255, 0.5) !important; */
    /* border-radius: 0.3rem !important; */
}

.center-legacy-login {
    width: 100%;
    min-height: 100vh; /* Forces the wrapper to be at least the height of the screen */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
}

/* --- Custom Flex Split Layout --- */
.split-wrapper {
    display: flex;
    width: 100%;
    gap: 1rem; /* Creates the clean gutter between columns */
    background: linear-gradient(135deg, rgba(219, 234, 239, 1) 0%, rgba(219, 234, 239, 0.5) 100%);

}

.split-column {
    flex: 2; /* Forces both columns to take up exactly 50% of the space */
    min-width: 0; /* Prevents long content from breaking the flex container */
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    padding-right: 1rem !important;
}

.split-column-2 {
    flex: 1; /* Forces both columns to take up exactly 50% of the space */
    min-width: 0; /* Prevents long content from breaking the flex container */
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 0.6rem !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
}

/* Logo: the wrapper is the flex item, the image inside is a plain block, so Safari cannot stretch its height */
.auth-logo {
    width: 67%;
    flex: 0 0 auto;
}
.auth-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Make it stack neatly on mobile screens */
@media (max-width: 640px) {
    .split-wrapper {
        flex-direction: column;
    }
}

/* Soft Grey Translucent Gradient (Best for Dark Themes) */
.soft-grey-gradient {
    background: linear-gradient(135deg, rgba(243, 244, 246, 0.15) 0%, rgba(156, 163, 175, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px); /* Optional: adds a modern frosted glass effect */
    padding: 2rem;
}

/* Opaque Solid Soft Grey Gradient (If you want a solid panel instead) */
.soft-grey-gradient-solid {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    color: #143160; /* Changes text to dark blue so it is readable on the light background */
    padding: 2rem;
}