/**
 * Layout and Structure Styles
 * Page layout, containers, and structural components
 * Mobile-first approach with breakpoints: 480px, 768px, 1024px
 */

/* ===== Container ===== */
.login-container {
    min-height: 100vh;
    width: 100%;
}

/* ===== Main Panel ===== */
.left-panel {
    min-height: 100vh;
    width: 100%;
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.5s ease-out;
}

/* ===== Content Area ===== */
.login-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-2xl) var(--space-xl);
    min-height: 100vh;
}

/* ===== Right Panel (Hidden on mobile) ===== */
.right-panel {
    display: none;
}

/* ===== Header ===== */
.login-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    width: 100%;
    max-width: 400px;
}

.user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    color: var(--color-secondary);
    font-size: 48px;
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-one);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-heigt-one);
}

/* ===== Footer ===== */
.login-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.signup-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===== Copyright ===== */
.copyright {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-lg);
    width: 100%;
    max-width: 400px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE: 480px and up ===== */
@media (min-width: 480px) {
    .page-subtitle {
        font-size: var(--font-size-lg);
    }
}

/* ===== RESPONSIVE: 768px and up ===== */
@media (min-width: 768px) {
    .user-icon {
        font-size: 64px;
    }

    .login-content {
        padding: var(--space-3xl) var(--space-2xl);
    }
}

/* ===== RESPONSIVE: 1024px and up ===== */
@media (min-width: 1024px) {
    /* Switch to split layout */
    .left-panel {
        flex-direction: row;
    }

    .login-content {
        flex: 1;
        padding: var(--space-3xl);
    }

    /* Show Right Panel */
    .right-panel {
        display: flex;
        flex: 1;
        background: var(--color-bg-white);
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    /* Hide user icon on desktop */
    .user-icon {
        display: none;
    }

    /* Adjust title alignment */
    .page-title {
        text-align: left;
    }

    .page-subtitle {
        font-size: var(--font-size-xl);
        text-align: left;
    }

    .login-header {
        text-align: left;
    }

    /* Copyright spacing for desktop */
    .copyright {
        margin-top: var(--space-2xl);
    }
}