/* Simple Calendar Tailwind-compatible styles */

/* Calendar container */
.simple-calendar {
  width: 100%;
}

/* Calendar table */
.simple-calendar table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Header row (day names) */
.simple-calendar thead th {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Light mode header */
.simple-calendar thead th {
  color: rgb(107, 114, 128); /* gray-500 */
  border-bottom: 1px solid rgb(229, 231, 235); /* gray-200 */
}

/* Dark mode header */
.dark .simple-calendar thead th {
  color: rgb(156, 163, 175); /* gray-400 */
  border-bottom: 1px solid rgb(55, 65, 81); /* gray-700 */
}

/* Calendar cells */
.simple-calendar tbody td {
  vertical-align: top;
  height: 5rem;
  padding: 0.25rem;
  border: 1px solid rgb(229, 231, 235); /* gray-200 */
}

/* Dark mode cells */
.dark .simple-calendar tbody td {
  border-color: rgb(55, 65, 81); /* gray-700 */
}

/* Today's cell highlight */
.simple-calendar tbody td.today {
  background-color: rgb(243, 232, 255); /* purple-100 */
}

.dark .simple-calendar tbody td.today {
  background-color: rgb(88, 28, 135); /* purple-900 with opacity */
  background-color: rgba(88, 28, 135, 0.3);
}

/* Days outside current month */
.simple-calendar tbody td.prev-month,
.simple-calendar tbody td.next-month,
.simple-calendar tbody td.wday-0.not-current-month,
.simple-calendar tbody td.wday-6.not-current-month {
  background-color: rgb(249, 250, 251); /* gray-50 */
}

.dark .simple-calendar tbody td.prev-month,
.dark .simple-calendar tbody td.next-month,
.dark .simple-calendar tbody td.wday-0.not-current-month,
.dark .simple-calendar tbody td.wday-6.not-current-month {
  background-color: rgb(31, 41, 55); /* gray-800 */
}

/* Navigation header */
.simple-calendar .calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.simple-calendar .calendar-heading .calendar-title {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Light mode title */
.simple-calendar .calendar-heading .calendar-title {
  color: rgb(17, 24, 39); /* gray-900 */
}

/* Dark mode title */
.dark .simple-calendar .calendar-heading .calendar-title {
  color: white;
}

/* Navigation links */
.simple-calendar .calendar-heading a {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

/* Light mode nav links */
.simple-calendar .calendar-heading a {
  color: rgb(107, 70, 193); /* purple-600 */
  background-color: rgb(243, 232, 255); /* purple-100 */
}

.simple-calendar .calendar-heading a:hover {
  background-color: rgb(233, 213, 255); /* purple-200 */
}

/* Dark mode nav links */
.dark .simple-calendar .calendar-heading a {
  color: rgb(192, 132, 252); /* purple-400 */
  background-color: rgba(88, 28, 135, 0.3); /* purple-900 with opacity */
}

.dark .simple-calendar .calendar-heading a:hover {
  background-color: rgba(88, 28, 135, 0.5);
}

/* Calendar day content area */
.calendar-day {
  min-height: 3.5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .simple-calendar tbody td {
    height: auto;
    min-height: 3rem;
    padding: 0.125rem;
  }

  .simple-calendar thead th {
    padding: 0.25rem;
    font-size: 0.625rem;
  }

  .calendar-day-number {
    font-size: 0.625rem;
  }

  .simple-calendar .calendar-heading a {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}