/* Global Reset for Box Sizing - VERY IMPORTANT for preventing overflow */
*, *::before, *::after {
    box-sizing: border-box;
}

/* General Body Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Slightly more modern font */
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5; /* Light background fallback */
    color: #333; /* Default text color */
    overflow: hidden; /* Prevent scrollbars due to fixed elements */
}

/* Main Wrapper for Login Content (Flexbox for large screens) */
.main-login-wrapper {
    display: flex; /* Use flexbox for side-by-side layout */
    width: 100vw; /* Take full viewport width */
    height: 100vh; /* Take full viewport height */
    border-radius: 0; /* No rounded corners for full screen layout */
    overflow: hidden; /* Ensures content respects boundaries */
    box-shadow: none; /* No shadow on the main wrapper */
    background-color: transparent; /* No specific background, children will have it */
}

/* Left Section (Image and Text) - Large Screens */
.login-left-section {
    flex: 1; /* Takes equal part of the flex space */
    position: relative;
    display: flex; /* Flex container for image and title */
    flex-direction: column; /* Stack image and title vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    color: white;
    text-align: center;
    background-color: #1a1a2e; /* Dark fallback background for left section */
}

.login-left-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Covers the entire left section */
    filter: brightness(0.4) saturate(1.2); /* Darkens and slightly saturates for better text contrast */
    z-index: 1;
}

.login-page-title {
    position: relative;
    z-index: 2; /* Ensures text is above the image */
    font-size: 3.8em; /* Larger title */
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* Stronger glow/shadow */
    font-weight: 800; /* Extra bold */
    letter-spacing: 3px; /* Wider letter spacing */
    white-space: nowrap; /* Prevent "Admin Login" from breaking */
}

/* Right Section (Login Form and Exit Button) */
.login-right-section {
    flex: 1; /* Takes equal part of the flex space */
    display: flex;
    flex-direction: column; /* Stack login card and exit button */
    justify-content: center; /* Center content vertically */
    align-items: center;
    background-color: #ffffff; /* White background for large screens */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width calculation */
    position: relative; /* For positioning the exit button */
    color: #333; /* Darker default text color for contrast */
}

.login-card {
    width: 100%; /* Take full width of its parent (.login-right-section) */
    max-width: 400px; /* Max width for the form itself */
    padding: 40px 30px; /* Increased padding */
    border-radius: 12px; /* Slightly more rounded corners */
    background-color: #ffffff; /* Explicitly white for large screen form */
    text-align: center;
    box-shadow: 0 8px 30px rgba(254,221,0); /* Lighter shadow for definition */
    /* box-sizing: border-box; - Inherited from global reset */
    z-index: 2; /* Ensure form is above background image on small screens */
    color: #333; /* Dark text for inside the white card */
}

.login-title {
    font-size: 2.5em; /* Larger title */
    margin-bottom: 10px;
    color: #006400; /* Darker color for title */
    font-weight: bold;
    letter-spacing: 0.5px;
}

.login-subtitle {
    font-size: 1.1em;
    color: #006400; /* Medium grey subtitle color */
    margin-bottom: 35px; /* More space below subtitle */
}

.input-group {
    margin-bottom: 25px; /* More space between input groups */
    text-align: left; /* Align labels and inputs to the left */
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600; /* Semi-bold label */
    color: #006400; /* Darker color for labels */
    font-size: 0.95em;
}

.input-group input {
    width: 100%; /* Take 100% of parent's width, including padding/border due to box-sizing */
    padding: 14px 18px; /* Increased padding */
    border: 1px solid #d1d5db; /* Lighter border */
    border-radius: 8px;
    font-size: 1em;
    outline: none;
    background-color: #f8f8f8; /* Very light grey background for inputs */
    color: #003B1B; /* Dark text color for inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input::placeholder {
    color: #999; /* Darker placeholder text */
}

.input-group input:focus {
    border-color: #006400; /* Blue border on focus */
    box-shadow: 0 0 0 4px rgba(0,110,51); /* Soft green glow on focus */
}

.login-button {
    width: 100%;
    padding: 15px 20px; /* Increased padding */
    background-color: #006400; /* Primary blue button */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.15em; /* Slightly larger font */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px; /* More space above button */
    letter-spacing: 0.8px;
}

