/* หน้า Login — พื้นหลังแบนเนอร์ D-PODS */
.login-page {
    min-height: 100vh;
    background-color: #f3eef8;
    background-image: url('../assets/img/login-bg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

.login-page #layoutAuthentication {
    min-height: 100vh;
    background: transparent;
}

.login-page #layoutAuthentication_content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    padding-top: clamp(12rem, 42vh, 22rem);
    padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
}

.login-page #layoutAuthentication_content main {
    width: 100%;
}

.login-page .container-login {
    max-width: 100%;
}

/* ชื่อระบบอยู่บนแบนเนอร์แล้ว — ซ่อนจากหน้าจอ คงไว้สำหรับ screen reader */
.login-page .login-system-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-page .login-card {
    border: none;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 40px rgba(88, 28, 135, 0.12), 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.login-page .login-card .card-header {
    background: linear-gradient(180deg, #faf8fc 0%, #fff 100%);
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    padding: 1.15rem 1.5rem;
}

.login-page .login-card .card-header .card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #6d28d9;
    margin: 0;
}

.login-page .login-card .card-body {
    padding: 1.5rem 1.5rem 1.25rem;
}

.login-page .login-form .form-control {
    border-radius: 0.5rem;
    border: 1px solid #ddd6fe;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.login-page .login-form .form-control-lg {
    padding: 0.85rem 1.1rem;
    font-size: 1.05rem;
}

.login-page .login-form .form-floating > label {
    font-size: 0.95rem;
    color: #6b7280;
}

.login-page .login-form .form-control:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.2);
}

.login-page .login-form .form-check-label {
    font-size: 0.95rem;
}

.login-page .login-card .btn-login {
    background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.75rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-page .login-card .btn-login.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
}

.login-page .login-card .btn-login:hover {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4);
}

.login-page .login-card .btn-lang {
    border-radius: 0.4rem;
    border: 1px solid #ddd6fe;
    color: #7c3aed;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
}

.login-page .login-card .btn-lang:hover,
.login-page .login-card .btn-lang.active {
    background: rgba(139, 92, 246, 0.12);
    border-color: #8b5cf6;
    color: #6d28d9;
}

.login-page .login-card .card-footer {
    background: #faf8fc;
    border-top: 1px solid rgba(124, 58, 237, 0.08);
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
}

.login-page .login-card .card-footer a {
    color: #7c3aed;
    font-weight: 500;
    text-decoration: none;
}

.login-page .login-card .card-footer a:hover {
    color: #6d28d9;
    text-decoration: underline;
}

.login-page .login-card .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

.login-page .login-card a.small[href="password.html"] {
    color: #7c3aed;
}

.login-page .login-card .alert-danger {
    border-radius: 0.5rem;
    border-color: #f5c2c7;
}

.login-page .app-footer-wrapper .app-footer {
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid rgba(124, 58, 237, 0.08);
}

@media (max-width: 575.98px) {
    .login-page {
        background-size: 100% auto;
        background-attachment: scroll;
    }

    .login-page #layoutAuthentication_content {
        padding-top: clamp(10rem, 38vw, 16rem);
    }
}

@media (min-width: 768px) {
    .login-page .login-card .card-body {
        padding: 1.75rem 1.75rem 1.5rem;
    }

    .login-page .login-card .card-header {
        padding: 1.25rem 1.75rem;
    }
}

@media (min-width: 1200px) {
    .login-page #layoutAuthentication_content {
        padding-top: clamp(14rem, 44vh, 24rem);
    }
}