.grid {
    display: grid;
    grid-template-columns: 145px 40px 145px;
    /* ปรับคอลัมน์กลางให้กว้าง 20px */
    grid-template-rows: 190px 190px 40px 190px 190px;
    /* ปรับแถวกลางให้กว้าง 40px */
    gap: 0;
    /* เพิ่มระยะห่างระหว่าง grid */
    justify-content: center;
    /* จัด grid ให้อยู่ตรงกลาง */
    /* padding: 16px; เพิ่มพื้นที่รอบ grid */
    padding-top: 45px; /* reserve space for status-updated row */
}

/* Status updated label (top center) */
#page-status { position: relative; }
.status-updated {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

/* Prevent wrapping and truncate if too long */
.status-updated {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 48px);
}

.dryer_18-01 {
    grid-column: 1;
    grid-row: 1;
}

.washer_18-01 {
    grid-column: 1;
    grid-row: 2;
}

.dryer_13-02 {
    grid-column: 3;
    grid-row: 1;
}

.washer_13-02 {
    grid-column: 3;
    grid-row: 2;
}

.dryer_13-03 {
    grid-column: 1;
    grid-row: 4;
}

.washer_13-03 {
    grid-column: 1;
    grid-row: 5;
}

.dryer_13-04 {
    grid-column: 3;
    grid-row: 4;
}

.washer_13-04 {
    grid-column: 3;
    grid-row: 5;
}

.card {
    background-color: transparent;
    /* เปลี่ยนพื้นหลังของ card ให้โปร่งใส */
    border: none;
    /* เพิ่มเส้นขอบเพื่อให้ดูเหมือนการ์ด */
    border-radius: 12px;
    padding: 12px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    /* จัดข้อความในแนวตั้ง (บน-ล่าง) */
    align-items: center;
    justify-content: center;
    box-shadow: none;
    /* เพิ่มเงาเพื่อให้ดูเหมือนการ์ด */
    /* width: 100%; เพิ่มความกว้างของ card ให้ใหญ่ขึ้น */
    /* max-width: 300px; กำหนดความกว้างสูงสุดเพื่อให้ดูสมดุล */
    word-wrap: break-word;
    /* ทำให้ข้อความตัดบรรทัดอัตโนมัติ */
    text-align: center;
    /* ใช้รูป wash machine.png เป็นพื้นหลัง */
    background-size: cover;
    /* ปรับขนาดรูปให้ครอบคลุมการ์ด */
    background-position: center;
    /* จัดรูปให้อยู่ตรงกลาง */
    position: relative;
    /* ใช้ position เพื่อจัดวางข้อความ */
}

.card .machine-name,
.machine-name-weight {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* เพิ่มสีพื้นหลังให้ข้อความชื่อเครื่อง */
    color: black;
    /* เปลี่ยนสีข้อความเป็นสีขาวเพื่อความชัดเจน */
    padding: 4px 8px;
    /* เพิ่มพื้นที่ภายในข้อความ */
    border-radius: 12px;
    /* เพิ่มความโค้งมนให้พื้นหลัง */

    white-space: nowrap;
    /* บังคับให้ข้อความอยู่ในแถวเดียว */
    overflow: hidden;
    /* ซ่อนข้อความที่เกินขอบ */
    text-overflow: ellipsis;
    /* เพิ่ม ... เมื่อข้อความยาวเกิน */
}

.card .machine-name {
    top: 16%;
    left: 1%;
}

.card .machine-name-weight {
    top: 16%;
    left: 70%;
}

.card .wash-time {
    position: absolute;
    top: 49.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* จัดข้อความให้อยู่ตรงกลาง */
    font-size: 18px;
    font-weight: bold;
    color: black;
    /* ค่าเริ่มต้นเป็นสีแดง */
    padding: 4px 8px;
    /* เพิ่มพื้นที่ภายในข้อความ */

    border-radius: 50%;
    /* เปลี่ยนพื้นหลังให้เป็นวงกลม */
    background-color: rgba(255, 0, 0, 0.57);
    /* เพิ่มสีพื้นหลังให้ข้อความ */
    width: 71px;
    /* กำหนดความกว้างของวงกลม */
    height: 71px;
    /* กำหนดความสูงของวงกลม */
    display: flex;
    /* ใช้ Flexbox เพื่อจัดข้อความให้อยู่ตรงกลาง */
    align-items: center;
    justify-content: center;
}

.card .wash-time.available {
    background-color: rgba(0, 255, 30, 0.554);
    /* ถ้าสถานะเป็น "ว่าง" ให้เปลี่ยนเป็นสีเขียว */
}

.card .icon {
    position: absolute;
    top: 8%;
    left: 12%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.card .icon.dryer-icon {
    color: rgb(189, 123, 0);
    /* Orange for dryers */
}

.card .icon.washer-icon {
    color: rgb(0, 126, 148);
    /* Blue for washers */
}