/* login.css */

/*
   This CSS file is specifically for the login page's layout and styling.
   It complements base2.css and styles.css, providing specific overrides
   or additions for the login card.
*/

/* Define a CSS variable for the header height if not already in base2.css or styles.css.
   This helps in calculating the min-height for the main content.
   It's good practice to define this in a global CSS file like base2.css or :root.
   If your .app-header already has a fixed height, ensure it's consistent.
*/
.app-header { /* This block assumes .app-header from base2.css, just for context */
    --header-height: 60px; /* Example value, adjust to your actual header height */
    /* Other .app-header styles from base2.css will apply here */
}

/* Central alignment for the login section */
.login-section {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Calculate remaining height. body has min-height: 100vh and flex-direction: column.
       main-content has flex-grow: 1. This ensures the login-section fills remaining space */
    min-height: calc(100vh - var(--header-height, 60px) - var(--footer-height, 0px)); /* Adjust for footer if present */
    padding: 20px; /* Add some padding around the card */
    box-sizing: border-box; /* Include padding in element's total width and height */
    /* Override any conflicting styles from .user-rules-section if it was applied via HTML */
    background-color: transparent; /* Ensure no conflicting background */
    box-shadow: none; /* Remove any conflicting shadow */
    border-radius: 0; /* Remove any conflicting border-radius */
    margin: 0; /* Remove any conflicting margin */
    width: auto; /* Remove any conflicting width */
    max-width: none; /* Remove any conflicting max-width */
}

/* The Login Card styles */
.login-card {
    background-color: var(--section-bg, #ffffff); /* Use global variable if available, else fallback */
    border-radius: 12px; /* More pronounced rounded corners */
    box-shadow: var(--shadow-medium, 0 8px 25px rgba(0, 0, 0, 0.1)); /* Softer, larger shadow */
    padding: 40px;
    width: 100%;
    max-width: 400px; /* Limit the max width for desktop */
    text-align: center; /* Center align content inside the card */
    box-sizing: border-box; /* Ensures padding is included in max-width */
}

.login-title {
    font-size: 2em; /* Larger title */
    color: var(--primary-dark, #333); /* Use global variable */
    margin-bottom: 10px;
    font-weight: 600;
}

.login-subtitle {
    font-size: 1em;
    color: var(--text-color, #666); /* Use global variable */
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Social Login Buttons Container */
.social-login-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically by default */
    gap: 15px; /* Space between buttons */
    margin-bottom: 30px;
}

/* Common button styles */
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px; /* Rounded buttons */
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 100%; /* Take full width of parent */
    box-sizing: border-box;
    /* Ensure text color applies if the base color is light/dark */
    color: #ffffff; /* Default for dark buttons */
}

.button-logo {
    height: 20px; /* Consistent logo size */
    margin-right: 10px; /* Space between logo and text */
}


/* Microsoft Button Specific Styles */
.microsoft-signin-button {
    background-color: #2F2F2F; /* Dark gray, close to MS brand color */
    color: #ffffff;
    border: 1px solid #2F2F2F;
}

.microsoft-signin-button:hover {
    background-color: #000; /* Darker on hover */
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Google Button Specific Styles (wrapper for GSI button) */
.google-signin-button {
    /* Google's GSI button injects its own styles, so we primarily control its container */
    /* Ensure the container is flexible to align the GSI button */
    display: flex;
    justify-content: center; /* Center the GSI button within its container */
    /* Apply styles that will affect the GSI button's appearance if it inherits (e.g., width) */
    width: 100%; /* Make the container take full width for consistency */
}


.login-footer {
    font-size: 0.85em;
    color: var(--text-color, #888); /* Use global variable */
    line-height: 1.4;
}

.login-footer a {
    color: var(--primary-blue, #007bff); /* Use global variable */
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .login-card {
        padding: 30px;
        margin: 10px; /* Add some margin on smaller screens */
        border-radius: 10px; /* Slightly less rounded on smaller screens */
    }

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

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

    .social-button {
        font-size: 1em;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 20px;
        border-radius: 8px; /* Slightly less rounded on very small screens */
    }

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

    .login-subtitle {
        margin-bottom: 20px;
    }

    .social-login-buttons {
        gap: 10px;
    }
}

/* Removed old .login-container and generic .logo from here
   as they are replaced by .login-card and .app-header .logo from base2.css */