/* --- CSS การตั้งค่าทั่วไป --- */
/* หมายเหตุ: สไตล์ body / layout หลักอยู่ที่ assets/css/app.css แล้ว
   ไฟล์นี้เก็บเฉพาะสไตล์ของ Datepicker และการจัด z-index เท่านั้น
   เพื่อไม่ให้ทับกับ Bootstrap 5 */
.form-wrapper {
  max-width: 400px;
  margin: 50px auto;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.input-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.input-container label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #555;
}
/* เดิมมี .input-group { display:flex; gap:8px } ที่มาจากหน้าตัวอย่าง Datepicker
   ถูกลบออกเพราะทับ .input-group ของ Bootstrap 5 ที่ใช้อยู่ 33 จุดในระบบ */
.btn-clear {
  background-color: #ffe5e5;
  color: #d32f2f;
  border: 1px solid #ffcccc;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-clear:hover {
  background-color: #d32f2f;
  color: white;
}
/* ใช้เฉพาะช่องที่ไม่ได้เป็น .form-control ของ Bootstrap
   (ถ้าเป็น .form-control ให้ Bootstrap คุมขนาด/เส้นขอบเองเพื่อให้เท่ากับช่องอื่นในฟอร์ม) */
.thai-datepicker:not(.form-control) {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-submit {
  background-color: #1a3687;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}
.btn-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
#responseMessage {
  margin-top: 15px;
  text-align: center;
  font-weight: bold;
}

@keyframes fadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- CSS Datepicker Modal --- */
.datepicker-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  z-index: 99999;
  animation: fadeOverlay 0.2s ease-out;
}
.datepicker-modal {
  background: #ffffff;
  border-radius: 16px;
  width: 340px;
  max-width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popIn 0.3s ease-out;
  position: relative;
}
.dp-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #a0aec0;
  cursor: pointer;
  line-height: 1;
}
.dp-close-btn:hover {
  color: #1a3687;
}
.datepicker-header-display {
  padding: 24px 24px 16px 24px;
}
.dp-display-date {
  font-size: 32px;
  color: #1a3687;
  font-weight: bold;
}

/* ปุ่มทางลัด */
.datepicker-shortcuts {
  display: flex;
  gap: 8px;
  padding: 0 24px 16px 24px;
  flex-wrap: wrap;
}
.dp-shortcut {
  background-color: #f0f4ff;
  color: #1a3687;
  border: 1px solid #cce0ff;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: 0.2s;
}
.dp-shortcut:hover {
  background-color: #1a3687;
  color: #ffffff;
}

/* ปฏิทิน */
.datepicker-body {
  padding: 0 24px;
}
.datepicker-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dp-month-year {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dp-month-select,
.dp-year-select {
  color: #1a3687;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  transition: background-color 0.2s, border-color 0.2s;
}
.dp-month-select:hover,
.dp-year-select:hover {
  background-color: #f0f4ff;
  border-color: #cce0ff;
}
.dp-month-select:focus,
.dp-year-select:focus {
  outline: none;
  background-color: #e6f0ff;
  border-color: #1a3687;
  border-radius: 6px;
}
.dp-arrows button {
  background: none;
  border: none;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  padding: 4px 8px;
}
.dp-weekdays,
.dp-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dp-weekdays {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
}
.dp-days-grid {
  row-gap: 8px;
}
.dp-day {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.dp-day:hover {
  background-color: #f0f0f0;
}
.dp-day.empty {
  cursor: default;
  background-color: transparent;
}
.dp-day.weekend {
  color: #e53935;
}
.dp-day.weekend:hover {
  background-color: #ffebee;
}
.dp-day.selected {
  background-color: #1a3687;
  color: #ffffff;
  font-weight: bold;
}
.dp-day.disabled {
  color: #ccc;
  cursor: not-allowed;
  background-color: transparent;
}

.datepicker-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px 24px 24px;
  gap: 16px;
}
.dp-btn {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #1a3687;
  cursor: pointer;
  font-family: inherit;
}

/* --- ให้ Toast / Modal ของ Bootstrap แสดงเหนือ Datepicker overlay (99999) --- */
.toast-container {
  z-index: 100055 !important;
  font-family: "Sarabun", sans-serif !important;
}
#appDialogModal {
  z-index: 100060 !important;
}
#appDialogModal + .modal-backdrop,
.modal-backdrop.app-dialog-backdrop {
  z-index: 100056 !important;
}

/* --- ช่อง datepicker ที่อยู่ในฟอร์ม Bootstrap --- */
input.thai-datepicker.form-control {
  background-color: #fff;
  cursor: pointer;
}