/**
 * ระบบงานธุรการอิเล็กทรอนิกส์ โรงเรียนภูเขียว (Phukhieo School Administrative e-System)
 * ไฟล์: assets/css/style.css - รวบรวมสไตล์ชีตและงานตกแต่งธีมชมพูพาสเทล-ขาวสะอาดตา
 * แยกไฟล์ออกมาจาก HTML เพื่อให้ Browser Caching ช่วยให้เปิดหน้าเว็บได้เร็วยิ่งขึ้น
 */

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

body {
  font-family: 'Prompt', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff9fb; 
}

/* ซ่อน Scrollbar แต่ยังเลื่อนได้ */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ปุ่มเลือกแฟ้มที่กำลังเปิดใช้งาน (Active Tab) */
.active-tab {
  background-color: #f472b6; 
  color: #ffffff; 
  box-shadow: 0 4px 10px rgba(244, 114, 182, 0.4);
  border: 1px solid #ec4899; 
}

/* ปุ่มเลือกแฟ้มที่ไม่ได้เลือก (Inactive Tab) */
.inactive-tab {
  background-color: #ffffff; 
  color: #db2777; 
  border: 1px solid #fbcfe8; 
}

.inactive-tab:hover {
  background-color: #fff1f2; 
  color: #be185d; 
}

/* การ์ดสรุปสถิติตามหมวดหมู่ */
.card-doc01 {
  background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
  border-left: 8px solid #db2777;
}
.card-doc02 {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  border-left: 8px solid #16a34a;
}
.card-doc03 {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
  border-left: 8px solid #2563eb;
}
.card-doc04 {
  background: linear-gradient(135deg, #fffbeb 0%, #fef08a 100%);
  border-left: 8px solid #ca8a04;
}
.card-doc05 {
  background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
  border-left: 8px solid #7c3aed;
}

.stat-card-premium {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(244, 114, 182, 0.08);
}
.stat-card-premium:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(244, 114, 182, 0.2), 0 10px 10px -5px rgba(244, 114, 182, 0.12);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(136, 19, 55, 0.45); 
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-content {
  background-color: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid #fbcfe8; 
  box-shadow: 0 25px 50px -12px rgba(136, 19, 55, 0.25);
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

input:focus, select:focus, textarea:focus {
  border-color: #f472b6 !important;
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.3) !important;
}

/* Autocomplete คอนโทรลรายชื่อคุณครู */
.autocomplete-wrapper {
  position: relative;
}
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #fbcfe8;
  border-radius: 0.75rem;
  max-height: 220px;
  overflow-y: auto;
  z-index: 99;
  box-shadow: 0 10px 15px -3px rgba(136, 19, 55, 0.1);
}
.autocomplete-item {
  padding: 10px 14px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.autocomplete-item:hover {
  background-color: #fff1f2;
  color: #db2777;
}

/* Badge สถานะ */
.badge-status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.badge-pending {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.badge-assign {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.badge-acked {
  background-color: #e0e7ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.badge-done {
  background-color: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.badge-edit {
  background-color: #ffe4e6;
  color: #e11d48;
  border: 1px solid #fecdd3;
}