/* Calendar Component Styles - Custom Implementation */
.moonui-calendar {
  width: 100%;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .moonui-calendar {
    font-size: 0.875rem;
  }
  
  .moonui-calendar button {
    font-size: 0.8125rem;
  }
}

/* Popover responsive */
@media (max-width: 640px) {
  .time-range-popover {
    max-width: calc(100vw - 2rem) !important;
    margin: 0 auto;
  }
  
  /* Make calendar months stack vertically on mobile */
  .moonui-calendar .grid-cols-7 {
    font-size: 0.75rem;
  }
}

/* Ensure proper layout on desktop */
@media (min-width: 641px) {
  .time-range-popover {
    min-width: 640px;
  }
}