/* 1) Box-sizing */
html {
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* 2) Base font sizing */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* 3) Focus outlines */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* 4) Body background & flex centering */
body {
    margin: 0;
    margin-bottom: 60px;
    background: linear-gradient(135deg, #1439ba61 0%, #48c6ef38 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5) Two-pane login layout */
.login-container {
    max-width: 900px;
    width: 100%;
    height: 600px;
    margin: 2rem auto;
    display: flex;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}

.login-image {
    flex: 1;
    background: url('/images/login-bg.jpg') center/cover no-repeat;
}

.login-form {
    flex: 1;
    background: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* 6) Brand & floating labels */
    .login-form .brand {
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 1.75rem;
        font-weight: 700;
        color: #333;
    }

    .login-form .form-floating > .form-control:focus ~ label,
    .login-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
        opacity: 1;
        transform: scale(.85) translateY(-0.5rem);
    }

    /* 7) Button & link tweaks */
    .login-form .btn-primary {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }

    .login-form .text-muted a {
        color: #48c6ef;
        text-decoration: none;
    }

        .login-form .text-muted a:hover {
            text-decoration: underline;
        }

/* 8) Mobile: stack panels & hide image */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column-reverse;
        height: 800px;
        margin: 1rem auto;
    }

    .login-image {
       /* display: none;*/
    }

    .login-form {
        padding: 1rem;
    }
}