.login-button:hover {
    background-color: #FEDD00;
    transform: translateY(-3px); /* Slightly more pronounced lift */
    box-shadow: 0 5px 15px rgba(254,221,0); /* Glow on hover */
}

.forgot-password {
    margin-top: 20px; /* More space above link */
    text-align: right; /* Align "Forgot password?" to the right */
}

.forgot-password a {
    color: #006400; /* Green link */
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: #006400; /* Lighter blue on hover */
    text-decoration: underline;
}

.error-message {
    color: #e74c3c; /* Red color for error messages */
    margin-top: 20px; /* More space above message */
    font-size: 0.95em;
    text-align: center;
    font-weight: bold;
}

/* Exit Button Styling */
.exit-button {
    position: absolute;
    top: 30px; /* Slightly more space from top */
    right: 30px; /* Slightly more space from right */
    background-color: #006400; /* Red color for exit */
    color: white;
    border: none;
    border-radius: 50%; /* Circular button */
    width: 45px; /* Slightly larger button */
    height: 45px;
    font-size: 1.3em; /* Larger icon */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 10; /* Ensure it's on top */
}

.exit-button:hover {
    background-color: #FEDD00;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 768px) {
    body {
        /* Background image for smaller screens */
        background-image: url('sch3.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        display: flex; /* Ensure flex for centering form */
        justify-content: center;
        align-items: center;
    }

    .main-login-wrapper {
        flex-direction: column; /* Stack sections vertically (though left section is hidden) */
        width: 100%; /* Take full width on small screens */
        height: 100vh; /* Take full height on small screens */
        background-color: transparent; /* No background on wrapper */
        box-shadow: none; /* No shadow */
        position: relative; /* For proper positioning of exit button if not fixed */
    }

    .login-left-section {
        display: none; /* Hide the left section on small screens */
    }

    .login-right-section {
        flex: none; /* Remove flex sizing */
        width: 100%; /* Take full width */
        padding: 20px; /* Some padding around the card container */
        background-color: transparent; /* No solid background here */
        justify-content: center; /* Center the login card vertically */
        align-items: center; /* Center the login card horizontally */
        color: #ecf0f1; /* Light text color for the form on small screens (due to transparent card) */
    }

    .login-card {
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black for the form */
        padding: 30px; /* Adjusted padding for mobile */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* More prominent shadow on translucent card */
        width: 95%; /* Make card take more width */
        max-width: 450px; /* Limit max width */
        color: #ecf0f1; /* Light text for inside transparent card */
        margin-top: 50px; /* Added spacing above the form for smaller screens */
    }

    .login-title {
        font-size: 2em;
        color: #ffff; /* Light color for title */
    }

    .login-subtitle {
        font-size: 1em;
        color: #ffff; /* Light color for subtitle */
    }

    .input-group label {
        color: #ffff; /* white color for labels */
        font-size: 0.9em;
    }

    .input-group input {
        background-color: rgba(255, 255, 255, 0.2); /* Translucent input background */
        border: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border for inputs */
        color: #ecf0f1; /* Light input text */
    }

    .input-group input::placeholder {
        color: rgba(236, 240, 241, 0.6); /* Lighter placeholder on translucent background */
    }

    .input-group input:focus {
        border-color: #006400;
        box-shadow: 0 0 0 3px rgba(0, 85, 27, 0.4);
    }

    .forgot-password a {
        color: #63a4ff; /* Lighter blue for links on dark background */
    }

    .error-message {
        color: #e74c3c; /* Lighter red for errors on dark background */
    }

    .exit-button {
        position: fixed; /* Keep it fixed relative to viewport */
        top: 20px;
        right: 20px;
        width: 40px; /* Slightly smaller for mobile */
        height: 40px;
        font-size: 1.1em;
        z-index: 100; /* Ensure it's above other content on mobile */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
    .login-card {
        padding: 25px 20px;
        /* Ensure it remains centered with flexbox on .login-right-section */
    }

    .login-title {
        font-size: 1.8em;
    }

    .login-subtitle {
        font-size: 0.8em;
    }

    .input-group label {
        font-size: 0.85em;
    }

    .input-group input {
        padding: 10px 12px;
        font-size: 0.9em;
    }

    .login-button {
        font-size: 1em;
        padding: 12px 15px;
    }

    .exit-button {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
}