:root {
    --fallback-font-stack: Helvetica, Arial, serif;
}

/* Scoped wrapme so it won't conflict with dashboard */
.loginpage .wrapme {
    display: flex;
    flex-direction: row;
}

.loginpage.loginContainer {
    display: flex;
    flex-direction: row;
    column-gap: 82px;
    background-color: #111827;
    overflow: hidden;
}

/* ✅ Mobile: only triggers ≤768px */
@media (max-width: 768px) {
    .loginpage.loginContainer {
        flex-direction: column;
        align-items: center;
        gap: 30px 82px;
    }
}

.loginpage .brandLogo {
    position: relative;
    min-width: 0;
    max-width: 864px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .loginpage .brandLogo {
        display: none !important;
        width: 100%;
        min-width: unset;
    }
}

.loginpage .loginFormWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 65px;
    margin: 162px 82px 271px 0;
    width: 700px;
    max-width: 700px;
}

@media (max-width: 768px) {
    .loginpage .loginFormWrapper {
        margin: 0 auto;
        width: 100%;
        row-gap: 50px;
    }
}

.loginpage .systemTitle {
    width: 446px;
    max-width: 85%;
    font: 700 36px/1.22 Inter, Helvetica, Arial, serif;
    color: #f6efef;
}

@media (max-width: 768px) {
    .loginpage .systemTitle {
        font-size: 30px;
    }
}

.loginpage .formContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #374151;
    border-radius: 12px;
}

.loginpage .credentialsGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;
    width: 350px;
    max-width: 85%;
}

.loginpage .loginHeading {
    width: 98px;
    max-width: 85%;
    font: 700 36px/1.22 Inter, Helvetica, Arial, serif;
    color: #f6efef;
}

@media (max-width: 768px) {
    .loginpage .loginHeading {
        font-size: 30px;
    }
}

.loginpage .usernameLabel,
.loginpage .passwordLabel {
    margin: 50px 0 0;
    width: 100%;
    font: 600 20px/1.2 Inter, Helvetica, Arial, serif;
    color: #f6efef;
}

@media (max-width: 768px) {
    .loginpage .usernameLabel,
    .loginpage .passwordLabel {
        font-size: 16px;
    }
}

.loginpage .inputField {
    margin: 10px 0 0;
    width: 100%;
    min-height: 50px;
    background-color: #c2c2c2;
    border-radius: 12px;
}

.loginpage .submitBtn {
    display: flex;
    justify-content: center;
    margin: 50px auto 0;
    width: 175px;
    font: 700 20px/1.2 Inter, Helvet