/* Custom FullCalendar Styles */
.fc-theme-standard td, .fc-theme-standard th {
  @apply border-achieve-100;
}

.fc-daygrid-day {
  @apply h-32;
}

.fc-daygrid-day-number {
  @apply text-achieve-700 font-medium;
}

.fc-col-header-cell {
  @apply bg-achieve-50 text-achieve-700 font-semibold py-3;
}

.fc-day-today {
  @apply bg-achieve-50 !important;
}

.fc-event {
  @apply cursor-pointer transition-all duration-200 hover:scale-105 rounded-lg shadow-sm hover:shadow-md !important;
}

.fc-toolbar-title {
  @apply text-2xl font-bold text-achieve-700;
}

.fc-button-primary {
  @apply bg-achieve-600 border-achieve-600 hover:bg-achieve-700 hover:border-achieve-700 focus:bg-achieve-700 focus:border-achieve-700 active:bg-achieve-800 active:border-achieve-800 !important;
}

.fc-button-primary:disabled {
  @apply bg-achieve-300 border-achieve-300 cursor-not-allowed !important;
}

.fc-button-active {
  @apply bg-achieve-700 border-achieve-700 !important;
}

.fc-event-title {
  @apply font-medium px-2 py-1;
}

.fc-event-time {
  @apply px-2 pt-1 font-medium;
}

.fc-daygrid-event {
  @apply border-none !important;
}

.fc-day-other {
  @apply bg-gray-50;
}

.fc-day-other .fc-daygrid-day-number {
  @apply text-gray-400;
}

.fc-highlight {
  @apply bg-achieve-100 !important;
}

.fc-popover {
  @apply border-achieve-100 shadow-lg !important;
}

.fc-popover-header {
  @apply bg-achieve-50 text-achieve-700 !important;
}

.fc-more-link {
  @apply text-achieve-600 hover:text-achieve-700 !important;
}

/* Add smooth transitions */
.fc-button-primary,
.fc-event,
.fc-more-link {
  @apply transition-all duration-200;
}

/* Improve header buttons spacing */
.fc-toolbar {
  @apply gap-4;
}

.fc-toolbar-chunk {
  @apply flex items-center gap-2;
}

/* Style the week/month view toggle buttons */
.fc-button-group {
  @apply shadow-sm rounded-lg overflow-hidden;
}

.fc-button-group .fc-button {
  @apply focus:ring-2 focus:ring-achieve-200 focus:ring-offset-2;
}

.filter-btn {
  position: relative;
  overflow: hidden;
}

.filter-btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.3s;
}

.filter-btn:active::after {
  opacity: 0.1;
}

.event-count {
  font-size: 0.875rem;
  min-width: 1.5rem;
  text-align: center;
}

/* Modal styles */
#eventModal {
  z-index: 9999;
}

#eventModal::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.fc-view-harness {
  z-index: 0;
}

.fc-popover {
  z-index: 1000;
}

.fc-toolbar {
  z-index: 100;
}

/* Animation for modal */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#eventModal .bg-white {
  animation: modalFadeIn 0.3s ease-out;
}

/* Calendar Container */
.calendar-container {
  margin: 2rem 0;
}

/* FullCalendar Customization */
.fc {
  font-family: inherit;
}

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

.fc .fc-toolbar-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1a1a1a;
}

.fc .fc-button {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.fc .fc-button:hover {
  background-color: #15803d !important;
  border-color: #15803d !important;
  transform: translateY(-1px);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

/* Calendar Grid */
.fc .fc-daygrid-day {
  transition: background-color 0.3s ease;
}

.fc .fc-daygrid-day:hover {
  background-color: #f0fdf4;
}

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

/* Event Styling */
.fc-event {
  border-radius: 0.375rem !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.fc-event:hover {
  transform: scale(1.02);
}

/* Event Categories */
.fc-event[data-category="Employment Support"] {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

.fc-event[data-category="Training"] {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

.fc-event[data-category="Workshop"] {
  background-color: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* Modal Styling */
#eventModal {
  transition: opacity 0.3s ease;
}

#eventModal .bg-white {
  max-height: 90vh;
  overflow-y: auto;
}

/* Filter Buttons */
.filter-btn {
  transition: all 0.3s ease;
}

.filter-btn:hover {
  transform: translateY(-1px);
}

.filter-btn.active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Event Count Badge */
.event-count {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 1rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.25rem !important;
  }

  .calendar-filters {
    flex-direction: column;
  }

  .filter-btn {
    width: 100%;
  }
}