/* Login component - mobile-first responsive styling */
#loginWindow {
    padding: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive padding - more breathing room on larger screens */
@media (min-width: 600px) {
    #loginWindow {
        padding: 1.5rem;
    }
}

@media (min-width: 960px) {
    #loginWindow {
        padding: 2.5rem;
    }
}

/* Container - constrain width on large screens, full bleed on mobile */
#loginWindow .login-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Logo - scale appropriately on mobile */
#loginWindow .login-logo {
    max-width: 100%;
    height: auto;
}

/* Welcome text - smaller on mobile for better fit */
#loginWindow .login-welcome {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

#loginWindow .login-subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (min-width: 600px) {
    #loginWindow .login-welcome {
        font-size: 1.5rem;
    }

    #loginWindow .login-subtitle {
        font-size: 0.9375rem;
    }
}

/* Input fields - touch-friendly min height on mobile only */
@media (max-width: 599px) {
    #loginWindow .mud-input-root {
        min-height: 48px;
    }
}

/* Button area - full width on mobile, centered */
#loginWindow .login-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
}

#loginWindow .login-actions .mud-button-root {
    min-height: 44px;
    min-width: 120px;
    padding: 0.5rem 1.5rem;
}

/* Forgot password link - tap-friendly, prevent tiny tap targets */
#loginWindow .login-forgot-link {
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
    display: inline-block;
    font-size: 0.875rem;
}

@media (min-width: 600px) {
    #loginWindow .login-forgot-link {
        padding: 0.25rem;
        margin: -0.25rem;
    }
}

/* Error message - readable on small screens */
#loginWindow #message {
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.5rem 0;
    word-break: break-word;
}

/* Microsoft external login - ensure it doesn't overflow */
#loginWindow .mud-paper {
    max-width: 100%;
}