/* 1. THE BACKGROUND & GRADIENT */
/* Scoped to login page via data-path */
body[data-path="login"] section.for-login::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Targets body ONLY on the login page */
body[data-path="login"] {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%),
                url('/assets/ksb_core/images/image.png') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* 2. THE MAIN WRAPPER LAYOUT */
body[data-path="login"] section.for-login {
    background-color: #00000078 !important;
    border: 1px white solid;
    border-radius: 5px !important;
}

/* 3. THE SINGLE WHITE BOX */
body[data-path="login"] .login-content {
    background: #ffffff !important; 
    margin-right: 8% !important; 
    width: 420px !important;
    padding: 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Scoped links to avoid making all links on the site white */


/* Specific styling for the Forgot Password link */
body[data-path="login"] .forgot-password-message a {
    color: #ffffff !important; /* Professional Blue */
    font-weight: 500;
}

body[data-path="login"] .page_content {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 90vh !important;
}

body[data-path="login"] .page_content > div {
    width: 30% !important;
    min-width: 420px;
}

/* 4. CLEANING UP FRAPPE'S DEFAULT STYLES */
body[data-path="login"] .page-card, 
body[data-path="login"] .page-card-head {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
}

body[data-path="login"] .page-card {
    max-width: none !important;
}

/* 5. STYLING THE LOGO & TEXT INSIDE THE WHITE BOX */
body[data-path="login"] .page-card-head {
    text-align: center !important;
}

/* Login Header Text */
body[data-path="login"] .page-card-head h4 {
    color: #ffffff !important; /* Dark text for readability on white */
    margin-top: 10px !important;
}

/* Primary Button Login Specific */
body[data-path="login"] .btn.btn-primary {
    background-color: transparent; /* Added a solid color for visibility */
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

@media (min-width: 1200px) {
    body[data-path="login"] .container-xl, 
    body[data-path="login"] .container-lg, 
    body[data-path="login"] .container-md, 
    body[data-path="login"] .container-sm, 
    body[data-path="login"] .container {
        max-width: 1500px !important;
    }
}

body[data-path="login"] .page-card-head img {
    max-height: 60px !important;
    margin-bottom: 15px !important;
    display: inline-block;
}

/* Ensure headings are readable */
body[data-path="login"] .login-content h4, 
body[data-path="login"] .login-content .page-card-head {
    color: #333333 !important;
    font-weight: 600 !important;
}

body[data-path="login"] .login-content form {
    width: 100%;
}