body { 
  background: #f4f6f9; 
  font-family: 'Sarabun', sans-serif; 
  padding-bottom: 90px; 
  font-size: 16px; 
  overscroll-behavior-y: none; /* ป้องกันดึงหน้าจอรีเฟรชบนโมบาย */
}

.card-custom { 
  border-radius: 20px; 
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); 
  margin-bottom: 20px;
  background: #ffffff;
}

/* 🎨 ดีไซน์หน้า Admin */
.admin-card {
  border-radius: 20px;
  border: none; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1e293b, #334155);
}

/* เมนูบาร์ด้านล่าง */
.bottom-nav { 
  position: fixed; bottom: 0; left: 0;
  right: 0; 
  background: rgba(255, 255, 255, 0.95); 
  backdrop-filter: blur(10px);
  display: flex; justify-content: space-around; 
  padding: 12px 10px 20px 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08); 
  z-index: 1000;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.nav-btn { 
  background: none; border: none; color: #adb5bd; 
  font-size: 0.75rem; text-align: center;
  width: 25%; 
  transition: all 0.3s ease;
}
.nav-btn.active { color: #0d6efd; font-weight: bold; transform: translateY(-2px); }
.nav-btn i { font-size: 1.4rem; display: block; margin-bottom: 4px; transition: all 0.3s ease; }
.nav-btn.active i { transform: scale(1.1); }

.form-select, .form-control { border-radius: 12px; border: 1px solid #dee2e6; }
.form-select:focus, .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); border-color: #86b7fe; }

.btn { border-radius: 12px; transition: all 0.2s ease; }
.btn:active { transform: scale(0.98); }
.btn-check:checked + .btn-outline-success { background-color: #198754; color: white; border-color: #198754; box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3); }
.btn-check:checked + .btn-outline-danger { background-color: #dc3545; color: white; border-color: #dc3545; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); }

#previewImage { width: 100%; border-radius: 15px; margin-top: 15px; display: none; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border: 2px solid #fff; }

.badge-status { font-size: 0.8rem; padding: 6px 12px; border-radius: 20px; white-space: nowrap; font-weight: 500;}
.req-label { color: #dc3545; font-size: 0.75rem; }
.input-error { border-color: #dc3545 !important; background-color: #fff8f8; }
.error-text { display: none; color: #dc3545; font-size: 0.8rem; margin-top: 4px; }

.table { margin-bottom: 0; }
.table th { background-color: #f8f9fa; font-weight: 600; color: #495057; border-bottom: 2px solid #dee2e6; font-size: 0.85rem;}
.table td { vertical-align: middle; font-size: 0.85rem; }

.spinner-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: #6c757d; }

/* 🌟 Skeleton Loading Effect */
.shimmer-row {
  height: 35px;
  background: linear-gradient(90deg, #eff1f3 25%, #e2e5e7 50%, #eff1f3 75%);
  background-size: 200% 100%;
  animation: shimmerAnimation 1.5s infinite linear;
  margin-bottom: 10px;
  border-radius: 8px;
}
@keyframes shimmerAnimation {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 🖨️ ระบบ Print เฉพาะรายงาน HR (ซ่อนส่วนอื่นทั้งหมด) */
.show-on-print-only { display: none; }

@media print {
  body { background: white !important; padding-bottom: 0 !important; }
  .hide-on-print { display: none !important; }
  .show-on-print-only { display: block !important; }
  .admin-card { background: white !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
  .print-area { padding: 0 !important; }
  .table th { background-color: #eee !important; color: black !important; border: 1px solid #ccc !important; }
  .table td { border: 1px solid #ccc !important; color: black !important; }
  #page-checkin, #page-today, #page-stats, #admin-auth { display: none !important; }
  #page-admin, #admin-panel { display: block !important; }
}