/*
 * แป้นกดรหัสพนักงานหน้า /login — เครื่องแคชเชียร์/แท็บเล็ตในร้านกดด้วยนิ้ว
 *
 * ออกแบบตามภาพที่เจ้าของส่งมา: ช่องแสดงรหัสด้านบน เส้นประคั่น แล้วปุ่มสี่เหลี่ยมมุมมน 3 คอลัมน์
 * ปุ่มใหญ่พอกดด้วยนิ้วโป้งบนแท็บเล็ต (ขั้นต่ำ 72px) และไม่มี hover เป็นหลัก เพราะจอสัมผัสไม่มี hover
 * ไฟล์นี้โหลดตรงจาก public/ — โปรเจกต์นี้ไม่ได้ใช้ Vite (ดู CLAUDE.md)
 */

.kp-wrap {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f7fafc;
}

.kp-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16, 42, 67, .08);
    padding: 26px 26px 30px;
}

.kp-head {
    text-align: center;
    margin-bottom: 18px;
}

.kp-head h1 {
    font-size: 20px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0 0 4px;
}

.kp-head p {
    font-size: 14px;
    color: #7a8a99;
    margin: 0;
}

/* ช่องแสดงรหัสที่กด — โชว์เป็นจุด ไม่โชว์ตัวเลข (รหัสนี้คือรหัสเข้าระบบ คนข้างหลังแอบดูได้) */
.kp-display {
    height: 74px;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 30px;
    letter-spacing: 10px;
    color: #4a5c6b;
    background: #fff;
    user-select: none;
}

.kp-display.is-empty::after {
    content: 'กดรหัสพนักงาน';
    font-size: 15px;
    letter-spacing: normal;
    color: #b6c2cd;
}

.kp-divider {
    border-top: 1px dashed #cfd8e0;
    margin: 18px 0;
}

.kp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.kp-key {
    appearance: none;
    border: 0;
    border-radius: 8px;
    background: #79c0dc;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    min-height: 86px;
    cursor: pointer;
    transition: transform .06s ease, filter .12s ease;
    /* กันเบราว์เซอร์ซูม/เลือกข้อความตอนกดรัว ๆ บนจอสัมผัส */
    touch-action: manipulation;
    user-select: none;
}

.kp-key:active {
    transform: scale(.97);
    filter: brightness(.94);
}

.kp-key:focus-visible {
    outline: 3px solid #1f6f91;
    outline-offset: 2px;
}

.kp-key--action {
    background: #9fd0e6;
    font-size: 17px;
}

.kp-key--enter {
    background: #3f9fc4;
    font-size: 17px;
    font-weight: 600;
}

.kp-key[disabled] {
    opacity: .55;
    cursor: default;
}

/* ข้อความผิดพลาด (รหัสผิด / ชนเพดาน) — ต้องอ่านออกจากระยะยืนหน้าเครื่องแคชเชียร์ */
.kp-error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #a4251b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 15px;
    margin-bottom: 16px;
    text-align: center;
}

.kp-alt {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.kp-alt a {
    color: #3f8fb4;
    text-decoration: none;
}

.kp-alt a:hover {
    text-decoration: underline;
}

/* ฟอร์มอีเมล (ทางสำรอง/เครื่องนอกร้าน) ใช้การ์ดใบเดียวกัน */
.kp-field {
    text-align: left;
    margin-bottom: 14px;
}

.kp-field label {
    display: block;
    font-size: 14px;
    color: #55697a;
    margin-bottom: 6px;
}

.kp-field input {
    width: 100%;
    height: 46px;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 17px;
    color: #1f2d3d;
}

.kp-field input:focus {
    outline: 2px solid #79c0dc;
    outline-offset: 0;
    border-color: #79c0dc;
}

.kp-submit {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 8px;
    background: #3f9fc4;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 400px) {
    .kp-card {
        padding: 20px 16px 24px;
    }

    .kp-key {
        min-height: 72px;
        font-size: 22px;
    }
}