/* =======================================================
   =============== FULLCALENDAR CUSTOM STYLE ==============
   ======================================================= */


/* =======================================================
   1) TOOLBAR (แถบปุ่มด้านบน)
   ======================================================= */

/* ปรับขนาดและ padding ปุ่ม */
.fc .fc-button {
    font-size: 12px !important;
    padding: 1px 4px !important;
  }
  
  /* ปรับรูปแบบหัวข้อเดือน/ปี */
  .fc .fc-toolbar-title {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;   /* ตัวพิมพ์ใหญ่ทั้งหมด */
    font-weight: bold;
    font-size: 18px !important;
    margin: 3px 0 0 8px;
  }
  
  /* ลดระยะห่างใต้ toolbar */
  .fc .fc-header-toolbar {
    margin-bottom: 4px !important;
  }
  
  
  /* =======================================================
     2) TODAY (วันปัจจุบัน)
     ======================================================= */
  
  /* เปลี่ยนสีพื้นหลังวันปัจจุบัน */
  .fc .fc-daygrid-day.fc-day-today {
    background-color: #d9fdf8 !important;
  }

  .fc .fc-today-button.fc-button.fc-button-primary {
    text-transform: uppercase;   /* ตัวพิมพ์ใหญ่ทั้งหมด */
  }
  
  /* =======================================================
     3) HEADER (ชื่อวัน จันทร์-อาทิตย์)
     ======================================================= */
  
  .fc .fc-col-header-cell-cushion {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px !important;
  }
  
  
  /* =======================================================
     4) DAY NUMBER (ตัวเลขวันที่)
     ======================================================= */
  
  .fc .fc-daygrid-day-number {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px !important;
    font-weight: bold;
    color: #000;
  }
  
  
  /* =======================================================
     5) DAY CELL STRUCTURE (โครงสร้างช่องวัน)
     ======================================================= */
  
  /* ทำให้ช่องวันเป็น flex column และกันเนื้อหาล้น */
  .fc .fc-daygrid-day-frame {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ป้องกัน event ล้นกรอบ */
  }
  
  
  /* =======================================================
     6) EVENT CONTAINER (พื้นที่เก็บ event ในแต่ละวัน)
     ======================================================= */
  
  .fc .fc-daygrid-day-events {
    margin-top: 13px;          /* ระยะห่างจากเลขวันที่ */
    flex-grow: 1;
  
    display: flex;
    flex-direction: column;    /* เรียง event แนวตั้ง */
    align-items: stretch;
    gap: 0 !important;
  
    padding: 0 2px;            /* ซ้าย-ขวา 2px */
  
    overflow-y: auto;          /* scroll ภายในวัน */
    overflow-x: hidden;        /* ห้ามล้นแนวนอน */
  
    scrollbar-width: thin;     /* Firefox */
  }
  
  /* Scrollbar สำหรับ Chrome */
  .fc .fc-daygrid-day-events::-webkit-scrollbar {
    width: 4px;
  }
  
  
  /* =======================================================
     7) EVENT WRAPPER (ตัด layout เดิมของ FullCalendar)
     ======================================================= */
  
  /* ตัด harness wrapper เพื่อควบคุม layout เอง */
  .fc .fc-daygrid-event-harness {
    display: contents !important;
    margin: 0 !important;
  }
  
  
  /* =======================================================
     8) EVENT (ตัด style default ของ FullCalendar)
     ======================================================= */
  
  .fc .fc-daygrid-event {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* ซ่อน title เดิมของ FullCalendar */
  .fc .fc-event-title {
    display: none;
  }
  
  
  /* =======================================================
     9) DOT + DESCRIPTION (รูปแบบแสดงผล custom)
     ======================================================= */
  
  /* แถว dot + ข้อความ */
  .fc-dot-row {
    display: flex;
    align-items: center;
    gap: 4px;
  
    font-size: 10px;
    width: 100%;
    min-width: 0; /* สำคัญ: ป้องกัน overflow */
  }
  
  /* ขนาด dot */
  .fa-circle {
    font-size: 8px;
    flex-shrink: 0; /* ไม่ให้ dot หด */
  }
  
  /* ข้อความ description */
  .fc-desc {
    color: #000000;
    font-size: 8px;
    text-align: left; 
  
    white-space: nowrap;      /* แสดงบรรทัดเดียว */
    overflow: hidden;         /* ซ่อนส่วนเกิน */
    text-overflow: ellipsis;  /* แสดง ... */
  
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }