/* includes/style.css */

.ibm-plex-sans-thai-light {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-thai-regular {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-thai-medium {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-thai-semibold {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-thai-bold {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
    font-family: 'IBM Plex Sans Thai', sans-serif; /* เพิ่ม 'sans-serif' */
    margin: 0;
    background-color: #f4f4f4;
    display: flex; /* ใช้ flexbox จัด layout หลัก */
}

#sidebar {
    width: 250px; /* กำหนดความกว้างของ Sidebar ของคุณ */
    background-color: #333; /* สีพื้นหลัง */
    color: white; /* สีข้อความ */
    padding: 20px 0; /* padding ด้านบนและล่าง (ด้านข้างเป็น 0 เพราะจะใช้ padding ในรายการเมนู) */
    position: fixed; /* ทำให้ Sidebar ติดอยู่กับหน้าจอ */
    height: 100vh; /* ทำให้ Sidebar สูงเต็มความสูงของ Viewport */
    overflow-y: auto; /* **สำคัญ:** ถ้าเนื้อหาใน Sidebar เกินความสูง ให้มี Scrollbar เฉพาะ Sidebar */
    display: flex;
    flex-direction: column; /* จัดองค์ประกอบภายในเป็นคอลัมน์ */
    box-sizing: border-box; /* ทำให้ padding และ border ไม่เพิ่มขนาดของ Sidebar */
}
#sidebar h2 {
    text-align: center;
    margin-bottom: 20px;
}
#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* **สำคัญ:** ทำให้ส่วนเมนูขยายเต็มพื้นที่ที่เหลือ ดันส่วน user-info-section ลงไป */
    /* อาจไม่จำเป็นต้องมี overflow-y: auto; ที่นี่ ถ้า #sidebar มีแล้ว */
}
#sidebar ul li a {
    display: block;
    padding: 10px 20px; /* padding ซ้ายขวาของแต่ละเมนู */
    color: white;
    text-decoration: none;
    transition: background-color 0.2s;
}
#sidebar ul li a:hover,
#sidebar ul li a.active {
    background-color: #007bff; /* สีเมื่อ hover หรือ active */
}

/* สำหรับส่วน Admin Menu */
.admin-menu-section {
    margin-top: 20px; /* เพิ่มระยะห่างด้านบนจากเมนูก่อนหน้า */
    padding-top: 15px; /* เพิ่ม padding ด้านบน */
    border-top: 1px solid #eee; /* เพิ่มเส้นแบ่งเพื่อแยกส่วน */
}

