/* ปรับแต่งหน้าตาปฏิทินให้มินิมอลแบบ Google Calendar */

.fc-header-toolbar {
  margin-bottom: 20px !important;
}

.fc-button-primary {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  border-radius: 30px !important;
  padding: 6px 16px !important;
}

.fc-button-primary:hover {
  background-color: #4338ca !important;
}

.fc-button-active {
  background-color: #3730a3 !important;
}

.fc-event {
  cursor: pointer;
  border: none !important;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fc-daygrid-day.fc-day-today {
  background-color: #eff6ff !important;
}

.fc-col-header-cell {
  background-color: #f8fafc;
  padding: 10px 0 !important;
  font-weight: bold;
}

/* ตั้งค่า Palette สีแบบ Google Calendar */
.color-picker-container {
  gap: 12px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.color-swatch.selected {
  color: white;
  /* โชว์ไอคอนติ๊กถูกสีขาว */
  transform: scale(1.1);
}

/* ดักสีเหลืองและสีชมพูอ่อน ให้ติ๊กถูกเป็นสีเข้มจะได้มองเห็นชัด */
.color-swatch[data-color="#f6bf26"].selected,
.color-swatch[data-color="#e67c73"].selected {
  color: #1f2937;
}

/* ซ่อน Scrollbar ของตารางปฏิทิน */
.fc-scroller::-webkit-scrollbar {
  display: none;
}

.fc-scroller {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* 1. จัดตำแหน่งกรอบด้านบนของช่องให้อยู่กึ่งกลาง */
.fc-daygrid-day-top {
  display: flex;
  justify-content: center !important;
  padding-top: 5px;
  /* เว้นระยะจากขอบบนนิดหน่อยให้สวยงาม */
}

/* 2. ปรับรูปร่างตัวเลขวันที่ให้พร้อมเป็นวงกลม */
.fc-daygrid-day-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* ทำให้ขอบมนเป็นวงกลม 100% */
  text-decoration: none !important;
  color: #475569;
  font-weight: 500;
  margin-top: 2px;
  transition: background-color 0.2s;
  position: relative;
  /* เพื่อรองรับ animation */
}

/* 3. เอฟเฟกต์เมื่อเอาเมาส์ชี้ตัวเลข (เสริมให้ดูสมูท) */
.fc-daygrid-day-number:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

/* 4. สไตล์เฉพาะสำหรับ "วันนี้" (Today) สร้างวงกลมสีน้ำเงินพร้อมแอนิเมชัน */
.fc-day-today .fc-daygrid-day-number {
  background-color: #4f46e5 !important;
  /* สีน้ำเงิน */
  color: #ffffff !important;
  /* ตัวหนังสือสีขาว */
  font-weight: bold;
}

/* 5. สร้างเอฟเฟกต์วงกลมกระพริบด้วย ::after */
.fc-day-today .fc-daygrid-day-number::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(79, 70, 229, 0.4);
  /* สีน้ำเงินโปร่งแสง */
  animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  z-index: -1;
}

/* ลบพื้นหลังและกรอบของปุ่มนำทางทั้งหมด */
.fc .fc-toolbar .fc-button-primary {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #4f46e5 !important; /* เปลี่ยนสีลูกศรและตัวอักษรที่นี่ */
  box-shadow: none !important;
  padding: 5px 10px !important;
  border-radius: 0 !important;
}

/* ทำให้ปุ่มไม่มีสีเทาเวลาโดนกด */
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: transparent !important;
  color: #3730a3 !important; /* สีเมื่อกด */
  box-shadow: none !important;
}

/* ทำให้ปุ่มดูเป็นแค่ Icon เวลาเอาเมาส์ไปชี้ */
.fc .fc-button-primary:hover {
  background-color: rgba(79, 70, 229, 0.1) !important;
  border-radius: 5px !important;
}

/* ถ้าอยากให้ปุ่ม 'วันนี้' (Today) ดูเด่นขึ้นนิดนึง ให้เพิ่มบรรทัดนี้ */
.fc .fc-today-button {
  font-weight: bold;
}

/* 6. กำหนดแอนิเมชัน pulse */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  80%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 7. ลบพื้นหลังสีฟ้าอ่อนทั้งช่องของ "วันนี้" (ของเดิม) ออก เพื่อให้วงกลมเด่นขึ้น */
.fc-daygrid-day.fc-day-today {
  background-color: #ffffff !important;
}

/* ---------------------------------------------------
   ไล่เฉดสีหัวตาราง (Days Header) แบบ Gradient สวยๆ
   --------------------------------------------------- */

