/* Extracted page styles from login.php */

:root { --cu-pink: #e87b98; }
        body { 
            font-family: var(--audit-font-family); 
            min-height: 100vh; /* อัปเดต: เปลี่ยนจาก height เป็น min-height */
            margin: 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            background-image: url('../../../image/CU5.webp'); 
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            background-attachment: fixed; 
            
            /* อัปเดต: ปลดล็อกหน้าจอ ให้มือถือปัดลงเพื่อรีเฟรชได้ */
            overflow-y: auto; 
            overscroll-behavior-y: auto; 
        }
        .bg-overlay { 
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
            background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%); 
            z-index: 1; 
        }
        .login-wrapper { 
            position: relative; 
            z-index: 2; 
            width: 100%; 
            max-width: 420px; 
            padding: 15px; 
        }
        
        /* แยกคลาส Animation ออกมา เพื่อใช้เฉพาะโหลดหน้าครั้งแรก */
        .animate-startup {
            animation: fadeInUp var(--audit-motion-duration-page) var(--audit-motion-ease-enter) forwards; 
            opacity: 0;
            transform: translateY(30px);
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .login-card { 
            background: rgba(15, 20, 25, 0.85); 
            backdrop-filter: blur(20px) saturate(160%); 
            -webkit-backdrop-filter: blur(20px) saturate(160%); 
            border: 1px solid rgba(255, 255, 255, 0.15); 
            border-radius: 24px; 
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); 
            overflow: hidden; 
        }
        .login-header { 
            background: rgba(0, 0, 0, 0.3); 
            color: #fff; 
            padding: 35px 20px 25px; 
            text-align: center; 
            border-bottom: 1px solid rgba(255,255,255,0.05); 
        }
        .login-header h4 { 
            font-weight: 600; 
            font-size: 1.5rem; 
            margin-top: 0; 
            margin-bottom: 5px; 
            letter-spacing: 0.5px; 
        }
        .header-sub { 
            font-size: 0.95rem; 
            opacity: 0.8; 
            font-weight: 300; 
        }
        .form-container { 
            padding: 35px 40px 40px; 
        }
        .cu-label { 
            font-size: 0.95rem; 
            font-weight: 500; 
            color: rgba(255, 255, 255, 0.95); 
            margin-bottom: 8px; 
            display: block; 
        }
        .input-group { 
            background: rgba(0, 0, 0, 0.4) !important; 
            border-radius: 12px; 
            border: 1px solid rgba(255, 255, 255, 0.15) !important; 
            overflow: hidden; 
            transition: background-color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), border-color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), box-shadow var(--audit-motion-control-duration) var(--audit-motion-ease-standard), transform var(--audit-motion-control-duration) var(--audit-motion-ease-standard); 
            margin-bottom: 5px; 
        }
        .input-group:focus-within { 
            background: rgba(0, 0, 0, 0.6) !important; 
            border-color: rgba(232, 123, 152, 0.8) !important; 
            box-shadow: 0 0 15px rgba(232, 123, 152, 0.2); 
        }
        .input-group-text { 
            background: transparent !important; 
            border: none !important; 
            color: rgba(255, 255, 255, 0.6); 
            padding-left: 18px; 
            padding-right: 10px; 
            font-size: 1.1rem; 
        }
        .input-group:focus-within .input-group-text {
            color: var(--cu-pink);
        }
        
        .form-control { 
            background: transparent !important; 
            border: none !important; 
            padding: 12px 15px 12px 5px; 
            font-size: 1.05rem; 
            color: #ffffff !important; 
            font-weight: 500 !important; 
        }
        .form-control:focus { 
            box-shadow: none !important; 
            outline: none !important; 
            background-color: transparent !important; 
            color: #ffffff !important; 
        }
        
        .form-control::placeholder { 
            color: rgba(255,255,255,0.5); 
            font-weight: 300;
        }
        input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { 
            -webkit-transition: color var(--audit-motion-autofill-delay) var(--audit-motion-ease-exit), background-color var(--audit-motion-autofill-delay) var(--audit-motion-ease-exit); 
            -webkit-transition-delay: var(--audit-motion-autofill-delay); 
            -webkit-text-fill-color: #ffffff !important; 
        }
        .btn-cu { 
            background: var(--cu-pink); 
            color: white; 
            border-radius: 12px; 
            padding: 12px; 
            font-size: 1.15rem; 
            font-weight: 600; 
            border: none; 
            margin-top: 20px; 
            transition: background-color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), border-color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), color var(--audit-motion-control-duration) var(--audit-motion-ease-standard), box-shadow var(--audit-motion-control-duration) var(--audit-motion-ease-standard), transform var(--audit-motion-control-duration) var(--audit-motion-ease-standard); 
        }
        .btn-cu:hover { 
            background-color: #d66a87; 
            color: #fff; 
            transform: translateY(-2px); 
            box-shadow: 0 8px 20px rgba(232, 123, 152, 0.4); 
        }
        .btn-cu:disabled {
            background-color: #8c8c8c;
            transform: none;
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.8;
        }

        .login-footer-credit {
            position: fixed;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%);
            z-index: 2;
            width: min(92vw, 520px);
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.86rem;
            line-height: 1.45;
            font-weight: 300;
            letter-spacing: 0.1px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
            pointer-events: none;
        }

        .login-footer-credit .credit-title {
            font-weight: 500;
            color: #ffffff;
            margin-bottom: 2px;
        }

        .login-footer-credit .credit-th {
            font-weight: 400;
        }

        .login-footer-credit .credit-en {
            opacity: 0.88;
        }

        @media (max-width: 576px) {
            .login-footer-credit {
                bottom: 14px;
                font-size: 0.78rem;
                line-height: 1.35;
                width: min(94vw, 420px);
            }
        }

        @media (max-height: 680px) {
            body {
                align-items: center;
                justify-content: flex-start;
                padding-top: 24px;
                padding-bottom: 24px;
                flex-direction: column;
            }

            .login-footer-credit {
                position: relative;
                left: auto;
                bottom: auto;
                transform: none;
                margin: 18px auto 0;
                padding-bottom: 8px;
            }
        }

