@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Kanit', 'Sarabun', sans-serif;
}

body {
  background: linear-gradient(160deg, #eef2ff 0%, #faf5ff 45%, #fdf4ff 100%);
  min-height: 100vh;
}

.brand-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
}

.card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -12px rgba(79, 70, 229, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.5);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}
.chip-green { background: #dcfce7; color: #166534; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-rose { background: #ffe4e6; color: #9f1239; }
.chip-indigo { background: #e0e7ff; color: #3730a3; }
.chip-gray { background: #f1f5f9; color: #475569; }

.nav-link {
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  font-weight: 500;
  color: #4338ca;
  transition: background 0.15s ease;
}
.nav-link:hover { background: #eef2ff; }
.nav-link.active { background: #4f46e5; color: white; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 999px; }

.table-modern th {
  background: #f5f3ff;
  color: #5b21b6;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.9rem;
  /* ตรึงแถวหัวตารางไว้ตอนเลื่อนดูข้อมูลด้านล่าง — ต้องอยู่ในกรอบ .table-scroll ถึงจะทำงาน
     (ถ้ากรอบนอกตั้ง overflow-x อย่างเดียว sticky จะอ้างอิงกรอบนั้นซึ่งไม่เลื่อนแนวตั้ง หัวตารางจึงไม่ติด) */
  position: sticky;
  top: -1px;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #ddd6fe;
}
.table-modern td {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid #f1f5f9;
}
.table-modern tr:hover td { background: #faf9ff; }

/* ตรึงคอลัมน์แรก (ชื่อพนักงาน) ไว้ตอนเลื่อนตารางไปทางขวา — ต้องมีพื้นหลังทึบไม่งั้นข้อความคอลัมน์อื่นจะทะลุขึ้นมา */
.table-scroll .table-modern td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;
  box-shadow: 1px 0 0 #e2e8f0;
}
/* หัวตารางช่องซ้ายสุดตรึงทั้งสองแกน จึงต้องอยู่ชั้นบนสุด (สูงกว่าหัวตารางอื่น z-index 2 และเซลล์คอลัมน์แรก z-index 1) */
.table-scroll .table-modern th:first-child {
  left: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 #ddd6fe, 1px 0 0 #e2e8f0;
}
.table-scroll .table-modern tr:hover td:first-child { background: #faf9ff; }

/* กรอบสำหรับตารางข้อมูล: เลื่อนได้ทั้งแนวนอนและแนวตั้งภายในกรอบ ทำให้หัวตารางตรึงอยู่กับที่ */
.table-scroll {
  overflow: auto;
  /* ความสูงจริงถูกปรับให้พอดีจอด้วย fitTableScrollAreas() ใน admin-nav.js — ค่านี้เป็นค่าสำรองกรณีสคริปต์ไม่ทำงาน */
  max-height: calc(100vh - 250px);
  min-height: 180px;
}