/* วันอาทิตย์ (แดง - ชมพู) */
.fc-col-header-cell.fc-day-sun {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}

/* วันจันทร์ (เหลือง - ครีม) */
.fc-col-header-cell.fc-day-mon {
  background: linear-gradient(135deg, #fdf6ad 0%, #fef9d7 100%) !important;
}

/* วันอังคาร (ชมพู - ขาว) */
.fc-col-header-cell.fc-day-tue {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%) !important;
}

/* วันพุธ (เขียว - ฟ้าใส) */
.fc-col-header-cell.fc-day-wed {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
}

/* วันพฤหัสบดี (ส้ม - เหลือง) */
.fc-col-header-cell.fc-day-thu {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}

/* วันศุกร์ (ฟ้า - น้ำเงิน) */
.fc-col-header-cell.fc-day-fri {
  background: linear-gradient(35deg, #a1c4fd 0%, #c2e9fb 100%) !important;
}

/* วันเสาร์ (ม่วง - ชมพู) */
.fc-col-header-cell.fc-day-sat {
  background: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%) !important;
}

/* ปรับแต่งตัวอักษรให้ดูคมชัดขึ้นบน Gradient */
.fc-col-header-cell .fc-scrollgrid-sync-inner {
  color: #4a4a4a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  font-weight: 700 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.holiday-actions {
  visibility: hidden;
}

/* ซ่อนไว้ก่อน */
.fc-event:hover .holiday-actions {
  visibility: visible;
}

/* ให้โชว์ตอนเอาเมาส์ไปชี้ */

/* ---------------------------------------------------
   ปรับแต่ง Modal ให้เป็นแบบไร้กรอบ (No Box) และนุ่มนวล
   --------------------------------------------------- */

/* 1. ตัวกรอบ Modal โค้งมนและมีมิติสไตล์ macOS */
.modal-content {
  border-radius: 24px !important;
  border: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* 2. ซ่อน Scrollbar ทั้งหมด แต่ยังใช้นิ้ว/เมาส์เลื่อนได้ปกติ */
.modal-body::-webkit-scrollbar {
  width: 5px; /* ขนาดความกว้างบางๆ */
}
.modal-body::-webkit-scrollbar-track {
  background: transparent; /* พื้นหลังโปร่งใส */
}
.modal-body::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* สีเทาอ่อนๆ สบายตา */
  border-radius: 10px; /* ขอบมน */
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8; /* สีเข้มขึ้นนิดนึงตอนเอาเมาส์ชี้ */
}
.modal-body {
  padding: 24px 30px !important;
  overflow-y: auto !important; /* บังคับให้มี Scrollbar ถ้าเนื้อหาล้นจอ */
  flex: 1 1 auto; /* สั่งให้เนื้อหาตรงกลางยืด-หดอัตโนมัติ */
}

/* 3. ปรับ Input และ Textarea ให้ไร้เส้นขอบ (No Box) */
.modal-body .form-control {
  border: none !important;
  background-color: #f1f5f9 !important; /* สีเทาอมฟ้าอ่อนๆ สบายตา */
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-size: 0.95rem;
  color: #334155 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease;
}

/* เอฟเฟกต์เวลากดคลิกพิมพ์ */
.modal-body .form-control:focus {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important; /* เรืองแสงสีน้ำเงินอ่อน */
}

/* 4. เอาลูกศร Dropdown ออก เพื่อความคลีน */
.modal-body select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 5. ปรับ Label ให้เล็กลงและสีซอฟต์ลง ไม่แย่งความสนใจ */
.modal-body label {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 600 !important;
}

/* 6. ปรับกล่องแสดงผู้สร้างกิจกรรมให้เนียนไปกับพื้นหลัง */
#creator_info {
  background-color: transparent !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px;
  color: #64748b;
}

/* 7. ปรับสัดส่วน Footer และปุ่มให้ดูกว้างและกดง่ายขึ้น */
.modal-footer {
  padding: 15px 30px 24px 30px !important;
  border-top: none !important; /* เอาเส้นคั่น Footer ออก */
}
.modal-footer .btn {
  padding: 8px 24px !important;
  font-weight: 600;
}

/* ทำให้ช่อง Input ใน Modal ดูเหมือนข้อความปกติเมื่อถูก disabled */
#eventForm input:disabled,
#eventForm textarea:disabled {
  background: #f8fafc !important;
  border: 1px solid transparent !important;
  color: #475569 !important;
  font-weight: 500;
}