/* =========================================
   Modern FullCalendar Clean UI
   Override ของเดิมได้เลย
========================================= */

.fc,
.fc table,
.fc button,
body .fc {
  font-family: "Sarabun", "Inter", sans-serif !important;
  font-size: 13px !important;
  color: #1e293b;
}

/* Calendar Container */
#calendar {
  max-width: 100%;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* =========================================
   Toolbar
========================================= */

.fc-toolbar {
  margin-bottom: 1rem !important;
}

.fc-toolbar h2,
.fc .fc-toolbar-title {
  margin: 0;
  font-size: 1.35rem !important;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* =========================================
   Buttons
========================================= */

.fc-button,
.fc button {
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  color: #2563eb !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.18s ease;
}

.fc-button:hover,
.fc button:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.fc-button.fc-state-active,
.fc-button.fc-state-down,
.fc-button:active,
.fc-button-primary:not(:disabled).fc-button-active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22) !important;
}

/* =========================================
   Header Day
========================================= */

.fc-day-header,
.fc-col-header-cell {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-color: #eef2f7 !important;
  padding: 10px 0 !important;
}

/* =========================================
   Day Cell
========================================= */

.fc-day,
.fc-widget-content {
  border-color: #eef2f7 !important;
  background: #ffffff;
}

.fc-day:hover {
  background: #f8fbff;
}

/* Today */
.fc-today {
  background: #eff6ff !important;
}

/* =========================================
   Date Number
========================================= */

.fc-basic-view .fc-day-number,
.fc-basic-view .fc-week-number,
.fc-daygrid-day-number {
  padding: 8px !important;
  font-size: 13px !important;
  font-weight: 700;
  color: #334155;
}

/* Today Number */
.fc-today .fc-day-number {
  color: #2563eb !important;
}

/* Other Month */
.fc-other-month {
  background: #fbfdff;
}

.fc-other-month .fc-day-number {
  color: #cbd5e1 !important;
}

/* =========================================
   Event
========================================= */

.fc-event {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease;
}

.fc-event:hover {
  transform: translateY(-1px);
}

/* Event Title */
.fc-title {
  padding: 1px 2px;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
}

/* =========================================
   Time Grid
========================================= */

.fc-time-grid .fc-slats td {
  height: 48px;
}

.fc-time-grid-event {
  border-radius: 10px !important;
}

.fc-time {
  color: #64748b;
  font-size: 12px;
}

/* =========================================
   Borders
========================================= */

.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-row,
.fc-unthemed tbody,
.fc-unthemed .fc-row,
.fc-unthemed hr {
  border-color: #eef2f7 !important;
}

/* =========================================
   Popover
========================================= */

.fc-popover {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid #e5eaf2 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.fc-popover-header {
  background: #f8fafc !important;
  padding: 10px !important;
  font-weight: 700;
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 768px) {

  #calendar {
    padding: 8px;
    border-radius: 14px;
  }

  .fc-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fc-toolbar h2,
  .fc .fc-toolbar-title {
    font-size: 1.05rem !important;
    text-align: center;
  }

  .fc-button,
  .fc button {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  .fc-basic-view .fc-day-number,
  .fc-daygrid-day-number {
    padding: 5px !important;
    font-size: 12px !important;
  }
}