/* อาจจะต้องกำหนดให้ ul ภายใน admin-menu-section มีคุณสมบัติเดียวกันกับ ul หลัก */
.admin-menu-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu-section ul li a {
    /* ใช้รูปแบบเดียวกับเมนูปกติ หรือปรับแต่งตามต้องการ */
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.admin-menu-section ul li a:hover,
.admin-menu-section ul li a.active {
    background-color: #007bff;
    color: #fff;
}
.user-info-section {
    /* ส่วนนี้จะถูกดันลงไปด้านล่างสุดของ #sidebar */
    padding: 15px 20px; /* เพิ่ม padding ให้เท่ากับเมนูเพื่อความสวยงาม */
    border-top: 1px solid #eee; /* เพิ่มเส้นแบ่ง */
    text-align: center;
    margin-top: 10px; /* เว้นระยะห่างจากเมนูด้านบน */
}
.user-info-section span {
    display: block; /* ให้ข้อความ "สวัสดี" ขึ้นบรรทัดใหม่ */
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #ccc;
}
.user-info-section a {
    display: inline-block; /* ทำให้ลิงก์อยู่บรรทัดเดียวกันกับข้อความถ้าจำเป็น หรือ block เพื่อให้แยกบรรทัด */
    margin-top: 5px;
    background-color: #dc3545; /* สีปุ่มออกจากระบบ (สีแดง) */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.user-info-section a:hover {
    background-color: #c82333;
}
#content {
    flex-grow: 1; /* ให้ content ขยายเต็มพื้นที่ที่เหลือ */
    padding: 20px;
    margin-left: 250px; /* เพิ่มระยะห่างระหว่าง sidebar กับ content */
}
.container {
    max-width: 100%; /* ให้ container ใน content ขยายเต็ม */
    margin: 0; /* ลบ margin เดิมออก */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
}

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ddd; padding: 2px; text-align: left; }
th { background-color: #f2f2f2; }
.action-buttons a {
    display: inline-block;
    padding: 2px 5px;
    margin-right: 2px;
    text-decoration: none;
    color: white;
    border-radius: 4px;
}
.add-link, .edit-btn, .view-btn { background-color: #007bff; }
.add-link:hover, .edit-btn:hover, .view-btn:hover { background-color: #0056b3; }
.delete-btn { background-color: #dc3545; }
.delete-btn:hover { background-color: #c82333; }
.add-product-link, .add-sale-link, .add-stock-in-link {
    display: block;
    margin-bottom: 0px;
    text-align: right;
}
.add-product-link a, .add-sale-link a, .add-stock-in-link a {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
}
.add-product-link a:hover, .add-sale-link a:hover, .add-stock-in-link a:hover {
    background-color: #218838;
}
.message { margin-bottom: 15px; }
/* สไตล์สำหรับฟอร์มทั่วไป */
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="number"], textarea, select {
    width: calc(100% - 12px);
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
input[type="submit"]:hover {
    background-color: #45a049;
}
.item-row { display: flex; align-items: center; margin-bottom: 10px; }
.item-row select, .item-row input { flex: 1; margin-right: 10px; }
.item-row .remove-item-btn {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.item-row .remove-item-btn:hover { background-color: #c82333; }
.section-title { margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.total-summary {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    text-align: right;
}
.total-summary div { margin-bottom: 5px; }
.total-summary strong { font-size: 1.2em; }
.total-summary input[type="number"] { width: 150px; text-align: right; }


/* --- ส่วนสำหรับ Filter Form ของ Report --- */
.report-filter-form {
    margin-bottom: 5px; /* ระยะห่างด้านล่าง */
    padding: 10px; /* ระยะห่างภายในกล่อง */
    border: 1px solid #e0e0e0; /* ขอบสีอ่อนลง */
    border-radius: 8px; /* มุมโค้งมน */
    background-color: #fcfcfc; /* สีพื้นหลังอ่อนๆ */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* เพิ่มเงาเล็กน้อย */
}

.report-filter-form form {
    display: flex; /* ใช้ Flexbox สำหรับจัดเรียงองค์ประกอบในฟอร์ม */
    flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ */
    gap: 15px 20px; /* ระยะห่าง: row-gap 15px, column-gap 20px */
    align-items: flex-end; /* จัดปุ่มให้อยู่บรรทัดเดียวกับช่อง input */
    justify-content: flex-start; /* จัดเรียงจากซ้ายไปขวา */
}

.report-filter-form .filter-group {
    display: flex;
    flex-direction: column; /* จัด label และ input ในแนวตั้ง */
    flex-grow: 1; /* ทำให้ filter-group ขยายเต็มพื้นที่ที่เหลือ */
    flex-basis: calc(25% - 20px); /* ประมาณ 4 ช่องต่อแถว (100%/4 - gap) */
    max-width: 250px; /* กำหนดความกว้างสูงสุดที่เหมาะสม */
}

.report-filter-form label {
    font-weight: 600; /* ตัวหนา */
    margin-bottom: 2px; /* ระยะห่างจาก input */
    color: #555; /* สีตัวอักษร */
    white-space: nowrap; /* ป้องกันไม่ให้ข้อความ label ขึ้นบรรทัดใหม่ */
    font-size: 0.9em; /* ลดขนาด font ของ label เล็กน้อย */
}

.report-filter-form input[type="date"],
.report-filter-form input[type="text"],
.report-filter-form select {
    padding: 5px 8px; /* เพิ่ม padding เล็กน้อย */
    border: 1px solid #ccc; /* ขอบสีเทา */
    border-radius: 5px; /* มุมโค้งมน */
    font-size: 16px; /* ขนาดตัวอักษร */
    transition: border-color 0.2s; /* Animation เมื่อ focus */
    width: 100%; /* ให้เต็มความกว้างของ filter-group */
    box-sizing: border-box; /* รวม padding และ border ในความกว้าง */
    background-color: #ffffff; /* พื้นหลังสีขาว */
}

.report-filter-form input[type="date"]:focus,
.report-filter-form input[type="text"]:focus,
.report-filter-form select:focus {
    border-color: #007bff; /* เปลี่ยนสีขอบเมื่อ focus */
    outline: none; /* ลบ outline ที่เป็นค่าเริ่มต้นของ browser */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* เพิ่มเงาเมื่อ focus */
}

.report-filter-form .action-button {
    margin-top: auto; /* ดันปุ่มลงมาด้านล่างสุดของ flex item เพื่อให้ align กับ input */
}

.report-filter-form button[type="submit"] {
    padding: 10px 20px; /* เพิ่ม padding ให้ปุ่มใหญ่ขึ้น */
    background-color: #007bff; /* สีน้ำเงิน */
    color: white; /* ตัวอักษรขาว */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation ปุ่ม */
}

.report-filter-form button[type="submit"]:hover {
    background-color: #0056b3; /* สีเข้มขึ้นเมื่อโฮเวอร์ */
    transform: translateY(-1px); /* ยกขึ้นเล็กน้อยเมื่อโฮเวอร์ */
}

/* --- Responsive Adjustments สำหรับหน้าจอขนาดเล็ก --- */
@media (max-width: 992px) { /* สำหรับ Tablet */
    .report-filter-form .filter-group {
        flex-basis: calc(33.33% - 20px); /* 3 ช่องต่อแถว */
    }
}

@media (max-width: 768px) { /* สำหรับ Mobile */
    .report-filter-form form {
        flex-direction: column; /* จัดเรียงแนวตั้งเมื่อหน้าจอเล็ก */
        align-items: stretch; /* ให้เต็มความกว้าง */
    }

    .report-filter-form .filter-group {
        width: 100%; /* ให้ filter-group เต็มความกว้าง */
        max-width: unset; /* ยกเลิก max-width */
    }
    
    .report-filter-form input[type="date"],
    .report-filter-form input[type="text"],
    .report-filter-form select {
        width: 100%; /* ให้ input/select เต็มความกว้างของ filter-group */
        min-width: unset; /* ลบ min-width ออก */
    }

    .report-filter-form button[type="submit"] {
        width: 100%; /* ปุ่มเต็มความกว้าง */
        margin-top: 10px; /* เพิ่มระยะห่างด้านบน */
    }
}
/* ใน includes/style.css */

/* --- สไตล์สำหรับปุ่มพิมพ์รายงาน (เดิม) --- */
.report-filter-form .print-button {
    padding: 10px 20px;
    background-color: #28a745; /* สีเขียว */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 120px; /* กำหนดความกว้างขั้นต่ำ */
}

.report-filter-form .print-button:hover {
    background-color: #218838; /* สีเขียวเข้มขึ้นเมื่อโฮเวอร์ */
    transform: translateY(-1px); /* ยกขึ้นเล็กน้อยเมื่อโฮเวอร์ */
}

.report-filter-form .print-button:active {
    transform: translateY(0); /* กลับมาตำแหน่งเดิมเมื่อคลิก */
    background-color: #1e7e34; /* สีเขียวเข้มสุดเมื่อ active */
}

/* ปรับปรุง Responsive สำหรับปุ่มพิมพ์ใน Report */
@media (max-width: 768px) {
    .report-filter-form .print-button {
        width: 100%; /* ให้ปุ่มเต็มความกว้างในมือถือ */
        margin-top: 10px; /* เพิ่มระยะห่างด้านบน */
    }
}

/* --- สไตล์สำหรับปุ่มพิมพ์ทั่วไป (เพิ่มใหม่สำหรับ pos_detail.php และอื่นๆ) --- */
.print-button {
    background-color: #007bff; /* สีน้ำเงิน */
    color: white;
    padding: 12px 25px; /* เพิ่มขนาด padding ให้ใหญ่ขึ้น */
    border: none;
    border-radius: 8px; /* ทำให้ปุ่มมนขึ้น */
    cursor: pointer;
    font-size: 17px; /* ขนาดตัวอักษรใหญ่ขึ้นเล็กน้อย */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* เพิ่ม transition สำหรับ hover effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ปุ่มดูมีมิติ */
    text-transform: uppercase; /* ตัวพิมพ์ใหญ่ */
    letter-spacing: 0.8px; /* เพิ่มระยะห่างตัวอักษรเล็กน้อย */
    display: inline-flex; /* ใช้ flexbox เพื่อจัดไอคอนและข้อความให้อยู่ตรงกลาง */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    gap: 8px; /* ระยะห่างระหว่างไอคอนและข้อความ */
}

.print-button:hover {
    background-color: #0056b3; /* สีน้ำเงินเข้มขึ้นเมื่อ hover */
    transform: translateY(-3px); /* ปุ่มขยับขึ้นเล็กน้อยเมื่อ hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* เงาเข้มขึ้นเมื่อ hover */
}

.print-button:active {
    background-color: #004085; /* สีน้ำเงินเข้มมากเมื่อกด */
    transform: translateY(0); /* ปุ่มกลับสู่ตำแหน่งเดิมเมื่อกด */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เงาลดลงเมื่อกด */
}

/* เพิ่มไอคอน (ถ้าคุณต้องการใช้ Font Awesome) */
/* หากยังไม่ได้รวม Font Awesome ใน project คุณจะต้องเพิ่ม CDN Link ใน <head> ของ header.php ก่อน */
/* ตัวอย่าง: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> */
.print-button i.fas.fa-print {
    font-size: 18px; /* ขนาดไอคอน */
}

/* ปรับปรุง Responsive สำหรับปุ่มพิมพ์ทั่วไป */
/* ใช้ได้ทั้งบน Desktop และ Mobile เพื่อจัดปุ่มให้อยู่ตรงกลาง */
.print-button-container {
    display: flex; /* เปิดใช้งาน Flexbox */
    justify-content: center; /* จัดให้อยู่กึ่งกลางในแนวนอน */
    margin-top: 20px; /* ระยะห่างด้านบน (จากเดิมมีใน HTML แต่ย้ายมาที่ CSS ดีกว่า) */
    /* text-align: center; /* ลบบรรทัดนี้ออก เพราะ flexbox จะจัดการแทน */
}

@media (max-width: 768px) {
    .print-button-container {
        /* ไม่ต้องมี text-align: center; ซ้ำอีก เพราะ display: flex + justify-content: center ทำงานได้ดีกว่า */
    }
    .print-button {
        width: 100%; /* ให้ปุ่มเต็มความกว้างในมือถือ */
        padding: 15px 0; /* เพิ่ม padding ในแนวตั้ง */
        font-size: 18px; /* ขนาดตัวอักษรใหญ่ขึ้นในมือถือ */
    }
}

/* includes/style.css */

/* --- สไตล์สำหรับส่วนควบคุมปุ่มเพิ่มรายการสินค้า (จัดชิดซ้าย) --- */
.add-item-row-controls {
    display: flex; /* เปิดใช้งาน Flexbox */
    justify-content: flex-start; /* จัดให้อยู่ชิดซ้ายในแนวนอน */
    margin-top: 20px; /* เพิ่มระยะห่างด้านบนเล็กน้อย */
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่างเล็กน้อย */
}

/* --- สไตล์สำหรับปุ่ม "เพิ่มรายการสินค้า" --- */
.add-item-row-button {
    background-color: #007bff; /* สีน้ำเงิน */
    color: white;
    padding: 10px 20px; /* ขนาด padding */
    border: none;
    border-radius: 5px; /* มุมโค้งมน */
    cursor: pointer;
    font-size: 16px; /* ขนาดตัวอักษร */
    font-weight: 600; /* ตัวหนา */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* เพิ่ม transition สำหรับ hover effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ปุ่มดูมีมิติ */
    display: inline-flex; /* ใช้ flexbox เพื่อจัดไอคอนและข้อความให้อยู่ตรงกลาง */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    gap: 8px; /* ระยะห่างระหว่างไอคอนและข้อความ */
}

.add-item-row-button:hover {
    background-color: #0056b3; /* สีน้ำเงินเข้มขึ้นเมื่อ hover */
    transform: translateY(-2px); /* ปุ่มขยับขึ้นเล็กน้อยเมื่อ hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นเมื่อ hover */
}

.add-item-row-button:active {
    background-color: #004085; /* สีน้ำเงินเข้มมากเมื่อกด */
    transform: translateY(0); /* ปุ่มกลับสู่ตำแหน่งเดิมเมื่อกด */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* เงาลดลงเมื่อกด */
}

/* สไตล์สำหรับไอคอนภายในปุ่ม */
.add-item-row-button i {
    font-size: 18px; /* ขนาดไอคอน */
}

/* Responsive ปรับขนาดเมื่อหน้าจอเล็ก (ตัวอย่าง) */
@media (max-width: 768px) {
    .add-item-row-controls {
        justify-content: center; /* จัดให้อยู่กึ่งกลางในมือถือ (ตามความเหมาะสม) */
        /* หรือจะคง flex-start ไว้ก็ได้ถ้าต้องการชิดซ้ายเสมอ */
    }
    .add-item-row-button {
        width: 100%; /* ให้ปุ่มเต็มความกว้างในมือถือ */
        padding: 12px 0; /* เพิ่ม padding ในแนวตั้ง */
        font-size: 17px; /* ขนาดตัวอักษรปรับให้เหมาะสม */
    }
}

---
/* includes/style.css */

/* --- สไตล์สำหรับ Container ของปุ่ม "กลับ" --- */
.back-button-container {
    margin-top: 30px; /* เพิ่มระยะห่างด้านบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
    text-align: left; /* จัดให้อยู่ชิดซ้าย (ค่าเริ่มต้น แต่ระบุให้ชัดเจน) */
}

/* --- สไตล์สำหรับปุ่ม "กลับ" --- */
.back-button {
    background-color: #6c757d; /* สีเทา (สีกลางๆ สำหรับปุ่มที่ไม่ใช่ primary action) */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* เพิ่มเงา */
    display: inline-flex; /* ใช้ flexbox เพื่อจัดไอคอนและข้อความ */
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่างไอคอนและข้อความ */
}

.back-button:hover {
    background-color: #5a6268; /* สีเทาเข้มขึ้นเมื่อ hover */
    transform: translateY(-2px); /* ปุ่มขยับขึ้นเล็กน้อย */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้น */
}

.back-button:active {
    background-color: #494f54; /* สีเทาเข้มสุดเมื่อกด */
    transform: translateY(0); /* ปุ่มกลับสู่ตำแหน่งเดิม */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เงาลดลง */
}

/* สไตล์สำหรับไอคอนภายในปุ่ม */
.back-button i {
    font-size: 18px; /* ขนาดไอคอน */
}

/* Responsive ปรับขนาดเมื่อหน้าจอเล็ก */
@media (max-width: 768px) {
    .back-button-container {
        text-align: center; /* จัดกึ่งกลางในมือถือ */
    }
    .back-button {
        width: 100%; /* ให้ปุ่มเต็มความกว้างในมือถือ */
        padding: 12px 0;
        font-size: 17px;
    }
}

/* CSS สำหรับการออกแบบเมนู (คุณอาจจะย้ายไปอยู่ในไฟล์ includes/style.css ก็ได้ครับ) */
/* includes/style.css */ /* <--- ลบคอมเมนต์นี้ทิ้งไปก็ได้ เพราะตอนนี้อยู่ใน includes/style.css แล้ว */

/*
   *** START: Dashboard Menu Styles (Corrected & Compact) ***
   โปรดตรวจสอบให้แน่ใจว่ามีเพียงบล็อกนี้เท่านั้นที่กำหนดสไตล์สำหรับ .dashboard-menu และ .menu-item
   ในไฟล์ includes/style.css ของคุณ ลบบล็อกอื่นที่ซ้ำกันออกทั้งหมด
*/

.dashboard-menu {
    display: flex;
    justify-content: center;
    gap: 25px; /* ลดระยะห่างระหว่างปุ่มเล็กน้อย */
    margin-top: 35px; /* ลดระยะห่างจากด้านบนเล็กน้อย */
    flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่เมื่อหน้าจอเล็ก */
}

.menu-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px 25px; /* ลด padding ลง */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    width: 250px; /* ลดความกว้างปุ่ม */
    box-sizing: border-box;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

.menu-item .icon {
    font-size: 32px; /* ลดขนาดไอคอน/Emoji */
    margin-bottom: 5px; /* ลดระยะห่างจากข้อความ */
    /* สีของ Emoji จะมีสีในตัว ไม่สามารถเปลี่ยนด้วย CSS color ได้ */
}

.menu-item h3 {
    margin: 0;
    font-size: 20px; /* ลดขนาดหัวข้อ */
    font-weight: 600;
}

.menu-item p {
    font-size: 14px; /* ลดขนาดข้อความย่อย */
    color: #666;
    margin-top: 8px; /* ลดระยะห่างเล็กน้อย */
}

/* Responsive ปรับขนาดเมื่อหน้าจอเล็ก */
@media (max-width: 768px) {
    .dashboard-menu {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* ลดระยะห่างในมือถือ */
        margin-top: 25px; /* ปรับ margin-top ในมือถือ */
    }
    .menu-item {
        width: 90%; /* เพิ่มความกว้างในมือถือเล็กน้อย */
        max-width: 300px; /* คง max-width เดิม หรือปรับตามต้องการ */
        padding: 18px 20px; /* ลด padding ในมือถือ */
    }
    .menu-item .icon {
        font-size: 40px; /* ลดขนาดไอคอนในมือถือ */
    }
    .menu-item h3 {
        font-size: 18px; /* ลดขนาดหัวข้อในมือถือ */
    }
    .menu-item p {
        font-size: 13px; /* ลดขนาดข้อความย่อยในมือถือ */
    }
}

/* --- สไตล์สำหรับสีไอคอนเฉพาะ (หากคุณยังใช้ Font Awesome) --- */
/* หากคุณเปลี่ยนไอคอนเป็น Emoji แล้ว ส่วนนี้จะไม่ส่งผลต่อสีไอคอน แต่คุณสามารถเก็บไว้ได้หากมีการใช้ Font Awesome ในที่อื่น */
/*
.menu-item.pos-sales .icon { }
.menu-item.stock-in .icon { }
.menu-item.product-management .icon { color: #17a2b8; }
.menu-item.category-management .icon { color: #6f42c1; }
.menu-item.report-sales .icon { color: #fd7e14; }
.menu-item.report-stock-in .icon { color: #20c997; }
.menu-item.report-stock .icon { color: #dc3545; }
*/

/*
   *** END: Dashboard Menu Styles (Corrected & Compact) ***
   (เหลือเฉพาะบล็อกนี้เท่านั้นที่เกี่ยวข้องกับ dashboard menu)
*/

/* --- สไตล์สำหรับสีไอคอนเฉพาะ (ถ้ายังคงใช้ Font Awesome) --- */
/* หากคุณเปลี่ยนไอคอนเป็น Emoji แล้ว ส่วนนี้จะไม่ส่งผลต่อสีไอคอน แต่คุณสามารถเก็บไว้ได้หากมีการใช้ Font Awesome ในที่อื่น */
.menu-item.pos-sales .icon {
    /* Emoji 🛒 มีสีในตัว */
}

.menu-item.stock-in .icon {
    /* Emoji 📦 มีสีในตัว */
}

.menu-item.product-management .icon {
    /* Emoji 📦 มีสีในตัว */
}

.menu-item.category-management .icon {
    /* Emoji 🏷️ มีสีในตัว */
}

.menu-item.report-sales .icon {
    /* Emoji 📈 มีสีในตัว */
}

.menu-item.report-stock-in .icon {
    /* Emoji 🧾 มีสีในตัว */
}

.menu-item.report-stock .icon {
    /* Emoji 📊 มีสีในตัว */
}

/* --- Login Page Styles --- */

/* Background for the entire login page (optional: full screen background) */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Make body at least viewport height */
    background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); /* Blue-Purple Gradient */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px; /* Padding for small screens */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Hide header/sidebar/footer if you want a completely standalone login page */
/* You might remove header and footer includes from login.php for this */
.login-page #sidebar,
.login-page #content .container,
.login-page footer {
    display: none;
}
/* If you keep header/footer, adjust their display or context */

/* Login container for centering */
.login-container {
    width: 100%;
    max-width: 400px; /* Max width of the login card */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Login Card (the white box) */
.login-card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Deeper shadow */
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
}

.login-card h2 {
    color: #333;
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: 600;
}

/* Form Group for labels and inputs */
.login-card .form-group {
    margin-bottom: 20px;
    text-align: left; /* Align labels left */
}

.login-card label {
    display: block; /* Make label take full width */
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
    font-size: 16px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%; /* Take full width of parent */
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box; /* Include padding in width calculation */
    transition: border-color 0.3s ease;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    border-color: #007bff; /* Highlight on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

/* Submit button */
.login-card .form-actions {
    margin-top: 30px;
}

.login-card input[type="submit"] {
    background-color: #007bff; /* Primary blue */
    color: white;
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    width: 80%; /* Adjust button width */
    max-width: 250px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-card input[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Error message styling */
.login-card .error-message {
    color: #dc3545; /* Red color for errors */
    font-size: 15px;
    margin-top: -10px; /* Adjust spacing */
    margin-bottom: 20px;
    font-weight: 500;
}

.footer-copyright {
    text-align: center; /* จัดข้อความให้อยู่กึ่งกลาง */
    position: absolute; /* กำหนดตำแหน่งแบบ absolute เพื่อให้จัดตำแหน่งได้อิสระ */
    bottom: 20px; /* ห่างจากขอบล่าง 20px */
    width: 100%; /* กำหนดความกว้างเต็มหน้าจอ */
    color: #FFFFFF; /* สีข้อความ (ปรับได้ตามต้องการ) */
    font-size: 1.2em; /* ขนาดตัวอักษร (ปรับได้ตามต้องการ) */
}

/* includes/style.css */

/* สไตล์สำหรับกล่องเตือนสินค้าสต็อกเหลือน้อย */
.low-stock-alert {
    background-color: #fff3cd; /* สีพื้นหลังเหลืองอ่อน */
    border: 1px solid #ffeeba; /* ขอบสีเหลือง */
    color: #664d03; /* สีข้อความ */
    padding: 20px;
    margin-top: 25px; /* เว้นระยะห่างด้านบน */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* เงาเล็กน้อย */
}

.low-stock-alert h3 {
    color: #cc0000; /* สีแดงเข้มสำหรับหัวข้อเตือน */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    display: flex; /* เพื่อจัด icon กับ text ให้อยู่ในบรรทัดเดียวกัน */
    align-items: center; /* จัดให้อยู่ตรงกลางตามแนวตั้ง */
}

.low-stock-alert h3 .icon {
    margin-right: 10px; /* ระยะห่างระหว่าง icon กับ text */
}

.low-stock-alert p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.low-stock-alert table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

.low-stock-alert th,
.low-stock-alert td {
    border: 1px solid #ddd;
    padding: 2px;
    text-align: center;
}

.low-stock-alert th {
    background-color: #f7e6a7; /* สีพื้นหลังของ header ตาราง */
    font-weight: bold;
}

.low-stock-alert td a.edit-btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
}

.low-stock-alert td a.edit-btn:hover {
    background-color: #0056b3;
}

/* สไตล์สำหรับกล่องแจ้งว่าไม่มีสินค้าเหลือน้อย */
.no-low-stock-alert {
    background-color: #d4edda; /* สีพื้นหลังเขียวอ่อน */
    border: 1px solid #c3e6cb; /* ขอบสีเขียว */
    color: #155724; /* สีข้อความเข้ม */
    padding: 15px;
    margin-top: 25px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

/* เพิ่ม CSS สำหรับโลโก้บนหน้า Login */
.login-card .login-logo {
    display: block; /* ทำให้รูปภาพเป็น block-level เพื่อจัดให้อยู่ตรงกลางได้ง่าย */
    max-width: 300px; /* กำหนดความกว้างสูงสุดของโลโก้ (ปรับตามขนาดรูปจริง) */
    height: auto; /* รักษาอัตราส่วนของรูปภาพ */
    margin: 0 auto 20px auto; /* จัดให้อยู่ตรงกลางแนวนอน และมีระยะห่างด้านล่าง */
    /* ถ้าโลโก้มีพื้นหลังโปร่งใสและคุณต้องการให้ดูดีบนพื้นหลังต่างๆ
       อาจเพิ่ม border-radius หรือ box-shadow เล็กน้อย
       border: 1px solid #eee;
       box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    */
}

/* --- Styles สำหรับ Filter Form ใน product_list.php --- */

.filter-form-container {
    background-color: #f0f8ff; /* สีพื้นหลังอ่อนๆ */
    border: 1px solid #d0e8f8;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 5px; /* ระยะห่างจากตารางด้านล่าง */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.filter-form {
    display: flex; /* ใช้ Flexbox เพื่อจัดเรียงองค์ประกอบในแนวนอน */
    flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่ได้ถ้าหน้าจอเล็ก */
    gap: 15px; /* ระยะห่างระหว่างองค์ประกอบ */
    align-items: flex-end; /* จัดให้ปุ่มอยู่ด้านล่างของช่องกรอก */
}

.filter-form .form-group {
    display: flex;
    flex-direction: column; /* Label อยู่บน Input */
    flex: 1; /* ให้แต่ละ form-group ขยายได้ */
    min-width: 180px; /* ความกว้างขั้นต่ำของแต่ละช่องกรอง */
}

.filter-form .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.filter-form .form-group input[type="text"],
.filter-form .form-group select {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box; /* รวม padding/border ในความกว้าง */
}

.filter-form .filter-btn,
.filter-form .clear-filter-btn {
    padding: 8px 16px;
    border: none;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.filter-form .filter-btn {
    background-color: #007bff; /* สีน้ำเงินสำหรับปุ่มค้นหา */
    color: white;
}

.filter-form .filter-btn:hover {
    background-color: #0056b3;
}

.filter-form .clear-filter-btn {
    background-color: #6c757d; /* สีเทาสำหรับปุ่มล้างตัวกรอง */
    color: white;
    text-decoration: none; /* ลบขีดเส้นใต้สำหรับลิงก์ */
    display: inline-block; /* ทำให้สามารถกำหนด padding ได้ */
    text-align: center;
}

.filter-form .clear-filter-btn:hover {
    background-color: #5a6268;
}

/* ปรับ responsive สำหรับหน้าจอเล็ก */
@media (max-width: 768px) {
    .filter-form {
        flex-direction: column; /* เรียงแบบเป็นคอลัมน์บนจอเล็ก */
        align-items: stretch;
    }
    .filter-form .form-group {
        width: 100%;
    }
    .filter-form .filter-btn,
    .filter-form .clear-filter-btn {
        width: 100%;
    }
}

/* เพิ่มเติม: อาจจะต้องปรับแต่งตารางให้ดูดีขึ้น */
.product-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-table th,
.product-table td {
    border: 1px solid #ddd;
    padding: 2px 4px; /* เพิ่ม padding เพื่อความสูงและอ่านง่าย */
    text-align: left;
}

.product-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}

.product-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* แถวสลับสี */
}

.product-table tbody tr:hover {
    background-color: #e9e9e9; /* สีเมื่อเมาส์โอเวอร์ */
}
.product-table a {
	text-decoration: none; /* เพิ่มบรรทัดนี้เพื่อลบขีดเส้นใต้ */
}
/* คุณอาจต้องการให้มีขีดเส้นใต้กลับมาเมื่อเมาส์ชี้ (hover) เพื่อให้ผู้ใช้รู้ว่ามันคือลิงก์ */
.product-table a:hover {
    text-decoration: underline; /* เพิ่มขีดเส้นใต้เมื่อเมาส์ชี้ */
}
.product-table .action-buttons a {
	text-decoration: none; /* เพิ่มบรรทัดนี้เพื่อลบขีดเส้นใต้ */
    margin-right: 8px; /* ระยะห่างระหว่างปุ่มในเซลล์เดียวกัน */
}

.price-input-group {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.price-input-group .price-item {
    flex: 1;
    min-width: 250px; /* หรือปรับตามความเหมาะสม */
    /* ถ้า label และ input ไม่ได้อยู่ติดกัน หรือมีปัญหาเรื่องการจัดวาง
       อาจจะต้องเพิ่ม display: flex; flex-direction: column; ให้ price-item ด้วย */
}

/* สไตล์สำหรับ label ใน group นี้ (ถ้าจำเป็น) */
.price-input-group .price-item label {
    display: block; /* ทำให้ label อยู่บรรทัดของตัวเอง */
    margin-bottom: 5px; /* ระยะห่างระหว่าง label กับ input */
    font-weight: bold; /* ทำให้ label ชัดขึ้น */
}

/* สไตล์สำหรับ input ใน group นี้ (ถ้าจำเป็น) */
.price-input-group .price-item input[type="number"] {
    width: 100%; /* ให้ input เต็มความกว้างของ price-item */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* สำคัญ: ทำให้ padding ไม่เพิ่มความกว้างเกิน */
}

/* Style for the new Cancel button */
.cancel-btn {
    background-color: #ffc107; /* Amber/Orange color for caution */
    color: #333; /* Darker text for contrast on lighter button */
    padding: 5px 4px; /* Consistent with other table action buttons */
    margin-right: 2px; /* Consistent with other table action buttons */
    margin-top: 0px; /* ระยะห่างระหว่าง label กับ input */
    text-decoration: none;
    border-radius: 4px; /* Consistent with other table action buttons */
    cursor: pointer;
    font-size: inherit; /* Inherit font size from parent table */
    border: none; /* Ensure no border */
    transition: background-color 0.2s, transform 0.2s; /* Add smooth transition */
    display: inline-block; /* To allow padding/margins */
}

.cancel-btn:hover {
    background-color: #e0a800; /* Darker amber on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

.cancel-btn:active {
    background-color: #c99200; /* Even darker on active */
    transform: translateY(0); /* Return to normal position */
}

/* Style for the Delete button (Red Tone) */

.delete-btn {
    background-color: #dc3545; /* สีแดงหลัก (Red) */
    color: white; /* สีข้อความขาว */
    padding: 5px 4px; /* คงขนาด padding เดิม */
    margin-right: 2px; /* คง margin-right เดิม */
    margin-top: 0px; /* คง margin-top เดิม */
    text-decoration: none;
    border-radius: 4px; /* คง border-radius เดิม */
    cursor: pointer;
    font-size: inherit; /* คง font-size เดิม */
    border: none; /* คง border เดิม */
    transition: background-color 0.2s, transform 0.2s; /* คง transition เดิม */
    display: inline-block; /* คง display เดิม */
}

.delete-btn:hover {
    background-color: #c82333; /* สีแดงเข้มขึ้นเมื่อ hover */
    transform: translateY(-1px); /* คง effect hover เดิม */
}

.delete-btn:active {
    background-color: #bd2130; /* สีแดงเข้มสุดเมื่อ active */
    transform: translateY(0); /* คง effect active เดิม */
}