/* File: src/Presentation/PSM.Web/wwwroot/css/auth-layout.css - Authentication Layout Styles */

/* ===== AUTH PAGE LAYOUT ===== */
/* Clean, minimal layout for authentication pages */
.auth-page {
    min-height: 100vh;
    font-family: 'Lexend', sans-serif;
    background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
    /* Background image will be set dynamically via JavaScript */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #1f2937;
    position: relative;
}

/* Background overlay for better text readability */
.auth-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    z-index: 0;
}

/* Ensure content is above the overlay */
.auth-page > * {
    position: relative;
    z-index: 1;
}

/* Main content area */
.auth-page main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Enhanced card contrast for background image */
.auth-page .login-card,
.auth-page .school-login-card {
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Override any potential dark backgrounds */
/*.auth-page * {
    color: inherit;
}*/

/* Ensure proper text contrast */
.auth-page .text-white {
    color: #1f2937 !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .auth-page main {
        padding: 1rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .auth-page {
        background-attachment: scroll; /* Fixed attachment can cause issues on mobile */
    }
    
    /* Slightly stronger overlay on small screens for better readability */
    .auth-page::before {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(4px);
    }
}