/* AuditTrack V87: inline login feedback inside the submit area only. */
.login-submit-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
}

.login-inline-status {
    min-height: 1.35rem;
    margin-top: .6rem;
    padding: 0 .15rem;
    color: rgba(255, 255, 255, .74);
    font-size: .84rem;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--audit-motion-control-duration) var(--audit-motion-ease-standard),
                transform var(--audit-motion-control-duration) var(--audit-motion-ease-standard),
                color var(--audit-motion-control-duration) var(--audit-motion-ease-standard);
}

.login-inline-status:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.login-inline-status.is-success { color: #d9ffe9; }
.login-inline-status.is-error { color: #ffd9df; }

.btn-cu.is-loading {
    background: #a5677a;
    box-shadow: 0 0 0 4px rgba(232, 123, 152, .15);
}

.btn-cu.is-success {
    background: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, .16);
    animation: auditLoginSuccessPulse 520ms var(--audit-motion-ease-enter) backwards;
}

.btn-cu.is-error {
    background: #b02a37;
    box-shadow: 0 0 0 4px rgba(176, 42, 55, .16);
    animation: auditLoginErrorShake 360ms var(--audit-motion-ease-standard) backwards;
}

@keyframes auditLoginSuccessPulse {
    from { transform: scale(.985); opacity: .86; }
    55% { transform: scale(1.015); opacity: 1; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes auditLoginErrorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-cu.is-success,
    .btn-cu.is-error { animation: none !important; }
}

/* AuditTrack V118: mobile login responsive layout fix.
   ให้ footer "จัดทำโดย" อยู่ใน flow ของหน้าเมื่อเป็นมือถือ เพื่อไม่ถูกทับด้วย Safari/Chrome mobile toolbar
   และลด spacing ของ card ให้พอดีกับหน้าจอแนวตั้งโดยไม่ทำให้ desktop เปลี่ยนไป */
@media (max-width: 576px) {
    html,
    body.audit-auth-login {
        min-height: 100svh;
        min-height: 100dvh;
    }

    body.audit-auth-login {
        align-items: stretch;
        justify-content: center;
        flex-direction: column;
        box-sizing: border-box;
        padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
        background-attachment: scroll;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login-wrapper {
        width: 100%;
        max-width: 440px;
        padding: 0;
        margin: auto auto 12px;
    }

    .login-card {
        border-radius: 22px;
    }

    .login-header {
        padding: 28px 18px 20px;
    }

    .login-header h4 {
        font-size: clamp(1.35rem, 6.4vw, 1.8rem);
        line-height: 1.24;
        margin-bottom: 6px;
        letter-spacing: .2px;
    }

    .header-sub {
        font-size: clamp(.9rem, 3.6vw, 1.05rem);
        line-height: 1.38;
    }

    .form-container {
        padding: 28px 28px 24px;
    }

    .form-container .mb-4 {
        margin-bottom: 1.25rem !important;
    }

    .cu-label {
        font-size: clamp(.95rem, 3.8vw, 1.05rem);
        margin-bottom: 10px;
    }

    .input-group {
        min-height: 56px;
        border-radius: 14px;
    }

    .input-group-text {
        padding-left: 18px;
        padding-right: 12px;
        font-size: 1.15rem;
    }

    .form-control {
        min-height: 56px;
        padding: .75rem .9rem .75rem .35rem;
        font-size: 1rem;
        line-height: 1.25;
    }

    .btn-cu {
        min-height: 56px;
        margin-top: 14px;
        border-radius: 16px;
        font-size: 1.16rem;
    }

    .login-footer-credit {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        z-index: 2;
        width: 100%;
        max-width: 440px;
        margin: 8px auto 0;
        padding: 0 10px max(8px, env(safe-area-inset-bottom));
        font-size: clamp(.82rem, 3.4vw, .96rem);
        line-height: 1.35;
    }

    .login-footer-credit .credit-title {
        margin-bottom: 3px;
        font-size: 1em;
    }

    .login-footer-credit .credit-th,
    .login-footer-credit .credit-en {
        display: block;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 390px) {
    body.audit-auth-login {
        padding-left: 12px;
        padding-right: 12px;
    }

    .login-header {
        padding: 24px 16px 18px;
    }

    .form-container {
        padding: 24px 24px 22px;
    }

    .login-card {
        border-radius: 20px;
    }
}

@media (max-width: 576px) and (max-height: 740px) {
    body.audit-auth-login {
        justify-content: flex-start;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .login-wrapper {
        margin: 0 auto 8px;
    }

    .login-header {
        padding: 22px 16px 16px;
    }

    .login-header h4 {
        font-size: clamp(1.25rem, 5.8vw, 1.55rem);
    }

    .form-container {
        padding: 22px 24px 20px;
    }

    .form-container .mb-4 {
        margin-bottom: 1rem !important;
    }

    .input-group,
    .form-control,
    .btn-cu {
        min-height: 52px;
    }

    .btn-cu {
        margin-top: 12px;
    }

    .login-footer-credit {
        margin-top: 6px;
        font-size: .78rem;
        line-height: 1.3;
    }
}

@media (max-width: 360px) and (max-height: 700px) {
    .login-header {
        padding-top: 20px;
        padding-bottom: 14px;
    }

    .form-container {
        padding: 20px 20px 18px;
    }

    .login-footer-credit {
        font-size: .74rem;
    }
}

/* AuditTrack V119: lock mobile login vertical composition.
   เป้าหมาย: บนมือถือให้ตำแหน่ง card และข้อความ "จัดทำโดย" คงที่ใกล้เคียงภาพตัวอย่าง
   โดยใช้ svh เพื่อไม่แกว่งตามการซ่อน/แสดง browser toolbar มากเกินไป */
@media (max-width: 576px) {
    html,
    body.audit-auth-login {
        min-height: 100svh;
    }

    body.audit-auth-login {
        min-height: 100svh;
        height: 100svh;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
            minmax(86px, 1fr)
            auto
            minmax(66px, .68fr)
            auto
            minmax(34px, .34fr);
        align-content: stretch;
        justify-items: center;
        align-items: start;
        padding: max(10px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .login-wrapper {
        grid-row: 2;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        align-self: end;
    }

    .login-footer-credit {
        grid-row: 4;
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 0 10px;
        align-self: center;
    }
}

@media (max-width: 576px) and (min-height: 741px) {
    body.audit-auth-login {
        grid-template-rows:
            minmax(98px, 1fr)
            auto
            minmax(78px, .7fr)
            auto
            minmax(42px, .36fr);
    }
}

@media (max-width: 576px) and (max-height: 740px) {
    body.audit-auth-login {
        height: auto;
        min-height: 100svh;
        grid-template-rows:
            minmax(26px, .45fr)
            auto
            minmax(20px, .22fr)
            auto
            minmax(16px, .18fr);
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .login-wrapper,
    .login-footer-credit {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 390px) {
    body.audit-auth-login {
        padding-left: 12px;
        padding-right: 12px;
        grid-template-rows:
            minmax(76px, .9fr)
            auto
            minmax(52px, .5fr)
            auto
            minmax(28px, .25fr);
    }
}

/* AuditTrack V120: safer mobile login layout for browser autofill/keyboard overlays.
   Override V119 grid lock: keep the preferred visual balance, but allow the page to scroll
   when Safari/Chrome shows autofill bars or the software keyboard. */
@media (max-width: 576px) {
    html,
    body.audit-auth-login {
        min-height: 100svh !important;
        height: auto !important;
    }

    body.audit-auth-login {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(22px, 4.6svh, 42px) !important;
        padding: clamp(44px, 9svh, 84px) 16px max(30px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-top: max(20px, env(safe-area-inset-top)) !important;
        scroll-padding-bottom: max(140px, env(safe-area-inset-bottom)) !important;
        background-attachment: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .login-wrapper {
        width: 100% !important;
        max-width: min(92vw, 440px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
    }

    .login-card {
        width: 100% !important;
        border-radius: clamp(20px, 5vw, 28px) !important;
        overflow: hidden !important;
    }

    .login-header {
        padding: clamp(26px, 5.5svh, 42px) 18px clamp(18px, 3.2svh, 28px) !important;
    }

    .login-header h4 {
        font-size: clamp(1.45rem, 6.3vw, 1.85rem) !important;
        line-height: 1.22 !important;
    }

    .header-sub {
        font-size: clamp(.92rem, 3.7vw, 1.08rem) !important;
        line-height: 1.35 !important;
    }

    .form-container {
        padding: clamp(26px, 5.2svh, 38px) clamp(24px, 7vw, 40px) clamp(26px, 4.8svh, 38px) !important;
    }

    .form-container .mb-4 {
        margin-bottom: clamp(1.05rem, 3svh, 1.4rem) !important;
    }

    .input-group,
    .form-control,
    .btn-cu {
        min-height: 56px !important;
    }

    .form-control {
        font-size: 16px !important; /* prevent iOS zoom and reduce autofill overlap */
        line-height: 1.3 !important;
    }

    .btn-cu {
        margin-top: clamp(14px, 2.5svh, 22px) !important;
        border-radius: 16px !important;
    }

    .login-footer-credit {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: min(92vw, 440px) !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        flex: 0 0 auto !important;
        font-size: clamp(.82rem, 3.35vw, .96rem) !important;
        line-height: 1.35 !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, .22) inset !important;
    }
}

@media (max-width: 576px) and (max-height: 740px) {
    body.audit-auth-login {
        gap: 16px !important;
        padding-top: max(20px, env(safe-area-inset-top)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }

    .login-header {
        padding-top: 22px !important;
        padding-bottom: 16px !important;
    }

    .form-container {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    .input-group,
    .form-control,
    .btn-cu {
        min-height: 52px !important;
    }

    .login-footer-credit {
        font-size: .78rem !important;
    }
}

@media (max-width: 576px) and (max-height: 640px) {
    body.audit-auth-login {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        gap: 12px !important;
    }

    .login-header h4 {
        font-size: 1.32rem !important;
    }

    .form-container .mb-4 {
        margin-bottom: .85rem !important;
    }
}

/* AuditTrack V121: mobile login footer micro-position adjustment.
   ขยับข้อความ "จัดทำโดย" ลงเล็กน้อยเฉพาะ responsive mobile ตามตำแหน่งที่ผู้ใช้เลือก
   โดยไม่แตะ layout desktop และยังคงรองรับ browser autofill / keyboard overlay. */
@media (max-width: 576px) {
    .login-footer-credit {
        margin-top: clamp(8px, 1.45svh, 14px) !important;
    }
}

@media (max-width: 576px) and (max-height: 740px) {
    .login-footer-credit {
        margin-top: 6px !important;
    }
}

@media (max-width: 576px) and (max-height: 640px) {
    .login-footer-credit {
        margin-top: 4px !important;
    }
}