/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

    .login {

        margin-top: 5px;
        padding: 20px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .login .btn-primary {
        width: 100px;
        height: 30px;
        font-size: 20px;
        line-height: 0;
        font-weight: 300;

    }

    .submit {

        padding: 0;
        padding-bottom: 10px;
        text-align: center;
    }

    .login h1 {
        font-size: 190%;
    }

    .user, .pass {
        margin-bottom: 10px;
    }

    .form-links {
        font-size: 100%;
    }

    .label {
        font-size: 100%;
    }

    .keep {
        font-size: 100%;
    }

    .user, .pass {
        margin-bottom: 5px;
        height: 20px;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {

    .login {

        margin-top: 5px;
        padding: 20px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .login .btn-primary {
        width: 100px;
        height: 30px;
        font-size: 20px;
        line-height: 0;
        font-weight: 300;

    }

    .submit {

        padding: 0px;
        padding-bottom: 10px;
        text-align: center;
    }

    .login h1 {
        font-size: 300%;
    }

    .user, .pass {
        margin-bottom: 10px;
    }

    .form-links {
        font-size: 100%;
    }

    .label {
        font-size: 100%;
    }

    .keep {
        font-size: 100%;
    }

    .user, .pass {
        margin-bottom: 5px;
        height: 20px;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    .login {
        margin-top: 15px;
        padding: 20px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .login h1 {
        font-size: 450%;
    }

    .user, .pass {
        margin-bottom: 10px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .login {
        width: 55%;
        margin-top: 50px;

    }

    .login h1 {
        font-size: 450%;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .login {
        width: 55%;
    }
}


/* ===== ADDED: Global Dark Mode Override (appended by assistant) ===== */
body, .container, .card, .panel, .box, .content, input, textarea, select {
    background-color: #1a1a1a !important;
    color: #e6e6e6 !important;
    border-color: #333 !important;
}

/* White panels converted to dark */
.white-bg, .bg-white, .panel-body, .panel-default, .card-body, .panel, .well {
    background-color: #1f1f1f !important;
    color: #ddd !important;
}

/* Input fields in dark mode */
input, textarea, select, .form-control {
    background-color: #262626 !important;
    color: #f1f1f1 !important;
    border-color: #444 !important;
}

/* Tables */
table {
    background-color: #1f1f1f !important;
}

table tr, table td, table th {
    background-color: #262626 !important;
    color: #ddd !important;
}

/* Utility: light borders for cards/panels */
.panel, .card, .box {
    box-shadow: none !important;
    border: 1px solid #2b2b2b !important;
}

/* Links */
a { color: #d6a35e !important; }
a:hover { color: #f0cfa0 !important; }

/* Buttons */
.btn {
    background-color: #3a3a3a !important;
    color: #eee !important;
    border-color: #444 !important;
}

/* Ensure inputs' placeholder text is visible */
::placeholder { color: #bdbdbd !important; }

/* End of assistant-inserted dark mode CSS */