/* ===== หน้าเข้าสู่ระบบ /signin =====
   scope ด้วย .sgn-page ทั้งหมด ไม่กระทบหน้าอื่นที่ใช้ .btn-submit / .white-block-verify ร่วมกัน
   สีหลักอิงธีม tenant (--theme-color-primary) ถ้า tenant ไม่ได้ประกาศไว้ใช้สีน้ำเงินแทน

   ข้อห้าม: อย่าเพิ่ม class ให้ #password — js/signin/signin.js เทียบ class ทั้งสตริงแบบตรงตัว
   ("form-control form-control-password" / "... active") เพื่อสลับแสดงรหัสผ่าน
   จึงจัดสไตล์ช่องกรอกผ่าน selector .sgn-page .sgn-field แทน */

.sgn-page {
    --sgn-primary: var(--theme-color-primary, #007bff);
    --sgn-radius: 14px;
    padding: 8px 12px 32px;
}

.sgn-page .white-block-verify.sgn-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 32px 28px 26px;
    border: 1px solid #E5E7EB;
    border-radius: var(--sgn-radius);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
    text-align: left;
}

/* ── หัวการ์ด: โลโก้ + ชื่อ tenant ── */
.sgn-brand {
    text-align: center;
    margin-bottom: 22px;
}

.sgn-logo {
    display: block;
    max-width: 150px;
    max-height: 64px;
    margin: 0 auto 16px;
    object-fit: contain;
}

.sgn-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.sgn-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: #6B7280;
}

/* ── ช่องกรอก ── */
.sgn-field {
    position: relative;
    margin-bottom: 16px;
}

.sgn-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.sgn-field .sgn-input-icon {
    position: absolute;
    left: 14px;
    bottom: 0;
    height: 46px;
    display: flex;
    align-items: center;
    color: #9CA3AF;
    font-size: 15px;
    pointer-events: none;
    transition: color .2s ease;
}

.sgn-field .form-control {
    height: 46px;
    padding-left: 42px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sgn-field .form-control-password {
    padding-right: 48px;
}

.sgn-field .form-control:focus {
    border-color: var(--sgn-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04), 0 0 0 1px var(--sgn-primary);
}

.sgn-field:focus-within .sgn-input-icon {
    color: var(--sgn-primary);
}

/* ช่องที่ JS ติด class required ตอนกรอกไม่ครบ/ผิด */
.sgn-field .form-control.required {
    border-color: #DC2626;
}

/* ปุ่มโปร่งใสทับไอคอนตาของช่องรหัสผ่าน (ไอคอนมาจาก background ของ .form-control-password) */
.sgn-field .btn-show-password {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 46px;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.sgn-forgot {
    margin: -6px 0 18px;
    text-align: right;
}

.sgn-forgot .forget-password {
    font-size: 14px;
    color: var(--sgn-primary);
    font-weight: 600;
}

/* ── ปุ่ม ── */
.sgn-page .btn-submit,
.sgn-page .btn-submit-register,
.sgn-page .btn-login-line,
.sgn-page .btn-attach-slip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0 0 12px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: filter .2s ease, background-color .2s ease;
}

.sgn-page .btn-submit {
    background: var(--sgn-primary);
    border: 1px solid var(--sgn-primary);
    color: #FFFFFF;
}

.sgn-page .btn-submit:hover:not(:disabled) {
    filter: brightness(.94);
}

/* สมัครสมาชิกเป็นปุ่มรอง ให้เห็นลำดับความสำคัญชัดกว่าเดิมที่สีเหมือนกันทั้งคู่ */
.sgn-page .btn-submit-register {
    background: #FFFFFF;
    border: 1.5px solid var(--sgn-primary);
    color: var(--sgn-primary);
}

.sgn-page .btn-submit-register:hover:not(:disabled) {
    background: #F9FAFB;
}

.sgn-page .btn-login-line {
    background: #06C755;
    border: 0;
    color: #FFFFFF !important;
}

.sgn-page .btn-login-line:hover:not(:disabled) {
    filter: brightness(.95);
}

.sgn-page .btn-login-line img {
    width: 22px;
    height: 22px;
}

.sgn-page .btn-attach-slip {
    background: #FFFFFF;
    border: 1px dashed #D1D5DB;
    color: #4B5563 !important;
    font-size: 15px;
    font-weight: 500;
}

.sgn-page .btn-attach-slip:hover:not(:disabled) {
    background: #F9FAFB;
}

.sgn-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 16px;
    font-size: 13px;
    color: #9CA3AF;
}

.sgn-divider::before,
.sgn-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

.sgn-register-hint {
    margin: 4px 0 10px;
    text-align: center;
    font-size: 14px;
    color: #6B7280;
}

/* แจ้งเตือนเมื่อระบบหมดอายุทดลองใช้ (ปุ่มถูก disable ไว้อยู่แล้ว เดิมไม่มีคำอธิบาย) */
.sgn-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #FEF2F2;
    color: #991B1B;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .sgn-page {
        padding: 0 4px 24px;
    }

    .sgn-page .white-block-verify.sgn-card {
        padding: 26px 18px 20px;
        box-shadow: none;
    }

    .sgn-title {
        font-size: 20px;
    }
}