/* Structure générale */
.vc-calendar {
  @apply relative box-border min-w-[272px] flex flex-col rounded-xl opacity-100 transition-opacity;
}

/* Header avec navigation */
.vc-header {
  @apply flex items-center justify-between mb-6 text-center text-gray-900;
}

.vc-header__content {
  @apply flex-auto font-semibold;
}

/* Hover spécifique sur le mois et l'année */
[data-vc='month'],
[data-vc='year'] {
  @apply text-base font-semibold transition-colors cursor-pointer hover:text-primary-600;
}

/* Boutons de navigation */
.vc-arrow {
  @apply flex items-center justify-center w-8 h-8 text-gray-600 transition-colors bg-center bg-no-repeat rounded-full cursor-pointer hover:bg-gray-100;
}

.vc-arrow:hover {
  @apply text-gray-900;
}

/* Flèche précédent (Tailwind) */
.vc-arrow_prev {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e");
  @apply w-5 h-5;
}

/* Flèche suivant (Tailwind) */
.vc-arrow_next {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e");
  @apply w-5 h-5;
}

.vc-arrow[aria-disabled="true"] {
  @apply opacity-50 cursor-not-allowed hover:bg-transparent;
}

/* Content */
.vc-content {
  @apply flex flex-col grow;
}

.vc-wrapper {
  @apply flex grow;
}

/* Years */
.vc-years {
  @apply grid grid-cols-5 gap-4 overflow-hidden text-base isolate place-items-stretch grow;
}

.vc-years__year {
  @apply flex items-center justify-center h-20 transition-colors bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-primary-100;
}

.vc-years__year[aria-selected="true"] {
  @apply border bg-primary-100 border-primary-500 text-primary-600;
}

.vc-years__year[aria-disabled="true"] {
  @apply rounded-none cursor-not-allowed pointer-events-none text-grayscale-200 hover:bg-grayscale-100;
}

/* Months */
.vc-months {
  @apply grid grid-cols-4 gap-4 overflow-hidden text-base isolate place-items-stretch grow;
}

.vc-months__month {
  @apply flex items-center justify-center h-20 transition-colors bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-primary-100;
}

.vc-months__month[aria-selected="true"] {
  @apply border bg-primary-100 border-primary-500 text-primary-600;
}

.vc-months__month[aria-disabled="true"] {
  @apply rounded-none cursor-not-allowed pointer-events-none text-grayscale-200 hover:bg-grayscale-100;
}

/* Week */
.vc-week {
  @apply grid grid-cols-7 text-center text-gray-500 text-xs/6 place-items-stretch;
}

.vc-week__day {
  @apply font-medium;
}

/* Dates */
.vc-dates {
  @apply grid grid-cols-7 gap-px overflow-hidden text-sm bg-gray-200 rounded-lg shadow-xs isolate ring-1 ring-gray-200;
}

.vc-date {
  @apply flex items-center justify-center flex-none h-full p-0 bg-white;
}

.vc-date__btn {
  @apply block border border-white hover:bg-primary-100 hover:border-gray-100 focus:z-10 py-4 grow text-base w-full h-full min-h-7.5 min-w-7.5 rounded-lg transition-colors cursor-pointer;
}

.vc-date__btn[aria-selected="true"] {
  @apply bg-primary-100 text-primary-600 border-primary-500;
}

.vc-date__btn[aria-disabled="true"] {
  @apply cursor-not-allowed pointer-events-none text-grayscale-200 hover:bg-transparent;
}

.vc-date__btn[aria-disabled="true"][aria-selected="true"] {
  @apply text-primary-600 border-primary-500;
}

/* Tes overrides existants avec les data attributes */
[data-vc-months-month],
[data-vc-years-year] {
  @apply text-base font-medium;
}

[data-vc-date-btn] {
  @apply text-sm font-medium;
}

[data-vc-date][data-vc-date-today] [data-vc-date-btn] {
  @apply font-semibold text-primary-600;
}

[data-vc-dates-disabled] {
  @apply pointer-events-none hover:bg-transparent text-grayscale-200;
}