/* ============================================================
   AUTH.CSS — Login & Authentication Screens
   ============================================================ */

/* Full-page textured background */
body.login-page {
    position: relative;
    z-index: 0;

    background-image: url('/static/images/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Override base container so it doesn't interfere */
body.login-page .container {
    display: block !important;
    min-height: auto;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.login-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Layer 1: full-page flex container */
.login-outer {
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* top alignment */
    padding-top: 1rem;   /* small top margin for the login box */
    min-height: auto;    /* critical: remove 100vh */
}

/* Layer 2: the centered login box */
.login-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Login container styling */
.login-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Inputs */
.login-container input.form-control {
    width: 100%;
    min-width: 300px;
}

/* Login links */
.login-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.login-links a {
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Viewport-centered image */
.login-info-image {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

.login-info-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}