/* =================================================== */
/* 1. Global Reset & Compact Layout (ล้างค่าเริ่มต้นและการจัดโครงสร้างหน้าเว็บ) */
/* =================================================== */
:root {
    --nav-height: 40px;  /* สร้างตัวแปรเก็บความสูงเมนูบนไว้ที่ 40px */
    --primary-blue: #2a36b1; /*สีน้ำเงินพื้นหลังเมนู*/
    --accent-pink: #ff66b2; /* สร้างตัวแปรสีชมพูสำหรับเน้นจุดสำคัญ */
    --danger-red: #e74c3c; /* สร้างตัวแปรสีแดงสำหรับปุ่มอันตรายหรือ Log out */
}

body { 
    margin: 0 !important; /* ลบขอบขาวรอบตัวเว็บออกทั้งหมด */
    padding-top: var(--nav-height) !important; /* ดันเนื้อหาลงมาด้านบนเท่ากับความสูงเมนู (กันเมนูบังเนื้อหา) */
    padding-left: 0 !important; /* ไม่ให้มีการเว้นระยะห่างด้านซ้ายของตัวเว็บ */
    font-family: 'Sarabun', sans-serif; /* กำหนดแบบอักษรหลักเป็น Sarabun */
    background-color: #f0f9ff; /* กำหนดสีพื้นหลังเว็บเป็นสีเทาอ่อน */
    width: 100% !important; /* บังคับให้หน้าเว็บกว้างเต็มหน้าจอ 100% */
    overflow-x: hidden; /* ป้องกันไม่ให้เกิดแถบเลื่อนแนวนอน (กันหน้าเว็บเบี้ยว) */
	opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out;
}

#content { 
    width: 100% !important; 
    padding: 8px !important; 
    box-sizing: border-box; 
    /* ไล่เฉดสีเฉพาะในส่วนเนื้อหา */
    background: linear-gradient(180deg, #f0f9ff, #ffffff) !important;
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto; /* ถ้าตารางยาวเกินจอ จะเลื่อนซ้ายขวาได้ไม่เบี้ยว */
}

/* =================================================== */
/* 2. Top Navigation (แถบเมนูด้านบนแบบกะทัดรัด) */
/* =================================================== */
#header-nav {
    position: fixed; /* ตรึงแถบเมนูไว้ด้านบนสุดตลอดเวลาแม้จะเลื่อนหน้าจอลง */
    top: 0; /* ติดขอบบนสุด */
    left: 0; /* ติดขอบซ้ายสุด */
    right: 0; /* ติดขอบขวาสุด */
    height: var(--nav-height); /* กำหนดความสูงตามตัวแปรที่ตั้งไว้ (40px) */
    background-color: var(--primary-blue); /* ใส่สีพื้นหลังเมนูเป็นสีน้ำเงิน */
    display: flex; /* ใช้ระบบ Flexbox เพื่อจัดวางข้อมูลในเมนู */
    align-items: center; /* จัดให้ไอคอนและตัวหนังสืออยู่กึ่งกลางแนวตั้ง */
    justify-content: space-between; /* จัดให้โลโก้อยู่ซ้ายสุด และเมนูอื่นๆ อยู่ขวาสุด */
    padding: 0 5px; /* เว้นระยะห่างซ้าย-ขวา ด้านในแถบเมนูข้างละ 5px */
    z-index: 9999; /* ตั้งค่าลำดับชั้นสูงสุดเพื่อให้เมนูอยู่ทับทุกอย่างบนหน้าจอ */
}

.nav-logo {
    background-color: var(--accent-pink); /* สีพื้นหลังกล่องโลโก้เป็นสีชมพู */
    color: white; /* ตัวหนังสือโลโก้สีขาว */
    padding: 3px 8px; /* เว้นระยะห่างด้านในกล่องโลโก้ บนล่าง 3px ซ้ายขวา 8px */
    border-radius: 4px; /* ลบมุมกล่องโลโก้ให้โค้งมน 4px */
    text-decoration: none; /* ลบเส้นใต้ของโลโก้ที่เป็นลิงก์ออก */
    font-weight: bold; /* ตั้งตัวอักษรโลโก้ให้เป็นตัวหนา */
    font-size: 18px; /* ขนาดตัวอักษรโลโก้ 18px */
    flex-shrink: 0; /* ป้องกันไม่ให้โลโก้ถูกบีบให้เล็กลงเมื่อพื้นที่น้อย */
    transition: all 0.5s; /* ตั้งค่าหน่วงเวลาการเปลี่ยนแปลงทั้งหมดไว้ 0.5 วินาที */
}

.nav-links {
    display: flex; /* จัดเรียงลิงก์เมนูให้เรียงต่อกันในแนวนอน */
    gap: 6px; /* เว้นช่องว่างระหว่างแต่ละลิงก์ 8px */
    overflow-x: auto; /* หากเมนูยาวเกินหน้าจอ ให้สามารถใช้นิ้วเลื่อนซ้าย-ขวาได้ */
    padding: 5px 0; /* เว้นระยะห่างด้านบนและล่างในโซนเมนู 5px */
}

.nav-links a {
    color: #ffffff !important; /* ลิงก์เมนูสีขาว */
    text-decoration: none; /* ลบเส้นใต้ลิงก์เมนูออก */
    font-size: 12px; /* ขนาดตัวอักษรเมนู 12px */
    font-weight: 500; /* กำหนดความหนาตัวอักษรระดับปานกลาง */
    white-space: nowrap; /* ห้ามตัวหนังสือตัดบรรทัดใหม่ (ให้ยาวไปเรื่อยๆ) */
    transition: all 0.2s; /* เมื่อชี้เมนูให้เปลี่ยนสี/เอฟเฟกต์ในเวลา 0.2 วินาที */
}

