body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.login-card {
    margin-top: 50px;
    padding: 20px;
    border-radius: 8px;
}

.logo-small {
    width: 150px !important; /* For login page */
    height: auto;
    margin: 20px auto;
    display: block;
}

.logo-nav {
    width: 60px !important; /* For navbar in dashboard */
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
}

nav {
    background-color: #1976d2;
}

.container {
    margin-top: 20px;
}

@media only screen and (max-width: 600px) {
    .login-card {
        margin-top: 20px;
        padding: 10px;
    }
    
    .logo-small {
        width: 40px !important;
        height: auto;
    }
    
    .logo-nav {
        width: 55px !important; /* Slightly smaller on mobile for navbar */
        margin-right: 5px;
    }
}

/* Optional Footer Customization */
.page-footer {
    padding: 0px 0px;
    margin-top: auto; /* Pushes footer to bottom in flex layout */
}