.availability-period {
  transition: all 0.3s ease;
  cursor: pointer;
  border-left: 4px solid transparent;
}

.availability-period:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-left-color: #3273dc;
}

.availability-period.is-active {
  border-left-color: #3273dc;
  background-color: rgba(50, 115, 220, 0.1);
}

/* Highlight currently active (date-wise) availability period */
.availability-period.is-current-active {
  border-left: 5px solid #48c774;
  box-shadow: 0 2px 8px rgba(72, 199, 116, 0.15);
}

.availability-period.is-current-active:hover {
  border-left-color: #48c774;
}

.availability-period.is-current-active .tag.is-success {
  background-color: #48c774;
  font-weight: 600;
}

.availability-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.availability-content.is-expanded {
  max-height: 2000px;
}

.availability-content-inner {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  overflow-x: auto;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .availability-period:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  
  .availability-period.is-active {
    background-color: rgba(50, 115, 220, 0.2);
  }
  
  .availability-period.is-current-active {
    box-shadow: 0 2px 8px rgba(72, 199, 116, 0.25);
  }
  
  .availability-content-inner {
    background-color: rgba(255, 255, 255, 0.03);
  }
}