/* =================================================== */
/* 3. ปุ่มนูนและเงา (เอฟเฟกต์การชี้และคลิก) */
/* =================================================== */
button, .btn-primary, .btn-logout, .nav-links a, .nav-logo {
    cursor: pointer; /* เมื่อเอาเมาส์ไปชี้ ให้เปลี่ยนรูปเมาส์เป็นรูปนิ้วมือ */
    border: none; /* ลบเส้นขอบเริ่มต้นของปุ่มออก */
}

/* สไตล์เมื่อเอาเมาส์ชี้ (Hover) */
button:hover, .btn-primary:hover, .btn-logout:hover, .nav-links a:hover, .nav-logo:hover {
    transform: translateY(-2px) !important; /* ขยับปุ่มลอยขึ้นด้านบน 2px ให้ดูเหมือนนูนขึ้น */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* เพิ่มเงาสีดำฟุ้งกระจายด้านล่างเพื่อมิติ */
    filter: brightness(1.1); /* ทำให้สีของปุ่มสว่างขึ้น 10% เมื่อชี้ */
}

/* สไตล์เมื่อกดปุ่ม (Active) */
button:active, .btn-primary:active, .btn-logout:active {
    transform: translateY(0px) !important; /* เมื่อกด ให้ปุ่มกลับมาอยู่ที่เดิม (เหมือนโดนกดลงไป) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* ลดขนาดเงาลงขณะกด */
}

.btn-logout {
    background-color: var(--danger-red) !important; /* ใส่พื้นหลังปุ่ม Log out เป็นสีแดง */
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
    padding: 3px 12px !important; /* เว้นระยะในปุ่ม บนล่าง 3px ซ้ายขวา 12px */
    border-radius: 15px !important; /* ทำให้ปุ่มโค้งมนทรงแคปซูล */
    font-size: 10px !important; /* ขนาดตัวหนังสือในปุ่ม 10px */
    font-weight: bold; /* ตัวหนังสือหนา */
    text-decoration: none; /* ลบเส้นใต้ */
}

/* =================================================== */
/* 4. Stats Cards & Fix กราฟไหล (การ์ดสถิติและการจัดการกราฟ) */
/* =================================================== */
.stats-container { 
    display: grid; /* จัดเรียงการ์ดแบบตาราง (Grid) */
    grid-template-columns: repeat(2, 1fr); /* แบ่งเป็น 2 คอลัมน์เท่ากัน (คอลัมน์ละ 1 ส่วน) */
    gap: 8px; /* เว้นระยะห่างระหว่างการ์ดแต่ละใบ 8px */
    margin-bottom: 15px; /* เว้นระยะห่างด้านล่างกลุ่มการ์ด 15px */

}

.card { 
    padding: 12px 5px; 
    border-radius: 8px; 
    transition: transform 0.2s; 
    /* เพิ่มเงาให้ Card นิดหน่อยจะดูสวยมากบนพื้นหลังสีม่วงอ่อน */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

.card:hover { transform: translateY(-3px); } /* เมื่อชี้การ์ด ให้การ์ดลอยขึ้น 3px */

.card h3 { 
    color: #ffffff !important; /* หัวข้อการ์ดสีขาว */
    font-size: 10px !important; /* ขนาดหัวข้อ 10px */
    margin-bottom: 2px !important; /* เว้นระยะห่างด้านล่างหัวข้อ 2px */
}

.card h1 { 
    color: #ffffff !important; /* ตัวเลขสถิติสีขาว */
    font-size: 24px !important; /* ขนาดตัวเลขตัวใหญ่ 24px */
    font-weight: bold !important; /* ตัวเลขหนาเข้ม */
    margin: 0 !important; /* ลบระยะขอบตัวเลขออก */
    border: none !important; /* ลบขอบรอบตัวเลข */
}

.chart-container { 
    background: white; /* พื้นหลังกล่องกราฟสีขาว */
    padding: 10px; /* เว้นระยะห่างด้านในกล่องกราฟ 10px */
    border-radius: 8px; /* ลบมุมกล่องกราฟ 8px */
    border: 1px solid #eee; /* ใส่เส้นขอบบางๆ สีเทาจางๆ */
    margin-bottom: 10px; /* เว้นระยะห่างด้านล่าง 10px */
    position: relative; /* ตั้งตำแหน่งอ้างอิงให้กราฟด้านใน */
    height: 250px !important; /* ล็อกความสูงกล่องกราฟที่ 220px เพื่อป้องกันกราฟขยายจนล้นหน้าจอ */
}

.chart-box {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    text-align: center;
}

table { 
    width: 100%; /* ตารางกว้างเต็มพื้นที่ */
    border-collapse: collapse; /* ยุบขอบตารางให้ชิดกัน */
    font-size: 12px !important; /* ตัวอักษรในตารางขนาด 12px */
}

th, td { 
    padding: 8px !important; /* เว้นระยะห่างในแต่ละช่องตาราง 8px */
    border-bottom: 1px solid #eee; /* ใส่เส้นคั่นบรรทัดด้านล่างสีเทาอ่อน */
    text-align: left; /* จัดข้อความในตารางให้ชิดซ้าย */
}

.nav-links::-webkit-scrollbar { 
    display: none; /* ซ่อนแถบเลื่อน (Scrollbar) ของเมนูใน Chrome และ Safari เพื่อความสวยงาม */
}